ESLint を使用して、javascript のコードがルールに即しているか自動チェックします。
Contents
ESLint
ESLint は ECMAScript のコードを識別し、ルールに即していないコードがあると報告してくれるツールです 。
コードに一貫性を持たせ、バグ回避の手助けにもなります。
導入
npm でインストールします。
|
1 |
$ npm install eslint --save-dev |
設定
初期化します。
|
1 |
$ ./node_modules/.bin/eslint --init |
いくつかの質問に答えていくと、デフォルトでルールが設定された .eslintrc.js ファイルが生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
? 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 ? Which version of ECMAScript do you use? ? Are you using ES6 modules? ? Where will your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ Browser ◯ Node ? Do you use CommonJS? ? Do you use JSX? ? Do you use React? ? What style of indentation do you use? Tabs ❯ Spaces ? What quotes do you use for strings? (Use arrow keys) ❯ Double Single ? What line endings do you use? (Use arrow keys) ❯ Unix Windows ? Do you require semicolons? (Y/n) Y ? What format do you want your config file to be in? (Use arrow keys) ❯ JavaScript YAML JSON |
生成された .eslintrc.js の例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2016, "sourceType": "module" }, "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ] } }; |
実行
ESLint を実行します。
|
1 |
$ ./node_modules/.bin/eslint a.js |
ルール違反があるとエラーが表示され教えてくれます。
まとめ
初期設定は簡単にできました。ここからプロジェクトにあったルールにカスタマイズしていけば、webpack などでコンパイルする際や、開発中に気づくことができ、レビューなども楽になり効率がよくなり、バグも見つけやすくなるかと思います。
参考
公式：ESLint