VSCode でファイル保存時に1 回でフォーマットしきらないときの対処法

はじめに

ESLint が入っているプロジェクトに Prettier を導入し、VSCode でいい感じに JavaScript などのファイルを自動フォーマットをかけようとしたときにつまづいた話です。

Prettier と ESLint を連携させる方法にはいくつかありますが、自分の場合は以下の 2 つを使っていました。

• eslint-plugin-prettier : ESLint の中で Prettier も動かしてくれる
• eslint-config-prettier : ESLint のルールの中で Prettier と競合するものを無効化してくれる

そして、ESLint の拡張を使って、VSCode の設定で "eslint.autoFixOnSave": true をすることで、ファイル保存時に自動でフォーマットをかける目論見でした。

しかし、実際には 1 度ファイルを保存しただけではフォーマットしきれず、複数回保存しないと求める形に整形しきらないという問題が起きました。

いくつか GitHub の Issue でも似たような事例が報告されていました。

ちなみに CLI から eslint --fix を叩いたときには 1 回でできていたので謎です。

うまくいっていなかった時の設定がこちら ↓

// eslintrc.js
module.exports = {
  extends: ['plugin:prettier/recommended']
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

extends: ['plugin:prettier/recommended'] とすることで、eslint-plugin-prettier と eslint-config-prettier を同時に設定できるようです。

// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true
}

ESLint の eslint-config-prettier で Prettier も動かすため、formatOnSave は false に autoFixOnSave は true で保存時にフォーマットします。

うまくいかなかったけど。

対処法

Prettier を ESLint から動かさず、別々に動かすと上手く 1 度でフォーマットされるようになりました。

具体的には、eslint-config-prettier で Prettier と競合する ESLint のルールは無効にしつつ、 eslint-plugin-prettier の使用をやめることで、Prettier を ESLint から動かすのをやめました。

あとは、VSCode の設定を以下のようにします。

• "editor.formatOnSave": true　で Prettier を拡張経由で動かします。
• "eslint.autoFixOnSave": true　で ESLint を拡張経由で動かします。

これでファイル保存したときに Prettier でフォーマットすると同時に ESLint でのフォーマットすることができました。

最終的な設定はこちら ↓

// eslintrc.js
module.exports = {
  extends: ['prettier']
}

Prettier の plugin を使わないようにした

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true
}

どなたかの参考になれば幸いです。