Install and Configure the Vega ESLint Plugin

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

Prerequisites

Install the plugin and its dependencies:

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

Configure the plugin

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

   Copy code Copied to clipboard.

   {
      "extends": [
         "@react-native",
         "eslint:recommended",
         "plugin:@amazon-devices/eslint-plugin-kepler/kepler" // add the extension
      ],
      "plugins": [
         "@typescript-eslint",
         "@amazon-devices/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
         }
      ]
   }
   

   The plugin configurations include:

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

   You can use both performance and system-distributed-libs together to achieve the same result.

   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"
      ],
   }
   

2. (Optional) Customize lint rules following ESLint's configure rules guide.

   For rules provided by Vega ESLint plugin, see Understand the performance rules.

3. Specify custom formatter in package.json:

   Copy code Copied to clipboard.

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

4. 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:

   

Understand the performance rules

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

Understand the system distributed library rules

The following rules detect system distributed library usage and guide you on proper implementation.

(Optional) Configure semantic version guidance

The system distributed library rules check semantic versioning in your package.json dependencies. By default, the plugin uses auto mode to detect your project's versioning settings.

Override the default by setting the semverGuidance option:

• 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.

Example configuration using patch-only mode:

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

(Optional) Configure VS Code for JSON validation

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: Jan 14, 2026