Zenn
🦄

ESLintをより強力に！eslint-plugin-unicornとeslint-plugin-perfectionistの活用法

2024/07/26に公開
TypeScript
ESLint
tech

はじめに

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

terminal
npm i -D eslint-plugin-perfectionist
eslint.config.js
import perfectionist from 'eslint-plugin-perfectionist'

export default [
  perfectionist.configs['recommended-natural'],
]
eslintrc.js
module.exports = {
  extends: [
    'plugin:perfectionist/recommended-natural-legacy',
  ],
}

eslint-plugin-unicorn

terminal
npm i -D eslint-plugin-unicorn
eslint.config.js
import eslintPluginUnicorn from 'eslint-plugin-unicorn';

export default [
  eslintPluginUnicorn.configs['flat/recommended'],
];
eslintrc.js
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