インストール
モジュールをインストールします
npm install @wordpress/eslint-plugin --save-dev
注意: このパッケージは、長期サポートステータスのあるNode.jsバージョンを必要とします(アクティブLTSまたはメンテナンスLTSリリースを確認)。古いバージョンとは互換性がありません。
使用法
デフォルト設定にオプトインするには、自分のプロジェクトの.eslintrc
ファイルを拡張します:
{
"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
}
詳細については、共有可能な設定に関するESLintのドキュメントを参照してください。
このプリセットは、[Prettier](https://prettier.io)コードフォーマッタを実行し、違いを個別のESLint問題として報告する[`````eslint-plugin-prettier`````](https://github.com/prettier/eslint-plugin-prettier)パッケージとのオプション統合を提供します。次のコマンドで[`````prettier`````](https://www.npmjs.com/package/prettier)パッケージを別途インストールすることで有効にできます:
``````bash
npm install prettier --save-dev
`
最後に、このルールセットには、TypeScript言語をサポートするためにESLintを有効にする@typescript-eslint/eslint-plugin
パッケージとのオプション統合も含まれています。次のコマンドでtypescript
パッケージを別途インストールすることで有効にできます:
npm install typescript --save-dev
また、[recommended-with-formatting
]は、PrettierとTypeScriptの統合が決して有効にならないことを保証したいプロジェクトのためのルールセットです。このプリセットは、代わりにネイティブのESLintコードフォーマットルールが有効になっています。
ルールセット
代わりに、プラグインが提供するより詳細なルールセットにオプトインすることもできます。これには以下が含まれます:
custom
– WordPress開発のためのカスタムルール。es5
– レガシーES5環境のためのルール。esnext
– ES2015+環境のためのルール。i18n
– 国際化のためのルール。jsdoc
– JSDocコメントのためのルール。jsx-a11y
– JSXにおけるアクセシビリティのためのルール。react
– Reactコンポーネントのためのルール。test-e2e
– Puppeteerで書かれたエンドツーエンドテストのためのルール。test-unit
– Jestで書かれたユニットテストのためのルール。test-playwright
– Playwrightで書かれたエンドツーエンドテストのためのルール。
たとえば、プロジェクトがReactを使用していない場合、次のextends
定義を使用してプロジェクトにESNextルールのみを含めることを検討できます:
{
"extends": [ "plugin:@wordpress/eslint-plugin/esnext" ]
}
これらのルールは加算的に使用できるため、esnext
とcustom
の両方のルールセットを拡張できますが、react
とjsx-a11y
の設定を省略することができます。
詳細なルールセットは、環境グローバルを定義しません。そのため、プロジェクトに必要な場合は、自分で定義する必要があります。
ルール
ルール | 説明 | 推奨 |
---|---|---|
data-no-store-string-literals | データストアを参照するために文字列リテラルを渡すことを避ける。 | |
dependency-group | 依存関係のドキュメントブロックのフォーマットを強制する。 | ✓ |
i18n-ellipsis | 翻訳可能な文字列で三点リーダーを使用することを禁止する。 | ✓ |
i18n-hyphenated-range | 翻訳可能な文字列でハイフン付きの数値範囲を禁止する。 | |
i18n-no-collapsible-whitespace | 翻訳可能な文字列で折りたたみ可能な空白を禁止する。 | ✓ |
i18n-no-flanking-whitespace | 翻訳可能な文字列で前後の空白を禁止する。 | |
i18n-no-placeholders-only | 翻訳可能な文字列でプレースホルダーのみを使用することを防ぐ。 | ✓ |
i18n-no-variables | 翻訳関数の引数として文字列リテラルを強制する。 | ✓ |
i18n-text-domain | 有効なテキストドメインを渡すことを強制する。 | ✓ |
i18n-translator-comments | 翻訳者コメントを追加することを強制する。 | ✓ |
no-base-control-with-label-without-id | ラベルプロップが設定されているがidプロパティが省略されているBaseControlコンポーネントの使用を禁止する。 | ✓ |
no-unguarded-get-range-at | 無防備なgetRangeAt 呼び出しの使用を禁止する。 |
✓ |
no-unsafe-wp-apis | @wordpress/* パッケージからの安全でないAPIの使用を禁止する。 |
✓ |
no-unused-vars-before-return | 戻り値の前に未使用の変数値を割り当てることを禁止する。 | ✓ |
no-wp-process-env | process.env のようなWordPress変数のレガシー使用を禁止する。 |
✓ |
react-no-unsafe-timeout | コンポーネント内での安全でないsetTimeout を禁止する。 |
|
valid-sprintf | 有効なsprintfの使用を強制する。 | ✓ |
wp-global-usage | globalThis.SCRIPT_DEBUG のようなWordPressグローバルの正しい使用を強制する。 |
レガシー
WordPressの.jshintrc
JSHint設定を使用していて、ESLintの同等物に移行する最初のステップを踏みたい場合は、自分のプロジェクトの.eslintrc
ファイルを次のように定義することも可能です:
{
"extends": [ "plugin:@wordpress/eslint-plugin/jshint" ]
}
このパッケージへの貢献
これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。
このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。