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

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
• 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, 
  }, 
  "plugins": [ 
    "react", 
    "prettier" 
  ], 
  "parserOptions": { 
    "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" 
+   } 
+ } 
}