vscode下的vue文件格式化問(wèn)題
我相信基本上每一個(gè)在vscode上面碼Vue代碼的都會(huì)下載Vetur插件用來(lái)格式化等操作，今天Vetur更新了 0.14.2 版本，最近在使用的時(shí)候，感覺(jué)格式化總是出問(wèn)題，去Vetur上面看了下，發(fā)現(xiàn)Vetur的配置做了下面的改動(dòng)，看到幾個(gè)社區(qū)都沒(méi)有人說(shuō)明，我就先說(shuō)下，默認(rèn)的格式化配置是：
{
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
}
不需要修改的話就不管他，我的建議是跟著使用默認(rèn)的格式化工具就行
默認(rèn)的html格式化工具變?yōu)閜rettyhtml
下面是原來(lái)使用js-beautify-html格式化的配置，現(xiàn)在官方已經(jīng)不推薦了，我準(zhǔn)備跟著變?yōu)閜rettyhtml
原來(lái)的：
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 160,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
新的配置：
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
// 單行超過(guò)160個(gè)長(zhǎng)度的時(shí)候開(kāi)始換行顯示各種參數(shù)和事件
"printWidth": 160
}
},
關(guān)于prettier的設(shè)置規(guī)則改變
1.項(xiàng)目的根目錄不能有 .prettierrc 、 .prettierrc.js 等配置文件，否則會(huì)覆蓋掉vscode上面的配置
2.新的配置項(xiàng)寫(xiě)法變化： 原來(lái)只能設(shè)置全局js的配置的：
"prettier.singleQuote": true, "prettier.disableLanguages": [ "vue" ]
可以設(shè)置vue文件里面的，和js文件不沖突：
// js文件
"prettier.singleQuote": true,
"prettier.disableLanguages": [ "vue" ]，
// vue文件里面的js
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"proseWrap": "never",
"printWidth": 130
}
},
和html的格式化寫(xiě)在一起就是：
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 160
},
"prettier": {
"singleQuote": true,
"proseWrap": "never",
"printWidth": 130
}
},
總結(jié)
以上所述是小編給大家介紹的vscode下的vue文件格式化問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件
這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
在Vue中，組件是構(gòu)建頁(yè)面的基本單位。通過(guò)組件化開(kāi)發(fā)，可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊(cè)方法包括全局注冊(cè)和局部注冊(cè)兩種方式。同時(shí)，需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問(wèn)題，以實(shí)現(xiàn)更好的組件復(fù)用和開(kāi)發(fā)效率2023-05-05
Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue3動(dòng)態(tài)路由刷新后空白或者404問(wèn)題的解決
在vue項(xiàng)目中采用動(dòng)態(tài)添加路由的方式,第一次進(jìn)入頁(yè)面會(huì)正常顯示,但是點(diǎn)擊刷新頁(yè)面后會(huì)導(dǎo)致頁(yè)面空白,所以下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)路由刷新后空白或者404問(wèn)題的解決方法,需要的朋友可以參考下2022-07-07
這篇文章主要帶大家從源碼分析一下Vue3中的組件掛載的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編一起了解一下2023-09-09
Vue項(xiàng)目配置跨域訪問(wèn)和代理proxy設(shè)置方式
這篇文章主要介紹了Vue項(xiàng)目配置跨域訪問(wèn)和代理proxy設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對(duì)象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下2023-04-04
Vue element-admin權(quán)限控制之按鈕使用
這篇文章主要介紹了Vue element-admin權(quán)限控制之按鈕使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue實(shí)現(xiàn)移動(dòng)端input上傳視頻、音頻
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端input上傳視頻、音頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08