prettier でコミット前にフォーマットする

prettier lint-staged husky を使ってgit commit に合わせてJavaScriptのコードを整形します。

必要なパッケージをインストールする

npm install --save-dev prettier lint-staged husky

commitに連動させる

huskyとlint-stagedの設定をpackage.jsonにします。

package.json

{
  "devDependencies": {
    "husky": "^1.3.1",
    "lint-staged": "^8.1.5",
    "prettier": "^1.16.4"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "prettier --write",
      "git add"
    ]
  }
}

gitのバージョンが古いとhooksをうまくつけれないことがあります。
参考: husky バージョン3 で git hooks が動かない

prettierの整形ルールを作る

prettierの整形ルールを.prettierrc.jsに追加します。

.prettierrc.js

module.exports = {
  printWidth    : 120,
  tabWidth      : 2,
  useTabs       : false,
  semi          : true,
  singleQuote   : true,
  trailingComma : 'es5',
  bracketSpacing: true,
  arrowParens   : 'avoid',
};

オプションの一覧: prettier.io/docs/en/options.html

おわり。