BLOG

ブログ
CATEGORY

【ESLint】flat configでスッキリルール

はじめに

こんにちは、遠藤です。
ESLintの設定はプロジェクトの環境構築段階でしか触ることがない気がします。

復習がてら、ESLintの設定を見直そうと情報を集めていたら、4月5日に大きな変更があったことを知りました。

今回はESLintの新しい設定方法、「flat config」について、調べた内容をまとめます。

ESLintの設定方法が変わったみたい

2024年4月5日から、ESLint version 9.0.0がリリースされました。

このバージョンのもっとも大きい変更点は、 タイトルにもある「flat config」の正式サポートです。

flat configとは

ESLintはリリースされて以来、さまざまな機能が追加されてきました。

それとともに設定の方法が複雑化していたようです。

今回正式にサポートされることとなったflat configは既存の設定方法の複雑さをなくし、シンプルにESLintの設定を行うための新しい設定方法のことを指すようです。

ESLintの開発者たちは2019年ごろからこの問題の解決に向けて、新しい設定方法の検討をしていたようで、ようやく新しい設定方法がリリースされました。 今回の変更のバックグランウドについては、公式のブログで内容がまとめられています。

flat config自体は2022年ごろから試験的な要素としてリリースされていたようなので、もしかしたら既にご存知の方もいらっしゃるかもしれません。

一番わかりやすい変更点について、今までは.eslintrc.jsonや.eslintrc.jsonなどさまざまな拡張子で設定ファイルを作成したものを、eslint.config.mjsというファイルでのみ設定を行うように変更されました。

他にも大きな変更点が多いらしく、公式が設定移行のためのガイドを提供してくれています。

ESLintとは（おさらい）

そもそもESLintは何者なのか。 それを知るためにはまず、Linterを理解する必要があります。

Linterはプログラムにおける解析ツールの総称を指します。

その語源はLintというプログラム解析ツールで、主にC言語で作られています。

Lintが普及するにつれて「Lintを使用してプログラムを解析すること」自体をLintと呼ぶように意味が転じていったとされています。

そのため、「Lintを行うこと」と「Lintを実行するためのツール」を区別するためにLinterという言葉が使われるようになりました。

そして、さまざまな言語の解析ツールが開発される中で、Java Scriptのために開発された「Lintを実行するためのツール」がESLintです。

追記するとJava ScriptのLinterはESLintがデファクトスタンダートであり、実質選択肢は一つのようです。

最新のESLintを導入する

それでは実際にflat configで設定してみます。 まずはESLintをインストールします

まずはnodeを最新（21.1.0以降）に設定しパッケージをインストールします。ESLint 9.0.0は古いnodeをサポートしていないので、nodeのバージョンが古い場合はパッケージインストール時にエラーになります。

error @eslint/js@9.1.1: The engine "node" is incompatible with this module. Expected version "^18.18.0 || ^20.9.0 || >=21.1.0". Got "16.4.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

意訳　：　新しいnodeつかってくださいな。

今回は空のディレクトリで一から動作確認するため、package.jsonを作成するコマンドを実行します。この時、CLIに色々聞かれますが一旦全てenter key で大丈夫です。

次に最新版のESLintをインストールします。
最後に追加したパッケージを初期化実行します。

volta install node@latest  //nodeを最新の状態にするコマンド
node -v // nodeのバージョンを確認するコマンド
npm init // package.jsonの追加
npm install eslint@latest // eslintパッケージを初期化実行

パッケージを初期化実行すると、CLIがいろいろ質問してきます。 具体的には下記の内容です。（意訳）

  • How would you like to use ESLint?（どうやってESLint使う？）
  • What type of modules does your project use?（どのタイプのJava Scriptを使う？）
  • Which framework does your project use?（ReactかVueを使う？）
  • Does your project use TypeScript?（TypeScriptを使う？）
  • Where does your code run?（どんな環境でコードを動かす？）
  • Would you like to install them now?（いろいろインストールしてもいいかな？）

今回は動きだけ見たいので、基本的にNo系を選んでます。 最後の質問はYesにしないと初期化が始まらないので注意です。

もろもろのインストールが終わるとディレクトリの中が以下のような構成になります。

パッケージを初期化実行するとconfigファイルが生成されます。 以前まではこの生成されるconfigファイルが.eslintrcでしたが、9.0.0以降はデフォルトがeslint.config.mjsになるようです。

一応環境設定をすればこれまでの設定ファイルを使用できるようですが、今後のバージョン（10.0.0以降）ではeslintrcファイルをサポートしなくなる想定もあるみたいです。（公式より）

ESLint 9.0.0 を設定して使ってみる

まずは作成されたeslint.config.mjsの中身を確認します。

import pluginJs from "@eslint/js";

export default [
  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "script" },
  },
  pluginJs.configs.recommended,
];

一番最初の行はESLintの推奨設定をimportで読み込んでいます。

export defaults以降は配列となっており、各設定項目をオブジェクトで渡していくことで詳細な設定ができます。内容の詳細は以下のようになります。

  • files : Lint対象にする拡張子を設定
  • languageOptions : Java Scriptのスクリプトタイプを指定
  • 最後の行 : importした推奨設定をESLintに反映

最後の行は従来のextendsで設定していた部分です。

それではhello.jsファイルを作成して、ESLintが動作するか確認します。

ESLintの推奨設定では、consoleを許可していないのでエラーが出ています。ですが実際の開発ではconsoleを使用する機会が多いと思うので、cosoleを許容するためのルールを書きます。

export default [
  pluginJs.configs.recommended,
  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "script" },
    rules: {
      "no-console": { allow: ["warn", "error"] },
    },
  },
];

もう一度hello.jsを確認するとエラーが消えています。

次はpluginを設定してみます。 今回はerrorを全て警告に変更するpluginを設定ます。まずはターミナルでpluginをインストールします。

npm install eslint-plugin-only-warn

次にeslint.config.mjsでインストールしたプラグインを読み込み、設定に反映させます。

import pluginJs from "@eslint/js";
import onlyWarn from "eslint-plugin-only-warn";

export default [
  pluginJs.configs.recommended,
  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "script" },
    plugins: {
      "only-warn": onlyWarn,
    },
  },
];

hello.jsを確認すると警告色に変わっていることがわかります。

ESLintには多種多様なpluginが用意されています。

TypeScriptやVueを使用する際も、pluginを利用することで簡単に設定をすることができます。実際の運用では、推奨設定やpluginを使用し、不要な設定のみrulesで取り外しをする使用方法が多い印象です。

拡張子ごとの設定

flat configの利点として、配列で設定できるようになったことで拡張子ごとにルールやプラグインを設定しやすくなったようです。

以下のような設定を書きます。

import pluginJs from "@eslint/js";

export default [
  pluginJs.configs.recommended,
  // .jsの設定
  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "script" },
    rules: {
      "no-console": { allow: ["warn", "error"] },
    },
  },
  // .mjsの設定
  {
    files: ["**/*.mjs"],
    languageOptions: { sourceType: "script" },
  },
];

今回は.jsにのみconsoleを許可する設定を追記しました。

.jsファイルと.mjsファイルの中身をそれぞれ確認すると、それぞれ異なるESLintのルールが適用されていることがわかります。

新機能　ESLint Config Inspector

ESLint 9.0.0は、設定したルールを視覚化する「ESLint Config Inspector」機能がサポートされています。（公式のブログ記事はコチラ）

使い方はとっても簡単。ターミナルでESLintのパッケージを実行する際にオプションをつけるだけです。

npx eslint --inspect-config

実行するとlocalhost:7777がブラウザで開かれ、configを視覚化した画面が表示されます。

できることとしては下記の通りです。

  • 配列内のオブジェクトごとの設定確認（Config）
  • 設定されたルールの一覧（Rules）
  • フォイルごとにどのルールが適用されているかの確認(Files)

たとえば、以下の画面は上記の拡張子ごとの設定をした配列の2個目のオブジェクトを表しています。

  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "script" },
    plugins: {
      "only-warn": onlyWarn,
    },
  },

Rulesのタブではパッケージにインストールされたルールを一覧で確認することができます。画面は現在の設定で使用されているルールで絞り込みカードスタイルで表示しています。

またFilesではプロジェクト内のファイル一覧を選択し、そのファイルに適用されているESLintの設定を確認することができます。

さいごに

今回はESLint 9.0.0について調べたことについて簡単にまとめました。

ESLintはフロントエンドエンジニアとして必須のツールなので、今後も最新の情報を追ったり、より良い設定を探していけたらと思いました。

個人的にGUIで設定を確認できるようになったのはとても嬉しいです。

みなさんの開発の一助になれば嬉しいです。

ではまた〜！！

RANKING

BACK NUMBER
CATEGORY