Vega ESLintプラグインのインストールと設定

Vega ESLintプラグイン（eslint-plugin-kepler）は、Vegaアプリ用の自動リンティングルールを提供して、パフォーマンスと互換性に関する問題の検出と修正を支援します。

前提条件

プラグインとその依存関係をインストールします。

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

プラグインの構成

1. .eslintrc構成ファイルのextends、plugins、overridesの各セクションを更新します。

   コードをコピー クリップボードにコピーしました。

   {
      "extends": [
         "@react-native",
         "eslint:recommended",
         "plugin:@amazon-devices/eslint-plugin-kepler/kepler" // 拡張機能を追加します。
      ],
      "plugins": [
         "@typescript-eslint",
         "@amazon-devices/kepler" //プラグインを含めます。
      ],
      "overrides": [
         {
            "files": ["**/*.ts", "**/*.tsx"],
            "parser": "@typescript-eslint/parser",
            "parserOptions": {
               "project": "./tsconfig.json"
         },
         {
            "files": ["package.json"],
            "parser": "jsonc-eslint-parser" // このパーサーはpackage.jsonをチェックするために必要です。
         }
      ]
   }
   

   プラグインの構成には以下が含まれます。

   • performance - パフォーマンス関連ルールのみ
   • system-distributed-libs - システム分散ライブラリチェックのみ（package.jsonの検証とインポートの情報フラグ）

   performanceとsystem-distributed-libsは、両方を同時に使用しても同じ結果を得ることができます。

   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. （任意）ESLintのConfigure Rulesガイドに従ってLintルールをカスタマイズします。

   Vega ESLintプラグインで提供されるルールについては、パフォーマンスのルールについてを参照してください。

3. package.jsonでカスタムフォーマッターを指定します。

   コードをコピー クリップボードにコピーしました。

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

4. リンターを実行します。

   コードをコピー クリップボードにコピーしました。

    npm run lint
   

   結果はコンソールで確認できます。

   

   リンターはHTMLレポートも生成します。

   

   VS Codeでは、コードの編集中にこれらのリンターの警告を確認できます。

   

パフォーマンスのルールについて

次のルールを使用すると、Vegaアプリの一般的なパフォーマンス問題を特定し、最適なランタイムパフォーマンスを実現するためのベストプラクティスを実施できます。

システム分散ライブラリのルールについて

次のルールは、システム分散ライブラリの使用状況を検出し、適切な実装のためのガイドを提供します。

（任意）セマンティックバージョンのガイダンスの構成

システム分散ライブラリのルールでは、package.jsonの依存関係のセマンティックバージョニングを確認します。デフォルトでは、プラグインは自動モードを使用してプロジェクトのバージョニング設定を検出します。

デフォルトをオーバーライドするには、semverGuidanceオプションを設定します。

• パッチのみモード（semverGuidance: "patch"）： ~プレフィックスを使用するパッチのみにアップデートを制限します。
• マイナーおよびパッチモード（semverGuidance: "minor"）： ^プレフィックスを使用してマイナーアップデートを許可します。
• 自動モード（semverGuidance: "auto"）： プロジェクトリポジトリ内のプロジェクト署名に基づいて設定を検出します。これがデフォルトです。

パッチのみモードを使用した構成例：

module.exports = {
  plugins: ["@amazon-devices/eslint-plugin-kepler"],
  rules: {
    "@amazon-devices/kepler/sdl-package-version-check": [
      "error",
      { semverGuidance: "patch" },
    ], // 「auto」がデフォルトです
    "@amazon-devices/kepler/sdl-package-version-check-imports": [
      "warn",
      { semverGuidance: "patch" },
    ],
  },
};

（任意）JSON検証用のVS Codeの構成

VS Codeのpackage.jsonでエラーや警告を確認したい場合は、jsonを次のsettings.jsonエントリに追加してください。

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // 以下の行を追加します
    "json"
  ],
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    // 以下の行を追加します
    "json"
  ],

関連トピック

• ESLint公式ドキュメント

Last updated: 2026年1月14日