はじめに

この記事では、私が利用してきた ESLint と Prettier のプラグインを紹介します。
※随時更新していきます。
※ESLint と Prettier の導入方法については、別途こちらの記事を書いています。

ESLintプラグイン

ESLintプラグインを種類別に紹介します。

TypeScriptのコードをESLintで利用できるようにパースする。

React向けのルール。

React17以上を利用していれば、ESLint 設定ファイルの "extends" に "plugin:react/jsx-runtime" を追加します。

以下のルールをOFFにするという方法でも同様の対処ができます。

.eslintrc.json

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Prettierと競合するルールをOFFにする。

バグを引き起こしやすいコードパターンを検知してアラートを出してくれる。

アクセシビリティのルール。

インポートに関するフォーマット。
インポート順の整理や結合、未使用インポートの削除をしてくれます。
なお、VSCode の Organize Imports と同じ動作をします。