eslint5を設定する
はじめに
良い加減ESLint導入したいなと思って試したのでメモ
ES6なreact/jsx環境で試しています
当初airbnbを導入しましたが5系で非推奨な設定項目があって警告が出て気になったので一旦外しました
環境構築
必要なパッケージを入れます
1$ npm install --save-dev eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
設定
npm scripts
npm scriptsに追加してsrcディレクトリ下にあるjsxを対象にチェックを行うようにします
1"scripts": {
2 "test": "echo \"Error: no test specified\" && exit 1",
3 "lint": "eslint --ext .jsx src"
4}
jsに対しても行う場合は --ext jsと追加すれば良いです
eslintrc
必要な設定・ルール等を記述します
eslint:recommendedをベースに気になるルールの変更と追加をしました
1$ cat .eslintrc.yml
2env:
3 es6: true
4 browser: true
5parser: babel-eslint
6parserOptions:
7 sourceType: module
8extends:
9 - eslint:recommended
10plugins:
11 - eslint-plugin-react
12rules:
13 react/jsx-uses-vars: 1
14 no-unused-vars:
15 - error
16 - args: none
17 no-console:
18 - warn
19 quotes:
20 - error
21 - double
22 semi:
23 - error
24 indent:
25 - error
26 - 4
27 - SwitchCase: 1
28 comma-spacing:
29 - error
30 comma-style:
31 - error
32 computed-property-spacing:
33 - error
実行
先程登録しておいたのを呼び出しせば実行されます
設定したルールに基づいて検証が行われ結果が表示されるので適宜修正します
1$ npm run lint
2> eslint --ext .jsx src
3/path/to/hoge.jsx
4 1:51 error Missing semicolon semi
5 2:40 error Missing semicolon semi
6...
7
8✖ 16 problems (8 errors, 8 warnings)
9 4 errors, 0 warnings potentially fixable with the `--fix` option.