使用Vega ESLint插件发现性能问题

eslint-plugin-kepler为Vega应用提供自动lint规则，帮助您发现和修复性能及兼容性问题。

安装和配置插件

1. 安装Vega ESLint插件及其依赖项：

   复制代码 已复制到剪贴板。

   npm install --save-dev @amzn/eslint-plugin-kepler jsonc-eslint-parser
   

2. 更新.eslintrc配置文件的extends、plugins和overrides部分：

   复制代码 已复制到剪贴板。

   {
      "extends": [
         "@react-native",
         "eslint:recommended",
         "plugin:@amzn/eslint-plugin-kepler/kepler" // 添加扩展
      ],
      "plugins": [
         "@typescript-eslint",
         "@amzn/kepler" // 纳入插件
      ],
      "overrides": [
         {
            "files": ["**/*.ts", "**/*.tsx"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
               "project": "./tsconfig.json"
         },
         {
            "files": ["package.json"],
            "parser": "jsonc-eslint-parser" // 需要这个解析器来检查package.json
         }
      ]
   }
   

3. （可选）按照ESLint的配置规则指南自定义lint规则。有关此插件提供的所有规则，请参阅ESLint规则。

4. 在package.json中指定自定义格式化器：

   复制代码 已复制到剪贴板。

   {
   "scripts": {
      :
      "lint": "eslint src test package.json --ext .ts,.tsx --format node_modules/@amzn/eslint-plugin-kepler/dist/formatters/default.js",
      :
      }
   }
   

5. 运行linter：

   复制代码 已复制到剪贴板。

    npm run lint
   

   您可以在控制台上看到结果：

   

   linter还会生成一个HTML报告：

   

   在编辑代码时，您可以在VS Code上查看这些linter警告：

   

ESLint规则

VegaESLint插件有三种配置可供选择：

• kepler - 所有Kepler规则（性能和系统分布式库检查）
• performance - 仅限性能相关规则

• system-distributed-libs - 仅限系统分布式库检查（package.json验证和导入信息标记）

  您可以使用多个配置：javascript module.exports = { plugins: ["@amazon-devices/eslint-plugin-kepler"], extends: [ "plugin:@amazon-devices/eslint-plugin-kepler/performance", "plugin:@amazon-devices/eslint-plugin-kepler/system-distributed-libs" ], }

性能相关规则

以下规则有助于识别Vega应用中的常见性能问题，并实施最佳实践以实现最佳运行时性能。

规则名称	默认严重性	描述	最佳实践
@amazon-devices/kepler/flat-list	警告 - 标记问题但不会导致构建失败	检查FlatList元素是否有足够的属性	FlatList
@amazon-devices/kepler/check-subscription	警告 - 标记问题但不会导致构建失败	检查useAddVegaAppStateListenerCallback和useAddUserInputListenerCallback安装的回调是否已正确取消订阅	侦听器、事件订阅和计时器
@amazon-devices/kepler/animated	错误 - 标记问题并且会导致构建失败	检查动画元素组件是否使用原生驱动程序	Animated库
@amazon-devices/kepler/detect-report-fully-drawn	警告 - 标记问题但不会导致构建失败	检查代码是否正确调用useReportFullyDrawn()	完全绘制的标记
@amazon-devices/kepler/detect-splash-screen	警告 - 标记问题但不会导致构建失败	检查代码是否正确调用usePreventHideSplashScreen() 和useHideSplashScreenCallback()。	SplashScreenManager

系统分布式库规则和VS Code配置

以下规则检测系统分布式库的使用情况并指导您正确实施。| 规则名称 | 默认严重性 | 描述 | 最佳实践 | | ———————————————- | —————- | ——————————————————————————————————————————————————————————————————— | ————————— | | @amzn/kepler/sdl-package-version-check | 错误 | 验证package.json中的系统分布式库依赖项是否使用了正确的语义版本控制（选项见下文）。| | | @amzn/kepler/sdl-package-version-check-imports | 警告 | 标记系统分布式库导入以提醒您它们的工作方式与标准的React Native库不同。| |

这两条规则都有一个可选参数来设置语义版本指导级别：

• 仅限修补程序模式 (semverGuidance: "patch")： 使用~前缀限制对修补程序的更新。
• 次要模式和修补程序模式 (semverGuidance: "minor")： 允许使用^前缀的小更新。
• 自动模式 (semverGuidance: "auto")： 根据项目存储库中的项目签名检测设置。这是默认设置。

默认运行驾驶模式，但您可以通过配置semverGuidance选项来覆盖它：

系统分布式库规则要求为package.json文件使用ESLint JSON解析器。安装解析器：

如果您想在VS Code的package.json中查看错误和警告，请在以下settings.json条目中添加json：

相关主题

• ESLint官方文档（仅提供英文版）

---

Last updated: 2025年11月13日