【ESLint】インストール&設定の手順と、実行結果の見方
はじめに
JavaScriptのESLintについて学んだので、
- インストール&設定の手順
- 実行結果の見方
- VSCodeにESLintを設定する手順
をまとめた。
目次
ESLintとは?
公式Docs:https://eslint.org/より。
ESLintは、ECMAScript/JavaScriptのコードに見られるパターンを特定して報告するためのツールで、コードの一貫性を高めてバグを回避することを目的としています。多くの点でJSLintやJSHintと似ていますが、いくつかの例外があります。
実行環境
- macOS BigSur 11.5
- Node.js v16.6.0
- eslint v7.32.0
インストール&設定の手順
公式:https://eslint.org/docs/user-guide/getting-started の通りに実行。
1. npmを使ってインストールする
ESLintはnpmまたはyarnを使ってインストールできる。今回はnpm(Node.jsのパッケージを管理するツール)を使ってインストールした。
// インストール $ npm install eslint --save-dev // -gを付けていないのでローカルにインストールしている // インストールできたか確認 $ npm ls jsbook@ /Users/<ユーザー名>/jsbook └── eslint@7.32.0 #=>成功！
2. 設定ファイルをセットアップする
※注： package.jsonファイルがすでにあることを前提としているので、そうでない場合は、事前にnpm initを実行しておく。
// package.jsonを生成(既にある場合は実行しない) $ npm init // ESLintの設定ファイルをセットアップする $ npx eslint --init
3. 9個の質問に答える
$ npx eslint --initを実行すると9個の質問をされるので、答えていく- 選択にあたってこちらの記事を参考にした。
ESLintのセットアップ方法(Mac) - Qiita - フィヨルドブートキャンプのプラクティスでは、
チェックするルールはプロジェクトごとに違いますが、特になければJavaScript Standard Styleを使いましょう。
とあったので、7個目の質問で「Standard」を選んだ。 どのようなStyleかは、JavaScript Standard Style に日本語で詳しく解説されている。
? How would you like to use ESLint? To check syntax only To check syntax and find problems > To check syntax, find problems, and enforce code style //これを選んだ ? What type of modules does your project use? (Use arrow keys) JavaScript modules (import/export) CommonJS (require/exports) > None of these //これを選んだ ? Which framework does your project use? React Vue.js > None of these //これを選んだ ? Does your project use TypeScript? · No / Yes // No を選んだ ? Where does your code run? · browser, node //両方選んだ ? How would you like to define a style for your project? ❯ Use a popular style guide //これを選んだ Answer questions about your style Inspect your JavaScript file(s) ? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript > Standard: https://github.com/standard/standard //これがJavaScriptStandardStyle Google: https://github.com/google/eslint-config-google ? What format do you want your config file to be in? JavaScript > YAML JSON // rubyの設定ファイルで一番使い慣れてるのでYAMLにした。 ? Would you like to install them now with npm? // Yesにした
4. 設定ファイルができているか確認する
$ cd <インストールした場所> // 設定ファイルの中身を見る $ cat .eslintrc.yml env: browser: true es2021: true node: true extends: - standard parserOptions: ecmaVersion: 12 rules: {} $ npm ls jsbook@ /Users/<ユーザー名>/jsbook ├── eslint-config-standard@16.0.3 ├── eslint-plugin-import@2.23.4 ├── eslint-plugin-node@11.1.0 ├── eslint-plugin-promise@5.1.0 └── eslint@7.32.0 //=>成功！
ローカルにインストールした理由
公式のインストール手順では、$ npm install eslint --save-dev = ローカルでインストール方法が載っていたが、ESLint 最初の一歩 - Qiita では、$ npm install -g eslintとグローバルにインストールしていたので、ローカルとグローバルのどちらでインストールすべきか迷った。
考えた結果、ローカルにインストールすることにした。
理由は、
- 現場では、プロジェクトごとに違うルールでLinterを通すため、スコープを小さくインストールした方が良いと考えたため
- スクラム開発のプラクティスに入るまでは、特定のディレクトリ下でのみJavaScriptを書くため、グローバルにインストールする必要がなかったため
- 一次情報が一番信憑性が高いため
(「私はこういう理由でインストールしたよ」,「グローバルにインストールした方がいいよ」、などありましたら、コメントいただけると嬉しいです🙇♀️)
npxとは?
ESLintの設定ファイルをセットアップするために、$ npx eslint --initを実行したが、このnpxとは何なのか?
npxは、npmのバージョン5.2.0で導入されたコマンドで、ローカルにインストールしたnpmパッケージ(今回でいうESLint)を、このコマンド一つで簡単に実行してくれる。
使い方
基本のコマンド
// ESLintをファイルに通す $ npx eslint <ファイル名> // 自動修正は--fixオプションを使う $ npx eslint <ファイル名> --fix
FizzBuzz問題を例に、実行結果の見方を解説
ESLintを通す前のコード ❗ネタバレ注意❗
// fizzbuzz.jsファイル
for (let num = 1; num <= 20; num++) {
if (num % 3 == 0 && num % 5 == 0) {
console.log('FizzBuzz');
} else if (num % 3 == 0) {
console.log('Fizz');
} else if (num % 5 == 0) {
console.log('Buzz');
} else {
console.log(num); // ここはわざとインデントをずらした
}
}
これにESlintを通してみると、実行結果は以下のようになった。
$ npx eslint fizzbuzz.js /Users/<ユーザー名>/jsbook/fizzbuzz.js 2:15 error Expected '===' and instead saw '==' eqeqeq 2:31 error Expected '===' and instead saw '==' eqeqeq 3:28 error Extra semicolon semi 4:22 error Expected '===' and instead saw '==' eqeqeq 5:24 error Extra semicolon semi 6:22 error Expected '===' and instead saw '==' eqeqeq 7:24 error Extra semicolon semi 9:1 error Expected indentation of 4 spaces but found 5 indent 9:22 error Extra semicolon semi ✖ 9 problems (9 errors, 0 warnings) 5 errors and 0 warnings potentially fixable with the `--fix` option.
rubocopとは実行結果の表示が違い、戸惑ったので、実行結果の見方を以下に追記した。
$ npx eslint fizzbuzz.js /Users/<ユーザー名>/jsbook/fizzbuzz.js // ESLintを通したファイルのパス //行番号:何文字目か 種類 メッセージ ルール名 2:15 error Expected '===' and instead saw '==' eqeqeq 2:31 error Expected '===' and instead saw '==' eqeqeq 3:28 error Extra semicolon semi 4:22 error Expected '===' and instead saw '==' eqeqeq 5:24 error Extra semicolon semi 6:22 error Expected '===' and instead saw '==' eqeqeq 7:24 error Extra semicolon semi 9:1 error Expected indentation of 4 spaces but found 5 indent 9:22 error Extra semicolon semi ✖ 9 problems (9 errors, 0 warnings) // 9つの問題(うち、エラーは9個, 警告は0個) 5 errors and 0 warnings potentially fixable with the `--fix` option. // 5つのエラーと0つの警告が、`--fix`オプションで修正可能な可能性がある
違反の意味が分からないときの調べ方
実行結果を見て、指摘されている違反の意味が分からないときは、以下のサイトでルール名(例:上記のeqeqeq)で検索すると詳細を知ることができる。
- 日本語なので分かりやすい:JavaScript Standard Style
- 公式Docs:List of available rules - ESLint - Pluggable JavaScript linter
errorとwarningのちがい
error
- 問題があると判断したもの
- 該当部分の修正が必要
warning
- ユーザに確認し、判断して欲しいもの
- 「何とかなったっぽいけど、できれば注意して」「できるけど、できれば止めて」なもの
違反が無かったときの実行結果
違反が無かったときの実行結果が、rubocopとは異なる。
rubocopを通して違反が一つも無い時は、no offenses detected(違反は検出されなかった)と表示される。
$ rubocop <ファイル名> Inspecting 1 file . 1 file inspected, no offenses detected
しかし、ESLintは何も返ってこない。
~/jsbook> $ npx eslint fizzbuzz.js ~/jsbook>
--fixオプションを使ってみる
上記のコードに--fixオプションを使って自動修正を行うと、以下のコードになった。
自動修正後のコード ❗ネタバレ注意❗
for (let num = 1; num <= 20; num++) {
if (num % 3 === 0 && num % 5 === 0) {
console.log('FizzBuzz')
} else if (num % 3 === 0) {
console.log('Fizz')
} else if (num % 5 === 0) {
console.log('Buzz')
} else {
console.log(num)
}
}
VSCodeにESLintを設定する
VScodeの拡張機能の検索で、ESLintを探して、Installをクリック。
これですぐに使えるようになる。
違反がある所にカーソルを当てると、風船のマークが表示される。
風船をクリックするとメニューが出るので、やりたいことに応じて選ぶ。
参考記事
- ESLintの公式Docs:ESLint - Pluggable JavaScript linter
インストール手順
- 公式Docs:ESLint:GetStarted
- ESLint 最初の一歩
設定ファイル
npx
errorとwarningのちがい
VSCodeにESLintを設定する