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