JavaScript/TypeScriptのLinterとしてメジャーなESLintについて学習しました。
この記事では、
- Lintとは何か
- ESlintの導入方法
- ESlintの設定方法
をまとめました。
✅ 【はじめに】 そもそもLint（Linter）とは
Lintとはソースコードを静的に解析し、
以下のようなコードの問題点や不適切な記述を自動で検出してくれるツールです。
◉ 構文エラーの検出
文法的に誤ったコードを検出します。
（例：カッコの閉じ忘れ、スペルミスなど）
◉ 潜在的なバグの警告
潜在的にバグの要因になりやすいコードを警告します。
（例：未使用の変数や引数の間違いなど）
◉ コーディングスタイルの確認
定めたコーディングルールに違反する箇所を検出します。
（例：インデント幅、クォートの種類の違いなど）
Lintを導入するメリット
- バグの早期発見
- ソースコードのスタイル統一
- コードレビューの負担軽減
などの効果があり、品質・開発効率が高まります。
✅ ESLintについて
JavaScript/TypeScript用のLintツールであるESlintの導入・設定方法を共有します。
導入・設定方法
① まずは、ESLintをインストール
まずは、プロジェクトのルートディレクトリで以下のコマンドを実行します。
いくつか質問されるので、環境に合わせて回答します。
（記事公開時の最新バージョンは9.38.0でした）
npm init @eslint/config@latest
実行が完了すると、eslint.config.js（回答内容によっては.cjsや.mjsになる場合もあります）という設定ファイルが生成されます。
import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
export default defineConfig([
{
files: ["**/*.{js,mjs,cjs}"],
plugins: { js },
extends: ["js/recommended"],
languageOptions: { globals: globals.browser },
},
]);
このファイルに、ルールを追記することでカスタマイズできます。
② 設定を追加します
追加できる設定は以下のようなものがあり、必要に応じて追記します。
files
解析するファイルパターンを指定します。
files: ["**/*.{js,mjs,cjs}"]
ignores
解析の対象外とするファイルパターンを指定します。
ignores: ['node_modules', 'public'],
公式ドキュメント：Specifying files and ignores
rules
個別のルールを上書き・カスタムしたい場合に記述します。
rules: {
"no-console": "off", // console.logを許可
"semi": ["error", "always"], // セミコロン必須
"quotes": ["error", "single"], // シングルクォート強制
},
ESLintには、標準で使えるルールと、プラグインが提供するルールの2種類があります。
プラグインが提供するルールを使用する場合、後述のpluginsの設定をする必要があります。
例で使用したno-consoleやsemi、quotesはESLintが標準で提供するルールです。
plugins
VueやReactなどのフレームワークや、Node.jsなどの実行環境でESLintを適用したい場合、
それぞれに対応した追加のルールの定義を読み込む必要があります。
例えば、"vue/no-unused-vars"は
vue専用のルールであり、ESLint標準のルール含まれていません。
そのため、このルールを提供するプラグイン（eslint-plugin-vue）を読み込む必要があります。
（プラグインはeslint-plugin-[プラグイン名]という名前で公開されています。）
import vue from "eslint-plugin-vue";
export default defineConfig([
{
plugins: { vue }, // vueというプラグインを読み込む
rules: {
"vue/no-unused-vars": "warn", // vueで変数が未使用の場合に警告を出す
}
},
]);
extends
公開されているルールセットを読み込み、複数のルールをまとめて適用することができます。
extendsに指定するルールには、Google、Airbnbなどの企業が公開しているものや、
VueやReactなどのフレームワーク公式が用意しているものなどがあります。
公式ドキュメント：Extending Configurations
extends: ["js/recommended"],
補足：extendsによっては、内部でpluginsを読み込んでいるものもあり、
必ずしもpluginsの設定が必要がない場合もあります。
setting
プラグインや環境に関する追加設定を行います。
ESLintのルール実行時に参照される共通の設定を記述します。
例えば、eslint-plugin-reactでは、react.versionを設定する必要があります。
以下のように、version: detectと指定すると、自動で使用しているReactのバージョンが適用されます。
settings: {
react: {
version: 'detect',
},
},
公式ドキュメント：Adding Shared Settings
languageOptions
構文や解析方法、実行環境に関するオプションを設定できます。
import globals from "globals";
export default defineConfig([
{
languageOptions: {
ecmaVersion: 2023, // ECMAScriptの構文バージョン
sourceType: "module", // import/exportを使用するモジュール構文
globals: globals.browser, // ブラウザ環境のグローバル変数を利用可能にする
},
},
]);
公式ドキュメント：Configuration Objects
まとめ
Lintツールを導入し、適切に使用することで、
- バグの早期発見
- ソースコードのスタイル統一
- コードレビューの負担軽減
などの効果が得られ、チーム全体の開発効率向上に繋がります。
本記事で取り上げた、JavaScript/TypeScript用のLintツールであるESLintでは
以下のような構成で成り立ちます。
ESLintの設定ファイルでは、以下のような項目を指定できるので
プロジェクトに応じて設定を追記します。
| 項目 | 設定できる内容 |
|---|---|
| files | 解析するファイルやディレクトリ |
| ignores | 解析から除外するファイルやディレクトリ |
| rules | ESLintのルールを個別に指定 |
| plugins | 使用するプラグイン |
| extends | ベースとなるルールセット |
| languageOptions | 構文や解析方法、実行環境に関するオプション |