ESLintインストール方法と基本
はじめに
ESLintを使うにはNode.jsのインストールが必要です。
Node.jsが入っているかまずは確認してみます。
node -v
自分の環境ではv18.17.1（2024-01-27時点）がインストールされています。
ESLintインストール
- 自動セットアップ（✅おすすめ）
- 手動セットアップ
インストール実行前にpackage.jsonファイルが必要。なければnpm initでファイルを作成できる。
インストール（自動セットアップ）
設定ファイルの自動生成、必要なパッケージのインストールも同時に行いながらインストールされる。対話型のプロンプトに沿って設定を進めていく。
npm init @eslint/config
ESLintがインストールが完了すると、設定ファイル（.eslintrc.*）が作成される。ファイル形式は、途中でJavaScript, JSON, YAMLから選べる。
手動セットアップ
上記の自動セットアップの方法以外に、eslintのインストールのみを行って後から設定ファイルの構築など手動でセットアップすることも可能。
npm install --save-dev eslint
実行すると次のような出力になり終了。
added 92 packages, and audited 277 packages in 17s
54 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
package.jsonの開発依存関係にeslintが追加された。
"eslint": "^8.56.0",
次に、.eslintrc.*ファイルを作る。
touch .eslintrc.js // JSON、YAML形式でもOK
.eslintrcファイルができたら設定を記述する。参照：Configure ESLint documentation
インストール確認
eslintコマンドが使えるか確認。パスを通してないため相対パスでeslintを指定して実行。
$ ./node_modules/.bin/eslint --version
v8.56.0
npxコマンドでも実行できる。
$ npx eslint --version
v8.56.0
設定ファイルの詳細
自動セットアップの方法で作成された.eslintrcファイル。
// .eslintrc.cjs
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script"
}
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
}
}
Reactを使う時の注意
基本：
"rules": {
"react/react-in-jsx-scope": 0, // React 17以降は不要なので無効化
"react/jsx-uses-react": 0, // React 17以降は不要なので無効化
}
propTypesによる型チェックをしない場合：
"react/prop-types": 0
Ziggyパッケージを使っている場合：
routeメソッドが未定義としてエラーになる。
error 'route' is not defined no-undef
ESLintがグローバル関数を認識していないために未定義として扱われる。以下の設定で読み取り専用のグローバル変数として設定すると解決する。
"globals": {
"route": "readonly"
},
ESLintを実行してみる
ESLintを実行：
npx eslint [ファイル名]
ESLintでファイルを修正：
npx eslint [ファイル名] --fix
使用例
実際に、jsファイルに対してeslintを実行して解析してみます。
.eslintrc.cjsにルールを追加してみる。
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "single"]
}
}
上記ルールに引っ掛かるテストJSファイルを用意。
// test-eslint/test.js
function testFunction() {
var message = "Hello, world"; // ダブルクォート
console.log(message) // セミコロン忘れ
}
testFunction() // セミコロン忘れ
npx eslint ディレクトリ/ファイル名で実行。
npx eslint test-eslint/test.js
2:17 error Strings must use singlequote quotes
3:23 error Missing semicolon semi
6:15 error Missing semicolon semi
✖ 3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.
（先頭の数字は「行番号:列番号」 を表している。）
--fixオプションをつけて実行すると一部のエラーは自動で修正される。
npx eslint test-eslint/test.js --fix
複数ファイル一括実行
ESLintでチェックするファイル拡張子、ディレクトリ・ファイル群を指定して一括で実行できます。
npx eslint --ext .jsx --ext .js resources/js/
npx eslint --ext .jsx --ext .js resources/js/ --fix
ディレクトリ例：
# LaravelでReactを使うプロジェクトの例
laravel-project/
└─ resources/
└─ js/
├─ Components/
│ └─ ...
├─ Layouts/
│ └─ ...
├─ Pages/
│ └─ ...
├─ Utils/
│ └─ ...
├─ app.js
└─ bootstrap.js
package.jsonにスクリプト設定
package.jsonのscriptsに次のように設定すると、npm run lintで実行できます。
"scripts": {
"lint": "eslint --ext .jsx --ext .js resources/js/"
},
次に、--fixオプションをつけて実行するケースを設定します。これで、npm run lint-fixで実行できます。
"scripts": {
"lint": "eslint --ext .jsx --ext .js resources/js/",
"lint-fix": "npm run lint -- --fix" // 追加
},
--fixオプションの手前の--は引数の区切りを示しています。
# 形式
npm run [スクリプト] -- [引数]
補足知識
- Node.jsとは、JavaScriptの実行環境
- npmとは、Node.jsのパッケージ管理ツール（node package manager）
- npxとは、パッケージの実行を行うツール（node package executer）
npxコマンドははnpmバージョン5.2.0から同梱されている。
ブラウザ上でしか実行できなかったJavaScriptはNode.jsによってOS上で実行できるようになった。
参考ソース
公式ドキュメント：
