ESLintとPrettierを導入する

概要

ESLintとPrettierを導入します。
Airbnb JavaScript Style Guide
を使用するための設定まで行います。

環境

• Mac OS X Sierra 10.12.6
• Node.js v10.1.0
• npm 5.6.0
• ESLint 4.19.1

導入手順

###NPMを使用して、ESLintのインストール

$ npm install eslint --save-dev

設定ファイルの作成

以下のコマンドを実行することで、対話形式で設定内容が質問され、設定ファイル.eslintrc.jsが作成されます。

$ ./node_modules/.bin/eslint --init

? How would you like to configure ESLint?
  Answer questions about your style
❯ Use a popular style guide
  Inspect your JavaScript file(s)

? Which style guide do you want to follow?
  Google
❯ Airbnb
  Standard

? Do you use React? (y/N)N

? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript
  YAML
  JSON

質問の中でAirbnbのスタイルガイドを使用すると答えているため、eslint-config-airbnb-baseについても自動的にインストールされます。

ESLintの実行

以下のコマンドで実行できます。

$ ./node_modules/.bin/eslint yourfile.js

package.jsonにESLint実行コマンドを追加

./node_modules/.bin/eslintではなく、lintコマンドで実行できるようにpackage.jsonを修正します。
以下を追加してください。

package.json

  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "echo \"Error: no test specified\" && exit 1",
+   "lint": "eslint yourfile.js"
  }

yourfile.jsについては、適宜変更してください。

コマンド実行

以下のコマンドで実行します。規約違反があった場合、メッセージが表示されます。

$ npm run lint

package.jsonにfixオプションの実行コマンドを追加

fixオプションを追加することで、規約に違反したコードをある程度自動で修正してくれます。

package.jsonにfixオプションの実行コマンドを追加します。

package.json

  "scripts": {
-   "lint": "eslint yourfile.js"
+   "lint": "eslint yourfile.js",
+    "lint:fix": "eslint --fix yourfile.js"
  },

コマンドの実行

以下のコマンドで実行します。規約違反のコードが自動的に修正されます。
ただし、全てのコードが修正される訳ではないので注意してください。

$ npm run lint:fix

globalsプロパティの設定

ここまでの設定のままだと、no-undefルールによって、documentなどのグローバル変数・関数がとエラーとなります。
そのため、.eslintrc.jsにglobalsオプションを追加します。
以下のように追加します。

.eslintrc.js

+ "globals": {
+   "document": true
+  }

キーは変数名を指定(document)し、値は(true or false)は書き込み可能かどうかを指定します。
tureを指定した場合、書き込み可能となります。

###NPMを使用して、Prettierのインストール

$ npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

###.eslintrc.jsの設定

Prettierを適用するための設定を追加します。

.eslintrc.js

-    "extends": "airbnb-base",
+    "extends": [
+        "airbnb-base",
+        "plugin:prettier/recommended"
+    ],

また、airbnbの設定ルールと被るため、singleQuoteだけオプション設定します。

.eslintrc.js

+    "rules": {
+        "prettier/prettier": [
+            "error",
+            {"singleQuote": true}
+        ]
+　　   }