JS(React)でコード整形 (ESlint+Prettier)

いろいろ調べてて疲れたので、とりあえず結論だけまとめる

方針

色々あるけど、以下の方針が良さそう。

• いけてる整形ツールのPrettierでコードフォーマットをしつつ、構文チェックもしたいのでES Lint内でチェックする
  cf. Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
• VSCodeでも実行できるようにする

入れるものは以下

• ES Lint (lintツール)
  • https://github.com/eslint/eslint
• Prettier (コード整形ツール)
  • https://github.com/prettier/prettier
• ES Lintのコード整形ルールを全て無効にする
  • https://github.com/prettier/eslint-config-prettier
• PrettierをES Lint内で実行できるようにする
  • https://github.com/prettier/eslint-plugin-prettier
• React用のES Lint
  • https://github.com/yannickcr/eslint-plugin-react
• Babelを使っている際のLint用のパーサー
  • https://github.com/babel/babel-eslint
• gitのcommit時等に処理をhookできるようにする
  • https://github.com/typicode/husky
• commit時の処理の際にgitにstagingされたものだけをlintする
  • https://github.com/okonet/lint-staged

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react husky lint-staged

設定

以下を既存の{}の中に追加

package.json

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

.eslintrc.js

{
  "env": {
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "prettier"
  ],
  "parserOptions": {
    "version": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

prettierの設定は.eslintrc.jsにかいたplugin:prettier/recommendedのおかげで.prettierrcも呼んでくれるようになっているので全てここでする。中身はここに書いてるのはあくまで参考なのでお好きに。

.prettierrc

{
  "printWidth": 120,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

VS Codeの設定

• ESLintエクステンションをインストール
  • https://github.com/Microsoft/vscode-eslint
• その上で以下の設定をし、Save時に走らせる

{
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true
}

わかっているDeprecated情報

いくつかのソースを調べていた時に書き方が分かれていて混乱したので。どちらがいいかわかったものは書いておく

• .eslintrcではなく、.eslintrc.jsやeslintrc.jsonを使おう。jsとjsonどちらがいいかは不明。jsの方が上にあったので迷ったらjsでよさそう。
  • Configuring ESLint - ESLint - Pluggable JavaScript linter
• huskyは以前はpackage.jsonのscriptsのprecommitに書けば走ったがそうではなくなった。
  • https://github.com/typicode/husky#upgrading-from-014

{
  "scripts": {
-   "precommit": "npm test",
-   "commitmsg": "commitlint -E GIT_PARAMS"
  },
+ "husky": {
+   "hooks": {
+     "pre-commit": "npm test",
+     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+   }
+ }
}