環境を構築するメリット

eslint

一定のコーディングルールを儲けることができる為、コードレビュー負担の削減や可読性の向上を期待できます。
プラグインを設定することで即時エラーを確認することができる為、開発スピードを向上できます。

prettier

コードフォーマット機能を備えており、コードフォーマットの統一による可読性の向上を期待できます。
インデント等を気にせずプログラミングが可能な為、開発スピードを向上できます。

husky

コミット時に追加ファイルをeslintとprettierによる自動修正が可能。
自動修正できない場合は、コミット時にエラーがある場合はエラー内容が出力されコミットができない。
定めた条件をクリアしたものだけがコミットできる為、レビュアーの負担を軽減できます。

eslint prettier husky で作る簡単環境構築

導入する際の、基本的な構築手順を記載します。
導入後に、必要に応じてルールの追加やプラグインの追加も可能です。

1. eslintをinstall

npm install eslint  --save-dev

2. eslintの初期化

./node_modules/eslint/bin/eslint.js --init

いくつか質問されるので、好みやプロジェクトに合わせて選択する。
→ eslintの設定ファイル .eslintrc(ファイル形式選択可能) が作成される。
※ style guideについてはいくつか選択肢がありますが、迷ったら最初は厳しすぎない Standard がオススメです。

3. prettierをinstall

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

4. eslintrcファイルにprettierの設定を追加

extends

  "extends": [
    "plugin:prettier/recommended"
  ]

extends（配列）に設定を追記します。

rule

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

シングルクォートとセミコロンの設定を追加してます。
ここに追加したいルールを追加することでカスタマイズ可能です。

カスタマイズ例

  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ],
    "no-var": "error",
    "prefer-const": "error",
    "object-shorthand": "error",
    "prefer-arrow-callback": "error"
  }

5. husky lint-staged をinstall

npm install husky lint-staged  --save-dev

6. huskyの設定追加

package.json に追加

{
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

"scripts": {...},などと同階層に追加します。

おまけ. VSCode (Visual Studio Code) で保存時自動修正

プロジェクトルート配下に、.vscodeディレクトリを作成
.vscode 配下に下記ファイルを配置

settings.json

{
  "eslint.nodePath": "./node_modules/eslint/bin/eslint.js",
  "eslint.autoFixOnSave": true,
  "eslint.workingDirectories": [
    "./path/to/workingDir"
  ]
}

※ eslint適用したいディレクトリがサブディレクトリの場合は、"eslint.workingDirectories"を指定する。

eslint prettier husky を使った簡単環境構築