Corredor

ウェブ、プログラミングの勉強メモ。

今更だけど 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)

すると、AirbnbStandardGoogle の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 を使うか」と、「設定ファイルを JavaScriptYAMLJSON のどの形式で書き出すか」を選べるので、好きに選ぼう。個人的には、コメントも書ける 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 やアロー関数を使う程度なら ES2015async / 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 を始めてみたら、とても簡単に始められるようにお膳立てされていて良かった。

速習webpack 速習シリーズ

速習webpack 速習シリーズ