💄

v9.8.0 最新版 ESLint を超ざっくり理解したい

2024/08/07に公開

JavaScript

TypeScript

ESLint

tech

この記事について

eslintrcが非推奨になったと聞いて、これを機に超なんとなーく使ってたESLintを調べてみるか！と一念発起した時にしたためたメモです。

この記事の対象者

ESLint とりあえず使ってみたい人
ESLint とりあえず概要を理解したい人
新しい設定ファイルの書き方をざっと理解したい人

注意

この記事は公式を読みつつしたためたメモなので公式以上の情報は載ってません。
時々個人的な見解を入れたので間違っているかもしれません。そのときはそっと教えてくださいmm

ESLint とは

ESLint はコードを静的に分析して問題を素早く見つけます。ほとんどのテキストエディターに組み込まれており、継続的インテグレーションパイプラインの一部として ESLint を実行できます。

つまり、JavaScript コードの静的解析ツール。

特徴はこんな感じ。

問題を見つける
問題を自動的に修正する
独自ルールでカスタマイズ

コーディングルールといった運用で縛るより ESLint を導入した方が時間もコストも節約できそう。

使い方

前提

Node.js がインストールされていること。
※ eslint のインストールに npm, yarn pnpm を使用するため。

手順

今回は公式で紹介されている手動セットアップに沿って進めていく。

※ 前提として事前に yarn init で package.json を作成しておく。

1. インストール

今回は yarn を使用。
このコマンドでインストールおよび初期構築が可能。

yarn add -D eslint @eslint/js

2. 設定ファイル作成

touch eslint.config.js

注意点は、プロジェクトのルートに設置することくらい。
設定ファイルの詳細はこちらを参照されたい。

蛇足だが、eslintrc 形式は非推奨になっていた。新形式から extends もなくなったみたい。

3. 設定ファイル記述

2 で作成した設定ファイルに以下を記述する。

eslint.config.js

import js from "@eslint/js";

export default [
    js.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

4. 実行してみる

ESLint CLI を使用してコードをリントする。
適当に index.js を作成してクソコードを記述。

index.js

const        str = "this is string"



　　　　　console.log('hello eslint!');

そして、ESLint CLI を実行してみる。

yarn eslint index.js

実行結果

$ yarn eslint index.js
yarn run v1.22.22
  1:14  warning  'str' is assigned a value but never used  no-unused-vars
  5:1   error    Irregular whitespace not allowed          no-irregular-whitespace
  5:6   warning  'console' is not defined                  no-undef

✖ 3 problems (1 error, 2 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

.
.
.
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!!!

ちゃんと至らない点を指摘してくれてる。ひとまず ESLint のセットアップ手順はこれで終わり。
次に詳細を見ていく。

設定ファイルの補足

ESLint のルールは基本的に設定ファイルに書いていく。
先ほどの手順で記載したルールを再掲する。

eslint.config.js

import js from "@eslint/js";

export default [
    js.configs.recommended,
   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

まず、 js.configs.recommended は定義済みの構成で ESLint が推奨するルール。
rules に書かれている no-unused-vars は未使用の変数を警告してくれる。
no-undef は宣言されていない変数の使用を警告してくれる。

この例から分かるように、定義済みの構成を使用して、追加で必要な個々のルールは rules に書いていくとよさそう。

設定ファイルのプロパティ

プロパティ一覧

設定ファイルは、定義済みの構成を除けば基本的にオブジェクト単位({ })で記載する。
オブジェクトには以下のプロパティで構成されている。

※ ほとんど公式からの流用

name - 構成オブジェクトの名前
files - 構成オブジェクトを適用する対象ファイル
ignores - 構成オブジェクトを適用しないファイル
languageOptions - JavaScriptのリント設定
- ecmaVersion - サポートするECMAScriptのバージョン
- sourceType - JavaScriptソースコードのタイプ
- globals - リンティング中にグローバルスコープに追加する必要がある追加オブジェクトを指定するオブジェクト
- parser - parse() メソッドまたは parseForESLint() メソッドを含むオブジェクト
- parserOptions - パーサーの parse() または parseForESLint() メソッドに直接渡す追加オプションを指定するオブジェクト
linterOptions - リンティングプロセスに関連する設定を含むオブジェクト
- noInlineConfig - インライン構成が許可されているかどうかを示すブール値
- reportUnusedDisableDirectives -
prosessor - preprocess()メソッドとpostprocess()メソッドを含むオブジェクトか、プラグイン内のプロセッサ名を示す文字列
plugins - プラグイン名とプラグインオブジェクトの名前と値のマッピングを含むオブジェクト
rules - 設定されたルールを含むオブジェクト
settings - すべてのルールで使用できる情報の名前と値のペアを含むオブジェクト

Appendix

Plugins とは

ESLintルール、設定、プロセッサ、環境のセットを含むことができるnpmモジュール。
基本的にここはカスタムルールが含まれていることが多い。
また、ベストプラクティスなどの強要も可能。
下記の例では eslint-plugin-jsdoc という plugin を利用して JSDoc の記載を必須化する例。

eslint.config.js

import jsdoc from "eslint-plugin-jsdoc";

export default [
    {
        files: ["**/*.js"],
        plugins: {
            jsdoc: jsdoc
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error"
        }
    }
];

より詳細はこちらを参照されたし。

まとめ

超ざっくりとだが　ESLint 設定ファイルの新形式verについて理解できた。

今回記載しなかったが、ESLint CLI を使うと自動でFixできたり、チーム内で決めたコーディングルールとかもカスタムで設定できたりする。
また、VSCode に拡張機能を入れたらすぐに警告やエラーを発見できるし、prettier を導入するとファイル保存時に自動フォーマットしてくれたりする。

サードバーティーのpluginや他の拡張機能など色々組み合わせて試してみるのもよさそう。

v9.8.0 最新版 ESLint を超ざっくり理解したい

この記事について

この記事の対象者

注意

ESLint とは

使い方

前提

手順

1. インストール

2. 設定ファイル作成

3. 設定ファイル記述

4. 実行してみる

設定ファイルの補足

設定ファイルのプロパティ

プロパティ一覧

おすすめ設定

eslint-config-prettier

Appendix

Plugins とは

まとめ

Discussion