vscode進(jìn)行vue格式化時(shí)會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的解決方法

這篇文章運(yùn)用簡單易懂的例子給大家介紹vscode進(jìn)行vue格式化時(shí)會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的解決方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

在使用vscode開發(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)本來沒有錯(cuò)誤的代碼卻變成了一堆錯(cuò)誤，莫名加上了分號(hào)，單引號(hào)也成功變成雙引號(hào)了。在vue的嚴(yán)格檢查中這些是最煩的。

那么需要對(duì)vscode的配置文件進(jìn)行配置才可支持vue正確格式化。

打開 文件 -》首選項(xiàng) -》往下拉找到 settings.json -》打開

默認(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語言

"eslint.validate": [
 "javascript",
 "javascriptreact",
 "html",
  {
   "language": "vue",
   "autoFix": true
  }
]

補(bǔ)充知識(shí)：vscode格式化Vue出現(xiàn)的問題：單引號(hào)變雙引號(hào)

問題描述

在使用vscode格式化vue代碼時(shí)，出現(xiàn)單引號(hào)變成了雙引號(hào)問題

解決方案

在項(xiàng)目根目錄下新建文件：.prettierrc.json

內(nèi)容：

{
  "singleQuote":true,
  "semi":false
}

關(guān)于vscode進(jìn)行vue格式化時(shí)會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的解決方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。