ESLintとPrettierを同時に良い感じに動かす。今回はESLintからPrettierを呼び出す

プロジェクトにeslintを入れてルールを書いてるプロジェクト、

VSCodeのPrettierの設定と、ESLintの衝突を回避したい。とりあえず文末のセミコロン - 青いやつの進捗日記。

このブログでも書いたが、VSCodeの拡張機能のPrettierが.vscode/settings.jsonに書いてある

{
  "editor.formatOnSave": true,
}

でPrettierが起動することによりESLintと衝突し、ESLintの

"semi": ["error", "never"],

で末尾のセミコロンはだめなのに、Prettierの拡張機能のデフォルトの

Prettier: Semi
Whether to add a semicolon at the end of every line

と衝突する、という。まあデフォルトの設定外せばいいし、もしくは.prettierrcで

{
  "semi": false,
}

とすればプロジェクトの設定としてfalseになるので、おそらく衝突しない。けど、そもそもフォーマット系は保存時に動いてほしいし、あとそもそもプロジェクトとして設定は統一させて統一して良い感じに動いてくれるようになってほしい。

---

で、色々調べました。
方法はざっくりたぶん2つ。

① eslint-config-prettier（unnecessaryかmight conflict with PrettierなESLintのルールをオフにしてくれる）https://github.com/prettier/eslint-config-prettier
と
eslint-plugin-prettier（ESLintからPrettierを動かす）https://github.com/prettier/eslint-plugin-prettier

を入れて、

.vscode/settings.json で保存時にESLintを実行するように記述して、ESLintからPrettierを動かす

参考

ESLint と Prettier の共存設定とその根拠について

ESLintとPrettierを併用するときの設定(eslint-plugin-prettier, eslint-config-prettier) - dackdive's blog

②ESLintとPrettierをそれぞれ別に動かす

これは結局やってないからまだちゃんとはわかってないけど…ESLintはまあ通常通りで、Prettierは①で入れた2つのプラグイン両方を入れないで、eslint-config-prettierのみ入れてESLintとPrettierを別々に実行する方法。

参考記事にも書いてあるが、たしかにPrettierの公式ドキュメントとしては①の方法はgenerally not recommendedだと言っている。

Prettierはnpm scriptsから実行する、ということらしい。Prettierを使って保存時にソースコードを自動で整形してもらう

たしかにwatchしてPrettier動かせば良い気はしている

参考

TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita

---

なんかいま書いてて②でも良い気がしてきたけれど、今回やってみたのは①なので①の方法について話す。

とりあえずインストール

$ yarn install --dev prettier eslint-plugin-prettier eslint-config-prettier

で、.eslintrc.jsonにextendsに"plugin:prettier/recommended"を追加

"extends": ["eslint:recommended", "plugin:prettier/recommended"],

（extendsとpluginとrulesにそれぞれ書く方法もあるが、これだけでも済む）

.vscode/settings.jsonに保存時ESLintを起動する設定を追加

{
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
  }
}

で、これで保存時にESLint経由でPrettierも動きます。

しかし、Prettierの設定は前述の通りデフォルトがセミコロンが末尾についたり、ESLintの設定にもしセミコロン許さない設定をしていたら衝突してしまうものがあります。

なので、あとは.prettierrcにESLintに合わせて設定を追加します。私の場合、ESLintとPrettierで衝突していたものに

"comma-dangle": ["error", "never"],
"quotes": ["error", "single"],
"semi": ["error", "never"]

があったので、これを回避するために.prettierrcに

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

と追加します。

これで、保存時にPrettierも動いて良い感じになってくれます。