ESLint – Pluggable JavaScript linter
ESLintはjavascriptのためのlintです。lintはプログラムが動作不能になるような致命的な文法エラーのみならず様々なものを発見する目的で使用されます。発見したいものは例えば、間違いを犯しやすい記述であるアンチパターン、インデントの乱れのようなコードスタイルのぶれ、です。ESLintの特長は次の様な拡張性にあります。
この特長のため自分のプロジェクトに合わせたカスタムルールを簡単に作ることができます。また、ECMAScript 2015 (ES6), 2016, 2017, 2018, 2019を標準サポートしており、新しくなった記法を使う様に自身を矯正することもできます。
ESLintはnpmで導入できます。
eslint – npm
installはプロジェクトのルートをcdにして次のコマンドを実行です。
npm install --save-dev eslint同じくプロジェクトのルートに.eslintrc.jsonを置いて、以下の記述を書き込んで簡単な初期設定が完了です。
{
"extends": ["eslint:recommended"],
"parserOptions": {},
"env": {"browser": true},
"globals": {},
"rules": {}
}実行は
eslint src/jsのみです。これでsrc/js以下がeslintにかけられます。
上述した通り、eslintには多数のルールがあります。その一つ一つを管理するのは手間です。そのためまずはextendsでルールセットを継承します。ここではeslintのおすすめにしてありますが、プラグインとして様々な設定が公開されています。googleなんかも公開しています。
parserOptions,env,globalsには実行環境の構文なり、ライブラリなりを書き込みます。これを設定しないと問題が無いにも関わらず、グローバル変数、関数を宣言していない、その構文は成り立たない、と怒られます。
//設定例
"parserOptions": {
"ecmaVersion": 2018
},
"env": {
"browser": true,
"es6": true,
"jquery": true
},
"globals": {
"L": false,
"google": false,
"cloneLayer":false
},
eslint src/jsを実行した際にsrc/js/lib以下にライブラリが入っているとなるとeslintがライブラリにも怒り始めます。.eslintignoreという設定ファイルでこれを制御できます。書き方は色々なignoreファイル同様、対象に含みたくないファイルのパスを羅列するだけです。
**/lib/*eslintにかけた対象が既存のコードであったり、一気に組み立てた初期のコードであったりする場合、大量のerrorとwarningが出力されます。そしてその大半はいちいち手作業で直すのが嫌になる様な手間な部分です。–fixオプションを付けることでインデント、クォート、セミコロンの様な単純なミスをeslint側で修正してくれます。
eslint src/js --fix
