今更だけど ESLint を始めてみたら簡単に始められた
コレまで、誰かが作った js-beautify の設定ファイルを引き継いで開発したり、Angular CLI で生成される TSLint 設定ファイルを手直ししたりしたくらいだったので、今回は ESLint をゼロから始めてみることにした。
TSLint もそうだったが、ESLint で設定できるルールは大量にあり、それを全て自分で吟味して設定するのは大変だ。
でも自分なりのスタイルはやっぱりあるし、良い感じに設定したいんだけどどうしたらいいかな？と思い、試してみることにした。
目次
インストール・初期設定
まずはとにかくインストール。
$ mkdir eslint-practice && cd $_ && npm init -y
$ npm install --save-dev eslint
インストールができたら、次のコマンドで初期設定を始められる。
$ npx eslint --init
豊富な初期設定の方法
eslint --init で初期設定を始めるのだが、ココで設定ファイルを柔軟に設定できる。
コマンドラインだが、矢印キーで選択肢を選んでウィザード形式で進められるのが面白い。残念ながら、Windows GitBash および ConEmu では表示が狂いがちだった。PowerShell だと綺麗に表示できるし、Mac のターミナルなら全然問題なし。ココだけは PowerShell を使うと良いだろう。
有名なスタイルガイドを流用するなら
まずは、よく知られた有名なスタイルガイドを流用する方法。最初の選択肢で Use a popular style guide を選ぶ。
$ npx eslint --init
? How would you like to configure ESLint? (Use arrow keys)
> Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)
すると、Airbnb・Standard・Google の3つのスタイルガイドが提示されるので、好きなモノを選ぶ。
$ npx eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
Standard (https://github.com/standard/standard)
Google (https://github.com/google/eslint-config-google)
あとは「React を使うか」と、「設定ファイルを JavaScript・YAML・JSON のどの形式で書き出すか」を選べるので、好きに選ぼう。個人的には、コメントも書ける JavaScript 形式がオススメ。
進めていくと、選択したスタイルに合わせて npm パッケージがインストールされる。コレで完了。
$ npx eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? Do you use React? No
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:
eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
? Would you like to install them now with npm? Yes
Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN eslint-practice@1.0.0 No description
npm WARN eslint-practice@1.0.0 No repository field.
+ eslint-config-airbnb-base@13.1.0
+ eslint-plugin-import@2.15.0
+ eslint@5.12.1
added 54 packages from 37 contributors, updated 1 package and audited 276 packages in 7.564s
found 0 vulnerabilities
Successfully created .eslintrc.js file in /Users/Neo/eslint-practice
最終行に出力されているとおり、.eslintrc.js ファイルが生成されている。中身を見ると、なんとコレだけ。
module.exports = {
"extends": "airbnb-base"
};
extends、つまりルールの継承ができるので、Airbnb のスタイルガイドをベースに、一部ルールを自分流に調整したりできるということだ。
自分のスタイルを答えてベース設定ファイルを作るなら
次は、いくつかの質問に答えることで、ベースの設定ファイルを作る方法。eslint --init で出てくる最初の選択肢で、Answer questions about your style を選択する。
$ npx eslint --init
? How would you like to configure ESLint?
Use a popular style guide
> Answer questions about your style
Inspect your JavaScript file(s)
すると、ベースとなる ECMAScript のバージョンを聞かれる。Promise やアロー関数を使う程度なら ES2015、async / await を使うなら ES2017 を選んでおくと良いだろう。
$ npx eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use?
ES3
ES5
ES2015
ES2016
> ES2017
ES2018
続いて「ES6 modules を使うか否か」を尋ねられた後、「ブラウザ向けのコードを書くのか・サーバサイド Node.js コードを書くのか」を尋ねられる。この質問の回答によって、module をグローバル変数の一つとして認識するかどうかなどの挙動が変わるので、きちんと設定しておこう。Space キーでその項目を選択し、Enter で次の質問に進む。
$ npx eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2017
? Are you using ES6 modules? No
? Where will your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Browser
( ) Node
以降、「CommonJS (require) を使うか」「JSX を使うか」など、いくつか質問されるので、順に答えていくと、設定ファイルが生成される。
$ npx eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2017
? Are you using ES6 modules? No
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/Neo/eslint-practice
生成された .eslintrc.js はこんな感じ。
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};
正直コレだけだとルールが足りなすぎるので、どうしても自分でゴリゴリ作っていきたい人向け。
自分が書いたコードを基にルールを生成してもらうなら
コレが一番驚いた。
予め自分が書いておいたコードを読み取らせて、最適なルールを生成してくれるモードがある。eslint --init の最初の選択肢で、Inspect your JavaScript file(s) を選択する。
$ npx eslint --init
? How would you like to configure ESLint?
Use a popular style guide
Answer questions about your style
> Inspect your JavaScript file(s)
今回はプロジェクトルート配下に app/ ディレクトリがあり、この配下に JS ファイルが既にいくつか置いてあるテイとする。コレを ./app/**/*.js と Glob 指定する。
$ npx eslint --init
? How would you like to configure ESLint? Inspect your JavaScript file(s)
? Which file(s), path(s), or glob(s) should be examined? ./app/**/*.js
あとは確認のためいくつかの質問に答えると、ルールが自動生成される。
$ npx eslint --init
? How would you like to configure ESLint? Inspect your JavaScript file(s)
? Which file(s), path(s), or glob(s) should be examined? ./app/**/*.js
? What format do you want your config file to be in? JavaScript
? Which version of ECMAScript do you use? ES2017
? Are you using ES6 modules? No
? Where will your code run? Node
? Do you use JSX? No
Determining Config: 100% [==============================] 0.2s elapsed, eta 0.0s
Enabled 258 out of 265 rules based on 10 files.
Successfully created .eslintrc.js file in /Users/Neo/eslint-practice
生成された .eslintrc.js は、279行におよんでルールが記述されていた。以下はその抜粋。
rts = {
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017
},
"rules": {
"accessor-pairs": "error",
"array-bracket-newline": "error",
"array-bracket-spacing": "error",
"array-callback-return": "error",
"array-element-newline": "error",
"arrow-body-style": "error",
"arrow-parens": "error",
"arrow-spacing": [
"error",
{
"after": true,
"before": true
}
],
// 中略……
"wrap-iife": "error",
"wrap-regex": "error",
"yield-star-spacing": "error",
"yoda": "error"
}
};
こんな感じ。
個人的には、この方法でルールのベースを生成させて、使っていく中で自分が気に入らないルールを調整していくのが良いと思った。
ESLint のルール一覧は以下から確認できるので、コレを見ながら、無視して良ければ off を指定、警告にしたければ warn を指定、などとする。項目によってはいくつかのオプションで調整できたりもする。
ESLint の使い方
では、実際に ESLint を使ってみる。npx コマンドで叩くなら以下のように叩くだけで、そのディレクトリにある .eslintrc ファイルを利用してチェックしてくれる。
$ npx eslint ./app/**/*.js
一部のルールは Auto-Fix に対応しているので、--fix オプションを渡しても良いだろう。
VSCode 拡張機能でコーディング中からチェックする
今更紹介しなくてもご存知の方ばかりだとは思うが、VSCode 拡張機能に「ESLint」プラグインがあり、コレを入れると、プロジェクトディレクトリにある .eslintrc を参照して、開いているファイルに直接 Lint を適用してくれる。
コレによって、コーディング中もリアルタイムにコードスタイルを確認できるワケだ。
以上
今更 ESLint を始めてみたら、とても簡単に始められるようにお膳立てされていて良かった。