Edited at

個人的 ESLint (Standard) + Prettier 環境構築

More than 1 year has passed since last update.


0. お気持ち

毎回同じようなことをやっているのでまとめておくことにした。

現状、prettier の実行方法は、eslint --fix に hook させる方法と、prettier-eslint-cli から実行する方法の2種類がメジャーだと思う。

自分は prettier-eslint-cli から実行する方法を採用している。

これは 「Linter は Linter、Formatter は Formatter であってほしい」みたいな気持ちからそうしている。

ちなみに、git commit するときに、huskyprettier を実行する系のアレは、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


追記 (2018/07/12)

上記コマンドで入る eslint-config-standard だと ESLint v5.x に追従できておらず、以下のような警告を吐くようになった。

これに対処するためには、以下を実行すると良い。

$ npm uninstall eslint-config-standard

$ npm install eslint-config-standard@next --save-dev

詳細は Warning message with ESLint 5 · Issue #114 · standard/eslint-config-standard に書いてある。


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/**\""
...
},
...
}