ESLintこと始め

最近業務でフロントエンド開発を行う様になってきました。JavaScriptやHTML書いたり、Webpackのコンフィグ見てみたりとしています。フロントエンドに関心が高まる中JavaScriptに関するインターネット上の記事をふと読んだところ、ESLintなるものは知ってて当然との事が書いてありました。なので、早速コンフィグ周りを触ってみました。

ESLintって何？

ESLintとは、EcmaScriptつまりJavaScriptのリントツールです。おかしな構文を発見し警告してくれたり、自動的に直してくれたりします。なので、プロジェクトなどで使えば標準フォーマットとすることも出来ますし、個人で使ってもバグを抑制できます。もともとJavaScriptの言語自体に間違いやすい様な特性があるので、静的解析してくれるのはありがたい話です。

インストールから、実行まで

インストール

npm install -g eslint

初期化（package.jsonがないとだめ）

eslint --init

コンフィグ

設定ファイルは難しい知識は必要ないです。必要だと思ったルールを追加し、エラーレベルやオプションをいじれば完成します。標準で有効化されているルールもあり、.eslint.jsファイルの "extends": "eslint:recommended" という文で設定されてます。

ルールの書き方は非常にシンプルです。

"ルール名" : [ "エラーレベル(error, warn, off)" , "その他オプション" ]

例えば、以下の様な感じです。

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-console": [
          "off"
        ],
        "no-var": [
          "error"
        ]
    }
};

実行

IDEやAtomのプラグインを使って実行することも出来ますが、ここではbashでコマンド実行してみます。

eslint ファイル名

入力ファイル

var hogo = 200;
console.log(hogo)

function h() {
  console.log("hello");
}

出力

  1:1   error  Unexpected var, use let or const instead      no-var
  2:18  error  Missing semicolon                             semi
  4:10  error  'h' is defined but never used                 no-unused-vars
  5:1   error  Expected indentation of 4 spaces but found 2  indent
  5:15  error  Strings must use singlequote                  quotes

✖ 5 problems (5 errors, 0 warnings)
  4 errors, 0 warnings potentially fixable with the `--fix` option.

色々と警告してくれてますね。ここで、--fixオプションをコマンと引数に与えると、自動修正できるものはしてくれます。

修正されたファイル

let hogo = 200;
console.log(hogo);

function h() {
    console.log('hello');
}

参考

eslint.org