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

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 
}