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