コード整形をStandardJSからPrettierに乗り換えたら捗った

eslintは --fix オプション付きで実行するとコード整形してくれる。 ここ1年強、 standardjs を好んで使っていて、そのルールに従って整形していた。

最近Prettierを知ったので早速導入してみたら、以下の理由ですぐに気に入った。

• 軽い
• 行が長くなった時でもいい感じに改行してくれる
• 設定でstandardjsっぽく調整できる

Prettierのいいところはコード整形に特化している点で、コードのクオリティには一切感知しないところ。例えば no-unused-varsとかno-extra-bindとか。 standardjsはLinterルールセットとしていろいろ入っているから結構カオス感がある。 コードのクオリティは plugin:flowtype/recommended とか plugin:react/recommended に任せれば充分。

現状の設定

プロジェクトに応じてもちろん異なるけど、.eslintrc.yml には概ね以下を記述している：

root: true
plugins:
  - react
  - flowtype
  - prettier
extends:
  - plugin:react/recommended
  - plugin:flowtype/recommended
  - plugin:prettier/recommended
parser: babel-eslint
env: {}
rules:
  prettier/prettier:
    - 2
    -
      trailingComma: none
      singleQuote: true
      semi: false

vim

ale を使って保存時に自動で eslint --fix が走るように設定している：

let g:ale_linters = {
\   'javascript.jsx': ['eslint', 'flow'],
\   'javascript': ['eslint', 'flow']
\}
let g:ale_fixers = {
\   'javascript.jsx': ['eslint'],
\   'javascript': ['eslint']
\}
let g:ale_lint_on_text_changed = 1
let g:ale_lint_on_save = 0
let g:ale_lint_delay = 500
let g:ale_fix_on_save = 1