eslint-plugin-unicornの導入してみたので設定方法とかメモ📝

eslint-plugin-unicornを個人のプロジェクトに導入してみたので導入方法とかについてメモ📝

eslint-plugin-unicornとは？

eslint-plugin-unicornはモダンなJavaScript/TypeScriptの書き方を促進するためのESLintプラグインで、ESLintには無いモダンな記法やファイル名に関する静的解析なども提供しているプラグインです。

導入方法

1. インストール

# pnpmを使う場合
pnpm add -D eslint-plugin-unicorn

# npmを使う場合
npm install --save-dev eslint-plugin-unicorn

2. ESLint設定ファイルの構成

最近のESLintフラットコンフィグ形式（ESLint v9.0.0以降）を使った設定方法ですがeslint.config.jsに以下のように追加します。以下は推奨ルールをデフォルトで設定する例です。

import unicorn from "eslint-plugin-unicorn";

export default [
  // 他のプラグインやルール設定
  unicorn.configs.recommended
];

これでeslint-plugin-unicornのオススメルールが有効になった状態になります🦄

主要なルールと特徴

eslint-plugin-unicornには多数のルールがありますが、特に気になったものをいくつか紹介します。

全てのルールは以下を参照してください。

https://github.com/sindresorhus/eslint-plugin-unicorn?tab=readme-ov-file#rules

モダンなAPIの使用を促進するルール

prefer-array-flat: ネストした配列をフラット化する際にArray#flat()を使用するよう促します
prefer-string-slice: 非推奨のString#substr()やString#substring()の代わりにString#slice()を使用するよう促します
prefer-string-replace-all: 正規表現のグローバルフラグを使った置換よりもString#replaceAll()を使用するよう促します

コードの品質向上に関するルール

no-useless-undefined: 不要なundefinedの使用を禁止します
prefer-ternary: シンプルなif-else文の代わりに三項演算子を推奨します
explicit-length-check: 配列やオブジェクトの長さを明示的に確認することを強制します

ファイル名規則に関するルール

filename-case: ファイル名に一貫した命名規則を適用します（camelCase、PascalCaseなど）

一部のルールをカスタマイズする

基本的にESLintのその他のルールと同様ですが、すべてのルールがすべてのプロジェクトに適していると言うわけではないので、プロジェクトの特性に合わせて一部のルールを調整することができます。私は以下のような調整を行いました。

{
  rules: {
    // ファイル名の規則をカスタマイズ
    "unicorn/filename-case": [
      "error",
      {
        cases: {
          // プロジェクトで許可する命名規則
          camelCase: true,  // myComponent.js
          pascalCase: true, // MyComponent.js
        },
      },
    ],
    // 略語を許可（prevent-abbreviationsは厳しすぎる場合が多い）
    "unicorn/prevent-abbreviations": "off",
  }
}

まとめ

eslint-plugin-unicornは、モダンなJavaScript/TypeScriptコードにいい感じに矯正してれるのと、ファイル名のルールとかカスタムルールとか作ってましたがデフォルトで提供されてるのもいい感じだなと思いました！

ESLintにはsuppress ruleの仕組みも導入されたのでとりあえず既存のプロジェクトにサクッと導入してみて一旦suppressしておき徐々に対応していくような進め方も良さそうですね🦄

eslint.org

Madogiwa Blog

主に技術系の学習メモに使っていきます。