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

創(chuàng)新互聯(lián)建站成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:13518219792

1.安裝插件

vscode安裝以下插件：

• eslint

• Vetur

• Prettier - Code formatter

2.vue文件保存時(shí)格式化

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

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

{

"editor.suggestSelection": "first",

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

"explorer.confirmDelete": false,

"editor.tabSize": 2,

"files.autoSave": "onFocusChange",

"editor.fontSize": 14, // 設(shè)置字體

"editor.tabCompletion": "on", // 用來在出現(xiàn)推薦值時(shí)，按下Tab鍵是否自動(dòng)填入最佳推薦值

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true,

"source.organizeImports": true // 這個(gè)屬性能夠在保存時(shí)，自動(dòng)調(diào)整 import 語(yǔ)句相關(guān)順序，能夠讓你的 import 語(yǔ)句按照字母順序進(jìn)行排列

},

"editor.formatOnSave": true,

// #讓vue中的js按"prettier"格式進(jìn)行格式化

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

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

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

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

"wrap_attributes": "auto", //也可以設(shè)置為“auto”，效果會(huì)不一樣

"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，然后右鍵目錄選擇 開始格式化文件即可。

關(guān)于“vscode中vue文件保存時(shí)如何自動(dòng)格式化”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。