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

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

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

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