フロントエンド開発時におすすめのESLintプラグイン5選

昨今のJavaScript/TypeScriptの開発でなくてはならないESLintですが、プラグインも設定項目も豊富で設定に悩みますよね。

なので今回はクエリアでフロントエンドの開発時に使用しているESLintのプラグインを5つを紹介していきます。

eslint-plugin-react-hooks

https://www.npmjs.com/package/eslint-plugin-react-hooks

Reactでの開発時にはお馴染みのプラグインかと思います。

Nextで開発してる場合であればeslint-config-next内に含まれていますね。

このプラグインではHooksのルールに則っているか、依存配列が正しく記述されているかをチェックしてくれます。

eslint-plugin-import

https://www.npmjs.com/package/eslint-plugin-import

モジュールのimportに関する様々なルールを設定できるプラグインです。

個人的にはimportが多くなってきた時や雑にimportしていてもautofixで一括で並び替えてくれるのが嬉しいです。

他にもexport関連も含め複数の設定があるので開発体制や課題に合うものを探してみても楽しいかもしれません。

eslint-plugin-unused-imports

https://www.npmjs.com/package/eslint-plugin-unused-imports

未使用のimportがないかチェックしてくれるプラグインです。

開発時に意外とコードを削除したりファイルの分割したりで使わなくなったモジュールのimportが残ってしまいがちなんですけど、このプラグインのおかげでautofixをすると一括削除してくれるので便利です。

eslint-plugin-sort-destructure-keys

https://www.npmjs.com/package/eslint-plugin-sort-destructure-keys

オブジェクトの分割代入時のキーのソートをしてくれるプラグインです。

また、オブジェクトのキーのソートにはeslint-plugin-sort-keys-fixというプラグインがあります。

オブジェクトのキーの並びは無理して人の手でやるほどではないですが、ある程度順序を統一させたい気持ちもあるので気になる箇所はESLintのルールやプラグインに任せていきたいですね。

eslint-plugin-tailwindcss

https://www.npmjs.com/package/eslint-plugin-tailwindcss

Tailwindを用いた開発で便利な機能を詰め合わせたプラグインです。

• クラス名のソート
• mx-5 my-5のようにm-5としてショートハンド化が可能なプロパティのショートハンド化
• Tailwindで定義されていないクラス名使用の可否
• プロパティが重複している場合の指摘

などの機能があります。

こちらも人力で確認するには辛いですが抑えておきたいところですね。

最後に

クエリアで実際に使用しているプラグインの一部を紹介させていただきました。

開発に集中にするためにもESLintに任せられる箇所はどんどん任せて楽をしていきたいですね。

そんなESLintに助けてもらいながら開発している社内向けの管理画面やツールを構築できるローコードツールの『Querier』もよろしくお願いします。