vscode中vue文件保存時如何自動格式化

這篇文章將為大家詳細講解有關vscode中vue文件保存時如何自動格式化，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1.安裝插件

vscode安裝以下插件：

• eslint

• Vetur

• Prettier - Code formatter

2.vue文件保存時格式化

按住·commond+shift+p·，搜索 perferences open setting(json)。

在配置文件中添加以下內容，注意不要直接所有拷貝進去，可能會覆蓋到你自己的配置。建議拷貝進去然后去除重復的key即可。

{

"editor.suggestSelection": "first",

"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

"explorer.confirmDelete": false,

"editor.tabSize": 2,

"files.autoSave": "onFocusChange",

"editor.fontSize": 14, // 設置字體

"editor.tabCompletion": "on", // 用來在出現推薦值時，按下Tab鍵是否自動填入最佳推薦值

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true,

"source.organizeImports": true // 這個屬性能夠在保存時，自動調整 import 語句相關順序，能夠讓你的 import 語句按照字母順序進行排列

},

"editor.formatOnSave": true,

// #讓vue中的js按"prettier"格式進行格式化

"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.format.defaultFormatter.js":"prettier-eslint",

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// #vue組件中html代碼格式化樣式

"wrap_attributes": "auto", //也可以設置為“auto”，效果會不一樣

"wrap_line_length": 200,

"end_with_newline": false,

"semi": false,

"singleQuote": true

},

"prettier": {

"semi": false,

"singleQuote": true,

"editor.tabSize": 2

},

"prettyhtml": {

"printWidth": 160,

"singleQuote": false,

"wrapAttributes": false,

"sortAttributes": false

}

},

"[vue]": {

"editor.defaultFormatter": "octref.vetur"

},

"bracketPairColorizer.depreciation-notice": false,

"editor.mouseWheelZoom": true

}

問題記錄

格式化目錄下所有文件

下載插件Start Format Files，然后右鍵目錄選擇 開始格式化文件即可。

關于“vscode中vue文件保存時如何自動格式化”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。