インストール

モジュールをインストールします

  1. npm install @wordpress/eslint-plugin --save-dev

注意: このパッケージは、長期サポートステータスのあるNode.jsバージョンを必要とします(アクティブLTSまたはメンテナンスLTSリリースを確認)。古いバージョンとは互換性がありません。

使用法

デフォルト設定にオプトインするには、自分のプロジェクトの.eslintrcファイルを拡張します:

  1. {
  2. "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
  3. }

詳細については、共有可能な設定に関するESLintのドキュメントを参照してください。

  1. このプリセットは、[Prettier](https://prettier.io)コードフォーマッタを実行し、違いを個別のESLint問題として報告する[`````eslint-plugin-prettier`````](https://github.com/prettier/eslint-plugin-prettier)パッケージとのオプション統合を提供します。次のコマンドで[`````prettier`````](https://www.npmjs.com/package/prettier)パッケージを別途インストールすることで有効にできます:
  2. ``````bash
  3. npm install prettier --save-dev
  4. `

最後に、このルールセットには、TypeScript言語をサポートするためにESLintを有効にする@typescript-eslint/eslint-pluginパッケージとのオプション統合も含まれています。次のコマンドでtypescriptパッケージを別途インストールすることで有効にできます:

  1. npm install typescript --save-dev

また、[recommended-with-formatting]は、PrettierTypeScriptの統合が決して有効にならないことを保証したいプロジェクトのためのルールセットです。このプリセットは、代わりにネイティブの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ルールのみを含めることを検討できます:

  1. {
  2. "extends": [ "plugin:@wordpress/eslint-plugin/esnext" ]
  3. }

これらのルールは加算的に使用できるため、esnextcustomの両方のルールセットを拡張できますが、reactjsx-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ファイルを次のように定義することも可能です:

  1. {
  2. "extends": [ "plugin:@wordpress/eslint-plugin/jshint" ]
  3. }

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。