Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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

前書き

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

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

前提

前提として、VS Code に

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

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

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

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

iShinkai
kintone Certified Associate / kintone Certified Customization Specialist
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away