Vega ESLintプラグインを使用してパフォーマンスの問題を検出する方法

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

プラグインのインストールと構成

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のConfigure Rulesガイドに従って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. リンターを実行します。

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

    npm run lint
   

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

   

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

   

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

   

ESLintのルール

VegaESLintプラグインには次の3つの構成があります。

• 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アプリの一般的なパフォーマンス問題を特定し、最適なランタイムパフォーマンスを実現するためのベストプラクティスを実施できます。

システム分散ライブラリルールと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オプションを構成することでオーバーライドできます。

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

システム分散ライブラリルールには、package.jsonファイル用のESLint JSONパーサーが必要です。次のようにパーサーをインストールします。

npm install -D jsonc-eslint-parser

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

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

関連トピック

• ESLint公式ドキュメント

Last updated: 2025年11月13日