解決vscode進行vue格式化,會自動補分號和雙引號的問題
在使用vscode開發(fā)vue項目時，嚴格檢查讓人有點煩惱，必然需要一款可以自動格式化的插件進行快速嚴格檢查的格式化。vscode插件會推薦使用 vetur 插件才會進行vue文件的識別與高亮。
安裝完 vetur 后確實是可以對 vue文件進行高亮顯示了，但是當(dāng)你按下 shift+alt+f 進行格式化時，發(fā)現(xiàn)本來沒有錯誤的代碼卻變成了一堆錯誤，莫名加上了分號，單引號也成功變成雙引號了。在vue的嚴格檢查中這些是最煩的。
那么需要對vscode的配置文件進行配置才可支持vue正確格式化。
打開 文件 -》首選項 -》往下拉找到 settings.json -》打開
默認的 settings.json 配置項可能不一樣，現(xiàn)在只需要往json中寫入以下配置就可格式化vue啦。
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
}
可能會出現(xiàn) 分號和雙引號確實不會再自動添加了，但是不會在方法括號之間插入空格，可以再加入這條配置即可。
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript"
最好再配置下vscode支持vue語言
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
]
補充知識：vscode格式化Vue出現(xiàn)的問題：單引號變雙引號
問題描述
在使用vscode格式化vue代碼時，出現(xiàn)單引號變成了雙引號問題
解決方案
在項目根目錄下新建文件：.prettierrc.json
內(nèi)容：
{
"singleQuote":true,
"semi":false
}
以上這篇解決vscode進行vue格式化,會自動補分號和雙引號的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue3的響應(yīng)式原理解析，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
關(guān)于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了一款不用跑項目的vscode組件所見即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了Vue項目啟動后如何在瀏覽器自動打開問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果
這篇文章主要介紹了使用element-ui table expand展開行實現(xiàn)手風(fēng)琴效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關(guān)知識感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要為大家詳細介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章給大家分享了vue移動端路由切換實例以及相關(guān)知識點，對此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
這篇文章主要給大家介紹了關(guān)于Vue如何啟動項目的相關(guān)資料,還介紹了解決vue啟動項目時間很長問題的相關(guān)方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02