コードのフォーマットを ESLint Stylistic に任せる #AdventCalendar2023

この記事の概要

JavaScript や TypeScript を用いるプロジェクトであれば、リポジトリを作成したすぐ後に ESLint と Prettier を導入すると思います。

両者の役割が違うのは理解しつつも、設定の連携まわりが面倒に感じてしまいます。
また、Prettier の printWidth によって、文字数が変わっただけで diff 扱いになるのもあまり好きではありません。

なんて考えていたら、ESLint だけでリントとフォーマットの完結するプラグインが出ているではありませんか。

というわけで試してみました。

前提

筆者はリンターやフォーマッターを設定する際に、以下を前提としています。

自分の好みではなく、世の中の多数派にあわせる
できるだけ初期設定のままで使う

つまり、recommended 的な設定だけ入れて他はまったく触らない、みたいな使い方です。

今回の記事でもその考えに基づいて記載をしていますので、ご了承ください。

準備

ESLint Stylistic に jsx のルールも入っているので、React のプロジェクトを作ります。

bunx create-vite

TypeScript かつ React で作成しました。

ESLint の導入

必要な依存関係を追加します。

bun i -d eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser @stylistic/eslint-plugin

.eslintrc.cjs を作成します。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  overrides: [
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@stylistic/recommended-extends',
  ],
  rules: {},
}

extends にある 'plugin:@stylistic/recommended-extends' が大事です。
というか、それ以外の部分はいつも見るような内容だと思います。

公式ドキュメントの Shared Configurations > Static Configurations にあるように、デフォルトの設定でよければこの1行を追加するだけで完了です。

後は次のようにでもコマンドを追加すれば利用できます。

package.json

{
  "scripts": {
    "lint": "eslint . --ext js,jsx,ts,tsx",
    "format": "eslint --fix . --ext js,jsx,ts,tsx"
  },
}

ルールをカスタムしたいときは？

公式ドキュメントの Shared Configurations > Configuration Factory の方にあるような書き方をすれば可能です。

最初に書いた通り、筆者はできるだけカスタムしたくないため、こちらは試していません。

余談

Getting Started だけを見ると「@typescript-eslint/eslint-plugin を置き換える」って記載に見えましたが、実際は「スタイルのルールだけを置き換えるのであって、パースやリントには @typescript-eslint/parser と @typescript-eslint/eslint-plugin が必要」でした。

また、Migration で紹介されている内容が「既存プロジェクトもコードフォーマットに ESLint を使っている前提」の記載で、なんとなく混乱しました。
大半の人が Prettier を使っていると思うので、そちらからの移行内容を書いてくれた方が優しいような気もしています。

そんなこんなで、実際に書いたコード量の割に、ドキュメント内容があまり理解できず止まっていた時間が多かった気もします。