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

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

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

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

Vega ESLintプラグインをインストールします。
クリップボードにコピーしました。
```
npm install --save-dev @amazon-devices/eslint-plugin-kepler
```

プロジェクトでESLintを構成します。

.eslintrc構成ファイルのextendsとpluginsを更新します。

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

{
"extends": [
         "@react-native",
         "eslint:recommended",
         "plugin:@amazon-devices/eslint-plugin-kepler/performance" // 拡張機能を追加します。
],
"plugins": [
         "@typescript-eslint", 
         "@amazon-devices/kepler" //プラグインを含めます。
],
"parserOptions": {
         "project": "./tsconfig.json" 
},
"parser": "@typescript-eslint/parser"
}

（任意）ESLintドキュメントのConfigure Rules（英語のみ）で説明されているように、要件に合わせてLintのルールをカスタマイズできます。このプラグインで提供されるすべてのルールについては、ESLintのルールを参照してください。

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

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

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

リンターを実行します。
クリップボードにコピーしました。
```
 npm run lint
```
結果はコンソールで確認できます。

リンターの実行後の結果が表示されたコンソール

リンターは、コンソール出力に加えてHTMLレポートも生成します。

VegaのESLintパフォーマンスレポート

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

リンターの警告

ESLintのルール

ルール名	デフォルトの重大度	説明	ベストプラクティス
@amazon-devices/kepler/flat-list	警告 - 問題が報告されますが、ビルドは失敗しません。	FlatList要素に十分なプロパティが設定されているかどうかをチェックします。	FlatList
@amazon-devices/kepler/check-subscription	警告 - 問題が報告されますが、ビルドは失敗しません。	useAddVegaAppStateListenerCallbackとuseAddUserInputListenerCallbackによってインストールされたコールバックが正しく登録解除されているかどうかをチェックします。	リスナー、イベントサブスクリプション、タイマー
@amazon-devices/kepler/animated	エラー - 問題が報告され、ビルドは失敗します。	Animated要素のコンポーネントでネイティブドライバーが使用されているかどうかをチェックします。	Animatedライブラリ
@amazon-devices/kepler/detect-report-fully-drawn	警告 - 問題が報告されますが、ビルドは失敗しません。	useReportFullyDrawn()が正しく呼び出されているかどうかをチェックします。	描画完了マーカー
@amazon-devices/kepler/detect-splash-screen	警告 - 問題が報告されますが、ビルドは失敗しません。	usePreventHideSplashScreen()とuseHideSplashScreenCallback()が正しく呼び出されているかどうかをチェックします。	SplashScreenManager

ESLint公式ドキュメント

Last updated: 2025年9月30日

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

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

ESLintのルール

関連トピック