0. お気持ち
毎回同じようなことをやっているのでまとめておくことにした。
現状、prettier の実行方法は、eslint --fix に hook させる方法と、prettier-eslint-cli から実行する方法の2種類がメジャーだと思う。
自分は prettier-eslint-cli から実行する方法を採用している。
これは 「Linter は Linter、Formatter は Formatter であってほしい」みたいな気持ちからそうしている。
ちなみに、git commit するときに、husky で prettier を実行する系のアレは、git add -p に対応していないという理由から設定していない。
詳細は Add better support for partially staged files · Issue #62 · okonet/lint-staged に書いてある。
1. ESLint 周りインストール
$ npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
2. .eslintrc.js を書く
eslintrc.js
'use strict'
module.exports = {
extends: 'standard'
}
3. Prettier 周りインストール
公式ドキュメントでは、prettier 自体は --save-exact でバージョンを完全に固定して入れることが推奨されているが、まあなんかそんなにきっちりしなくていいやということにした。
$ npm install --save-dev prettier prettier-eslint prettier-eslint-cli
4. .prettierrc.js を書く
ココらへんは好みだが、まあ Standard を採用していると、概ねこんな感じになるはず。
prettierrc.js
'use strict'
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
trailingComma: 'none',
bracketSpacing: true,
arrowParens: 'always'
}
5. package.json を書く
package.json
{
...
"scripts": {
...
"lint": "eslint .",
"format": "prettier-eslint --write \"./**/*.js\" --ignore \"./node_modules/**\""
...
},
...
}
