VS Code で ESLint × Prettier のベストかも知れないプラクティス

2020/06/20 修正
前提 の部分について、VS Code のバージョンアップに伴い当てはまらない記述が出て来ましたので、一部内容を修正しました。

前書き

餅は餅屋と言う事で、コードフォーマットは Prettier に任せ、ESLint には静的解析だけを担当させると言う棲み分けが昨今の風潮ではないかと思います。
しかし VS Code には拡張機能でも ESLint や Prettier が用意されており、npm 等でインストールされるそれらとの関連がややこしい。
と言うわけで、 「いろいろ突き詰めればいろいろあるけどとりあえずこれで良くね？」 と言うやり方をご紹介します。

チーム・組織や案件によってニーズやルールは異なるのは当然ですが、ごくごくシンプルに決まったルールでフォーマットと lint をやってくれればそれでいいんだ。と言う人向けです。

前提

前提として、VS Code に

• ESLint 拡張
• Prettier 拡張

がインストール済みで、保存時に自動フォーマットが掛かるよう設定済みであることが条件です。
（editor.formatOnSave よりも editor.codeActionsOnSave の方が推奨されるそうです）

.vscode/settings.json

{
  // (省略),
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

もちろん、npm / yarn で eslint、prettier もインストールされている必要があります。

npm install -D eslint prettier
# もしくは
yarn add -D eslint prettier

設定

最終的には以下の措置だけで良いです。

まず、ESLint と Prettier の競合をよしなに取り計らってくれる設定をインストールします。

npm install -D eslint-config-prettier
# もしくは
yarn add -D eslint-config-prettier

それを ESLint が参照できるよう設定。

.eslintrc.js

module.exports = {
  env: {
    es6: true,
  },
  extends: [
    // 省略,
    "prettier",
  ],
};

extends の最後に prettier を追加するようにしてください。
最初とか途中ではダメです。

あとは必要に応じて .prettierrc で任意のフォーマット設定を指定すれば良いです。
特段の理由がなければデフォルトで良いと思いますが、"singleQuote": true くらいはしておきたいかもですね。

これで簡単快適に素敵なコーディングライフが送れます！

参考

VSCode でファイル保存時に Prettier と ESLint でフォーマットをかけても、1 回でフォーマットしきらないときの対処法
Prettier 入門 ～ ESLint との違いを理解して併用する～
続・VSCode 上で vue ファイルに対して ESLint と Prettier が快適に動作する設定
vscode-eslint v2