ESLintをより強力に!eslint-plugin-unicornとeslint-plugin-perfectionistの活用法
はじめに
ESLintはJavaScriptやTypeScriptのコード品質を向上させるためのツールですが設定に悩むことも多いです
本記事ではESLintの設定をシンプルかつ強力にするための2つのプラグインeslint-plugin-perfectionist
とeslint-plugin-unicorn
を紹介します
これらのプラグインを使うことで、手間をかけずに厳格なコードチェックを実現できます!
eslint-plugin-perfectionistとは
eslint-plugin-perfectionist
はオブジェクト、インポート、型、列挙型、JSXプロパティなどのデータを整然と並べ替えるためのESLintプラグインです
並べ替えの基準にはアルファベット順や自然順、行の長さ順などがあります
このプラグインの特徴としてすべてのルールが自動修正可能であり、開発者が手動で修正する必要がないためコードの一貫性と品質を簡単に保つことができるところです
eslint-plugin-unicornとは
eslint-plugin-unicorn
は、コード品質を向上させるために100以上の強力なESLintルールを提供するプラグインです
正規表現の改善、特定のコーディングスタイルの強制、最新のJavaScript機能の推奨、一般的な落とし穴の回避などに焦点を当てています
最新のプラクティスや一貫性を重視し、一般的なエラーを回避するために設計されており、recommended
を指定することで簡単に使用を開始できます
セットアップ方法
eslint-plugin-perfectionist
とeslint-plugin-unicorn
のインストール方法
eslint-plugin-perfectionist
npm i -D eslint-plugin-perfectionist
import perfectionist from 'eslint-plugin-perfectionist'
export default [
perfectionist.configs['recommended-natural'],
]
module.exports = {
extends: [
'plugin:perfectionist/recommended-natural-legacy',
],
}
eslint-plugin-unicorn
npm i -D eslint-plugin-unicorn
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
export default [
eslintPluginUnicorn.configs['flat/recommended'],
];
module.exports = {
extends: [
'plugin:unicorn/recommended',
],
}
Reactで使う場合は下記のルールはオフにしてもいいかもしれません
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
export default [
eslintPluginUnicorn.configs['flat/recommended'],
{
rules: {
'unicorn/no-null': 'off',
'unicorn/no-useless-undefined': 'off',
'unicorn/prevent-abbreviations': [
'error',
{
replacements: {
e: {
event: false,
},
env: {
environment: false,
},
props: {
properties: false,
},
ref: {
reference: false,
},
},
},
]
},
}
]
導入のメリット
- コードの読みやすさと保守性の向上
- 自動修正機能による開発効率の向上
- チーム全体でのコーディングスタイルの統一
まとめ
eslint-plugin-perfectionist
とeslint-plugin-unicorn
を使うことでESLintの設定をシンプルにしながらも強力なコード品質チェックを実現できます
とりあえずこだわりはないけど厳し目のルールで自動修正してほしい場合は、ぜひ自身のプロジェクトに導入してみてください!
Discussion