VSCodeにおける自動フォーマットで整形が崩れる問題への対処法

はじめに

最近、AtomからVSCodeに乗り換え中で、その時の記録です。

まず前提として、ESLintやTSLint、Prettierを使用してJavaScriptのコードをlinting、フォーマットするという状況下においての話です。

問題

VSCodeで自動フォーマットさせるために最初、以下のように設定を記述したところ、自動フォーマットで整形がうまくいかずに盛大に崩れました。

{
    "editor.formatOnSave": true,
    "prettier.eslintIntegration": true,
    "prettier.tslintIntegration": true
}

上記コードだとVSCodeのフォーマッタしか効かないため、整形がうまくいかずに崩れます。
そこで、"eslint.autoFixOnSave": true, "tslint.autoFixOnSave": trueを追加し、ファイルを保存して自動フォーマットしたところ、一回崩れて整形される（画面がチラつきます）という感じになります。
やはり"editor.formatOnSave": trueが原因のようです。

{
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true,
    "prettier.eslintIntegration": true,
    "prettier.tslintIntegration": true
}

解決策

ですので、以下でのように、"editor.formatOnSave": trueを削除（false）にすれば、ファイル保存時の自動フォーマットで綺麗に整形されました。
"editor.formatOnSave": trueと"eslint.autoFixOnSave": trueが衝突してはいけないということですね。

{
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true,
    "prettier.eslintIntegration": true,
    "prettier.tslintIntegration": true
}