はじめに
この記事では、私が利用してきた ESLint と Prettier のプラグインを紹介します。
※随時更新していきます。
※ESLint と Prettier の導入方法については、別途こちらの記事を書いています。
ESLintプラグイン
ESLintプラグインを種類別に紹介します。
TypeScript関連
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
TypeScriptのコードをESLintで利用できるようにパースする。
React関連
eslint-plugin-react
React向けのルール。
React17以上を利用していれば、ESLint 設定ファイルの "extends" に "plugin:react/jsx-runtime" を追加します。
以下のルールをOFFにするという方法でも同様の対処ができます。
.eslintrc.json
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
eslint-plugin-react-hooks
その他
eslint-config-prettier
Prettierと競合するルールをOFFにする。
eslint-plugin-sonarjs
バグを引き起こしやすいコードパターンを検知してアラートを出してくれる。
eslint-plugin-jsx-a11y
アクセシビリティのルール。
Prettierプラグイン
prettier-plugin-organize-imports
インポートに関するフォーマット。
インポート順の整理や結合、未使用インポートの削除をしてくれます。
なお、VSCode の Organize Imports と同じ動作をします。