一句話總結

不同格式化程序執行時長不一樣，導致文件格式好后和預期不符。

請務必保持校驗（Lint）規則和格式化（Format）規則一致，不然格式化后還是不符合預期是非常討厭的。

本篇主要講解怎么調教VSCode的保存時格式化程序。

適用人員

本文用于解決各類格式化沖突問題，如何使用 vscode自帶格式化/ESLint/TSLint/Prettier 不在本文討論范圍之內。

看完本文你將收獲：

為什么格式化后依然報錯？

為什么有時候會格式化兩次？

現狀

多數VSCode使用者安裝了沖突的格式化插件，但卻不知道如何設置。

一個編輯器里對某個類型的文件有多個Formatter（格式化執行者），是一定會打架的。

常見格式程序執行時長（自測）：

prettier > default > eslint

意味著 通常情況下 prettier 最后執行完畢。代碼樣式就由prettier決定了（所以其他程序格式化好后，再prettier格式化可能會閃爍）。

格式化的類型及設置

Shift + Option + F ： 手動執行格式化程序。

不同平臺執行快捷鍵不一，見：

How do you format code in Visual Studio Code (VSCode)?stackoverflow.com

若有多個格式化程序，可能會讓你選用哪個進行格式化。

Save時格式化

下面的json型設置需要寫到setting.json里，詳情請看：

Visual Studio Code User and Workspace Settings?code.visualstudio.com// 保存時使用VSCode 自身格式化程序格式化 "editor.formatOnSave": true, // 保存時用eslint格式化 "editor.codeActionsOnSave": {"source.fixAll.eslint": true ｝ // 兩者會在格式化js時沖突，所以需要關閉默認js格式化程序 "javascript.format.enable": false

有哪些格式化程序和插件？

一、VSCode自帶格式化程序

以js為例

// 代表默認格式js程序是否開啟，默認開啟。用eslint格式化js時需要設置為false // 既然用ESLint進行格式校驗，一定也用ESLint來格式化是最能匹配的 "javascript.format.enable": true

只有一些普適型的格式化規則，夠正常適用。

無任何其他格式化插件時執行此格式化程序。

二、ESlint

按照eslint的規則進行格式化，格式化之后eslint還報錯不是eslint的原因，是后面又有其他格式化程序格式化成了其他格式。

eslint.validate 無須設置，基本沒有意義。

eslint-plugin-vue 可以管到vue文件的html部分。

三、vetur

VSCode 商店里的 Vue 插件。用于在 Vue 單文件中展示不同語言，有格式化、展示、高亮等能力。

安裝即默認開啟格式化。

// 關閉vetur內的js格式化程序 "vetur.format.defaultFormatter.js": "none",

vetur 內置了 prettier 和 eslint 的能力。實測prettier的執行慢于eslint。所以會出現Vue文件中js格式化后eslint還報錯的情況。

prettier: For css/scss/less/js/ts. prettier-eslint: For js. Run prettier and eslint --fix. prettyhtml: For html. stylus-supremacy: For stylus. vscode-typescript: For js/ts. The same js/ts formatter for VS Code.

四、prettier

格式化界的鋼鐵直男，他有一套自己的格式化規則。

安裝即默認開啟保存格式化，手動格式化也會觸發prettier。 例如若安裝了 prettier，vscode 里的所有右下角有 prettier 的均有 prettier 托管格式化，默認程序似乎就不起作用了。

即使不安裝 vetur，prettier 也會格式化 vue 文件

總結

格式化由 VSCode 執行，但可能執行者可能是很多種，這是導致格式化‘不好用’的根源所在。

VSCode 本身有個格式化程序

eslint 可以執行格式化 js

prettier 可以執行格式化 js html css 等

vetur 可以執行格式化 vue 單文件中的各類語言

例如： pretter里的indent 縮進默認為 2，可通過"prettier.tabWidth": 4 修改

VSCode如何判斷應該使用哪種格式化工具？

文件后綴識別。
不同的文件在 VSCode 里被識別成不同的語言格式，展示在編輯器下方的狀態欄里，這非常關鍵。

所以vue文件通常會被vetur格式化而不是其他的。

prettier 和 eslint 同時格式化

prettier 和 eslint 的 "source.fixAll.eslint": true 若同時存在，會格式化兩次（能肉眼可見），最后會以 prettier 的為準。

prettier-eslint

未嘗試過，不敢妄斷。

按照官方文檔是用eslint的規則進行格式化。 使用prettier的格式化能力，使用eslint的格式化規則（eslint的格式化有時候不好用）。

推薦設置

本人設置，僅供參考

以下配置切勿照搬，需要理解原理。如果你有eslint的格式化項目也有tslint的格式化項目，需要對每個項目進行特殊配置。

插件安裝

dbaeumer.vscode-eslint（用于eslint報錯和格式化）

octref.vetur（用于vue文件識別）

mikebovenlander.formate（vscode沒有自動格式化css的程序，用于格式化css和less等）

// 以下程序用于格式化Vue項目，其他項目可以根據原理一通百通。// 設置保存時格式化。只用于用于格式化css/less程序"editor.formatOnSave": true,// 關閉js/ts的默認format,統一用eslint進行格式化（tslint已經不維護了，所以轉eslint吧）"javascript.format.enable": false,"typescript.format.enable": false,// 關閉vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。// js/ts程序用eslint，防止vetur中的prettier與eslint格式化沖突"vetur.format.defaultFormatter.html": "none","vetur.format.defaultFormatter.js": "none","vetur.format.defaultFormatter.ts": "none",// 開啟eslint自動修復js/ts功能"editor.codeActionsOnSave": {"source.fixAll.eslint": true},

說明：在開啟了VSCode的默認格式化程序后，Vetur對Vue文件進行識別，格式化時采用prettier格式化Less等類型。但由于關閉了js/ts/html的格式化，所以只用Vetur和Vscode配合格式化CSS程序，TS/JS由ESLint格式化，template由eslint-plugin-vue格式化。

設置后的文件執行的格式化程序

html。相當于利用默認格式化程序

JS/TS。用eslint的save format即可。但是需要刪掉默認的vscode的設置

純css/less文件。VSCode沒有格式化樣式的格式化程序，可以用插件 mikebovenlander.formate進行格式化

vue 文件。關閉vetur部分formatter。 js 直接使用eslint和eslint-plugin-vue格式化 。less使用其自帶的prettier格式化 。html使用 eslint-plugin-vue 格式化。

若幫到了你，請點贊 哦～

本文涉及的語言

JavaScript Less Typescript Vue HTML 等

英文關鍵字

Prettier not working in VSCode

Eslint format not working in VSCode

Vetur format not working in VSCode

總結

以上是生活随笔為你收集整理的vscode html 格式化_详解VSCode 格式化不符合预期的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。