ESLintでReact.js / ES6+ のコードをチェックする手順


ESLintはJavaScriptのための静的検証ツールです。
明らかなバグの発見や、括弧やスペースの使い方などをプロジェクトで統一するのに役立ちます。

🎂 インストール手順

ESLintのプロジェクトへ導入するのに次のパッケージをインストールします。
ESLintで使うスタイルガイドは「airbnb/javascript」にします。

# React.jsのアプリの場合
yarn add --dev eslint babel-eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-config-airbnb
# 通常の Node JS アプリの場合
yarn add --dev eslint babel-eslint eslint-plugin-import

🐰 設定手順

ESLintの設定手順は.eslintrcに記述します。

React.js対応

{
"extends": ["eslint", "airbnb", "eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint",
"env": {
"browser": true
},
"ecmaFeatures": {
"classes": true,
"jsx": true
},
"plugins": [
"react",
"jsx-a11y",
"import"
],
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"arrow-body-style": "error",
"arrow-parens": "error",
"arrow-spacing": "error",
"eqeqeq": "error",
"generator-star-spacing": "error",
"no-duplicate-imports": "error",
"no-eq-null": "error",
"no-undefined": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"object-shorthand": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",
"prefer-template": "error",
"rest-spread-spacing": "error",
"semi": "error",
"template-curly-spacing": "error",
"yield-star-spacing": "error"
}
}

Node.js対応

{
"extends": ["eslint:recommended"],
"parser": "babel-eslint",
"env": {
"browser": true
},
"ecmaFeatures": {
"classes": true
},
"plugins": [
"import"
],
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"globals": {
"process": true
},
"rules": {
"arrow-body-style": "error",
"arrow-parens": "error",
"arrow-spacing": "error",
"eqeqeq": "error",
"generator-star-spacing": "error",
"import/prefer-default-export": "off",
"no-duplicate-imports": "error",
"no-eq-null": "error",
"no-undefined": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"object-shorthand": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",
"prefer-template": "error",
"require-jsdoc": "off",
"rest-spread-spacing": "error",
"semi": "error",
"template-curly-spacing": "error",
"yield-star-spacing": "error",
"valid-jsdoc": "off"
}
}

👽 ruleの設定について

rulesの設定は次のようにワードか、数値で設定できます。

ワード 数値 説明
off 0 ruleを満たしていない場合に何もしない
warn 1 ruleを満たしていない場合に警告を出す(終了コードに影響はない)
error 2 ruleを満たしていない場合にエラーを出す(終了コードで1を返す)

そのほかに設定できるオプションです。

オプション 説明
grobals: { キー: true... } キーを登録しておくと定義済の変数とみなして警告を出しません

詳細は「Configuring ESLint」を参照ください。

😎 package.jsonの変更

package.jsonにESlintを実行するための設定を追記します。srcは任意のフォルダを指定してください。

{
"scripts": {
"eslint": "eslint src __test__",
"eslint:fix": "eslint --fix src __test__"
}
}
  • yarn run eslint => eslintの静的解析を実行
  • yarn run eslint --fix => eslintの静的解析を実行、修正可能なものは自動で修正

🍄 コメントで警告を出さないようにする

特定の行の警告をコメントで無視するようにできます。

let thing = new Thing(); // eslint-disable-line no-use-before-define

コメントの次の行を無視する場合はこちらです。

// eslint-disable-next-line no-use-before-define
var thing = new Thing();

複数行を無視する場合はこちらです。

/*eslint-disable */
alert('foo');
/*eslint-enable */

ファイル内ですべて無視する場合はこちらです。

/*eslint eqeqeq:0*/

🗻 許容するGlobal変数の設定

プログラム内で許容するGlobal変数を設定します。

{
"globals": {
"var1": true,
"var2": false
}
}

😼 補足:overcommitとの連携

overcommit」というGit eventをhookしてさまざまなコマンドを実行できるツールがあります。
このツールとESLintを組み合わせる手順も書いておきます。

# .overcommit.yml (Add following comfigugration)
PreCommit:
# Style Check for JavaScript
EsLint:
enabled: true
command: ['./client/node_modules/.bin/eslint', 'client/components/*', '-c', 'client/.eslintrc.json']
include: '**/*.jsx'

あとは bundle exec overcommit --sign としておけば git commit の前に自動でESLintが実行されます。

🎳 補足:Werckerとの連携

CIツール「Wercker」でESLintを実行するための設定は次のとおりです。

eslint:
steps:
- bundle-install:
jobs: 4
- install-packages:
name: Install node.js, build-essential, libpq-dev
packages: build-essential libpq-dev nodejs npm nodejs-legacy
- script:
name: NPM install
code: cd client && npm install -D
- script:
name: Run ESLint
code: eslint components/* -c .eslintrc

🚌 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)