VSCodeでESLint/Prettierを競合させたせいでVueのフォーマットができなかったのを直した

作成日時
2022/8/16 17:50
大タグ
技術
タグ
VSCode
Vue.js
ESLint
Prettier
TL; DR
eslint-plugin-vueのフォーマット関連のルールは有効化するな、Prettierのルールでカバーできる

発生していたこと

VSCodeで保存時にフォーマットがかかる設定にしていたところ、正しくフォーマットされたあとに意図しないフォーマットが上書きされてしまっていた。
どうやら、ESLintによるフォーマットのあとにPrettierによるフォーマットが走っている模様。

原因

  • eslint-plugin-vueのルールのうち、フォーマットに関わるものを独自に指定していた
  • 指定していたものがPrettierのデフォルトと食い違っていた

対処

  • .eslintrc.cjsから当該ルールの指定を除去
  • .prettierrc.cjsでそれらに対応するルールを有効化