Discover Performance Issues Using Vega ESLint Plugin

The eslint-plugin-kepler provides automated linting rules for Vega apps, helping you discover and fix performance and compatibility issues.

Install and configure the plugin

1. Install the Vega ESLint plugin and its dependencies:

   Copy code Copied to clipboard.

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

2. Update extends, plugins, and overrides sections of your .eslintrc configuration file:

   Copy code Copied to clipboard.

   {
      "extends": [
         "@react-native",
         "eslint:recommended",
         "plugin:@amzn/eslint-plugin-kepler/kepler" // add the extension
      ],
      "plugins": [
         "@typescript-eslint",
         "@amzn/kepler" //include the plugin
      ],
      "overrides": [
         {
            "files": ["**/*.ts", "**/*.tsx"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
               "project": "./tsconfig.json"
         },
         {
            "files": ["package.json"],
            "parser": "jsonc-eslint-parser" // this parser is needed to check the package.json
         }
      ]
   }
   

3. (Optional) Customize lint rules following ESLint's configure rules guide. See ESLint rules for all rules provided by this plugin.

4. Specify custom formatter in package.json:

   Copy code Copied to clipboard.

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

5. Run the linter:

   Copy code Copied to clipboard.

    npm run lint
   

   You can see the result on the console:

   

   The linter also generates an HTML report:

   

   You can check these linter warnings on VS code while you’re editing the code:

   

ESLint rules

The VegaESLint plugin has three configurations available:

• kepler - All Kepler rules (performance and system distributed library checks)
• performance - Performance-related rules only

• system-distributed-libs - System distributed library checks only (package.json validation and import informational flagging)

  You can use multiple configs: 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" ], }

Performance related rules

The following rules help identify common performance issues in Vega apps and enforce best practices for optimal runtime performance.

System distributed library rules and VS Code configuration

The following rules detect system distributed library usage and guide you on proper implementation. | Rule Name | Default severity | Description | Best Practice | | ———————————————- | —————- | ——————————————————————————————————————————————————————————————————— | ————————— | | @amzn/kepler/sdl-package-version-check | Error | Validates that system distributed library dependencies in package.json use proper semantic versioning (see below for options). | | | @amzn/kepler/sdl-package-version-check-imports | Warn | Flags system distributed library imports to remind you they work differently than standard React Native libraries.| |

Both rules have an optional parameter to set the semantic version guidance level:

• Patch only mode (semverGuidance: "patch"): Restricts updates to patches using ~ prefix.
• Minor and patch mode (semverGuidance: "minor"): Allows minor updates using ^ prefix.
• Auto mode (semverGuidance: "auto"): Detects settings based on project signatures in the project repo. This is the default.

Auto mode runs by default, but you can override it by configuring the semverGuidance option:

module.exports = {
  plugins: ["@amazon-devices/eslint-plugin-kepler"],
  rules: {
    "@amzn/kepler/sdl-package-version-check": [
      "error",
      { semverGuidance: "patch" },
    ], // auto is the default
    "@amzn/kepler/sdl-package-version-check-imports": [
      "warn",
      { semverGuidance: "patch" },
    ],
  },
};

The system distributed library rules require an ESLint JSON parser for package.json files. Install the parser:

npm install -D jsonc-eslint-parser

If you want to see errors and warnings in VS Code's package.json, add json to these settings.json entries:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // add the line below
    "json"
  ],
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // add the line below
    "json"
  ],

Related topics

• ESLint Official Documentation

Last updated: Nov 13, 2025