Discover Performance Issues Using Vega ESLint Plugin

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

Install and configure the plugin

1. Install the Vega ESLint plugin:

   Copy code Copied to clipboard.

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

2. Configure ESLint in your project:

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

      Copy code Copied to clipboard.

      {
      "extends": [
               "@react-native",
               "eslint:recommended",
               "plugin:@amazon-devices/eslint-plugin-kepler/performance" // add the extension
      ],
      "plugins": [
               "@typescript-eslint", 
               "@amazon-devices/kepler" //include the plugin
      ],
      "parserOptions": {
               "project": "./tsconfig.json" 
      },
      "parser": "@typescript-eslint/parser"
      }
      

   2. (Optional) You can customize lint rules to suit your requirements as described in configure rules in ESLint document. See ESLint rules for all rules provided by this plugin.

   3. Specify custom formatter in package.json:

      Copy code Copied to clipboard.

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

3. Run the linter:

   Copy code Copied to clipboard.

    npm run lint
   

   You can see result on the console:

   

   In addition to the console output, the linter generates HTML report, too:

   

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

   

ESLint Rules

Rule Name	Default severity	Description	Best Practice
@amazon-devices/kepler/flat-list	Warn - flags issues but doesn't fail builds	Checks if FlatList element has enough properties	FlatList
@amazon-devices/kepler/check-subscription	Warn - flags issues but doesn't fail builds	Checks if callbacks installed by useAddVegaAppStateListenerCallback and useAddUserInputListenerCallback are properly unsubscribed	Listeners, event subscriptions, and timers
@amazon-devices/kepler/animated	Error - flags issues and fails build	Checks if Animated element component uses native driver	The Animated library
@amazon-devices/kepler/detect-report-fully-drawn	Warn - flags issues but doesn't fail builds	Checks if useReportFullyDrawn() is invoked properly	Fully drawn marker
@amazon-devices/kepler/detect-splash-screen	Warn - flags issues but doesn't fail builds	Checks if usePreventHideSplashScreen() and useHideSplashScreenCallback() is invoked properly.	SplashScreenManager

Related topics

• ESLint Official Documentation

---

Last updated: Sep 30, 2025