這篇文章主要介紹了vscode+vue如何添加配置，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),姑蘇企業(yè)網(wǎng)站建設(shè),姑蘇品牌網(wǎng)站建設(shè),網(wǎng)站定制,姑蘇網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,姑蘇網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

vscode+vue怎么添加配置？

vscode+vue不得不用的插件和不得不添加的配置

先吐槽一下：第一次用vscode，真是心酸，要啥沒(méi)啥，代碼基本錯(cuò)誤檢測(cè)沒(méi)有也就算了，Html標(biāo)簽自動(dòng)補(bǔ)全也沒(méi)有（當(dāng)然，其實(shí)是有的，只是需要用戶自己配置），這些都不能在安裝或者初始化的時(shí)候一起裝了嗎，還非得要一個(gè)個(gè)百度然后找插件，心酸。。。

相關(guān)教程推薦：vscode教程

吐槽歸吐槽，會(huì)用谷歌百度就是大佬。

文件自動(dòng)保存設(shè)置

vscode的強(qiáng)大之一便是自動(dòng)編譯，無(wú)需刷新頁(yè)面，但自動(dòng)編譯是需要在文檔保存之后進(jìn)行的，如果懶得在編輯完成后狂按"Ctrl+S"的話就設(shè)置文檔自動(dòng)保存吧。

文件 -> 自動(dòng)保存

以上是快捷設(shè)置的地方，更詳細(xì)的設(shè)置在vscode設(shè)置里面，路徑如下：

文件 -> 選項(xiàng) -> 設(shè)置，還可以點(diǎn)擊右上角的 “{}” 圖標(biāo)打開(kāi)JSON編輯窗口。在這里還可以設(shè)置自動(dòng)保存的時(shí)機(jī)。

Html標(biāo)簽自動(dòng)補(bǔ)全

之前用其他編輯器（HBuilder、WS、VS等）在寫(xiě)html代碼時(shí)，輸入html標(biāo)簽前半部分會(huì)自動(dòng)補(bǔ)全后半部分，但是到了vscode就不行了，很是不適應(yīng)。

vscode自帶安裝的擴(kuò)展中，Emmet的一大作用就是補(bǔ)全代碼，需要手動(dòng)設(shè)置。

在設(shè)置中（兩個(gè)設(shè)置空間都要配置）添加如下配置代碼即可：

{
"emmet.triggerExpansionOnTab": true,
"files.associations": {
"*.js": "html",
"*.vue": "html"
}
}

高亮、語(yǔ)法插件

平時(shí)寫(xiě)的代碼經(jīng)常會(huì)遇到錯(cuò)誤，但是又不知道哪里錯(cuò)了，為什么錯(cuò)了，怎么修改等等，如下圖所示：

出現(xiàn)這類錯(cuò)誤，我們可以借助這些插件來(lái)輔助編碼， Vetur、ESLint和Prettier插件，安裝好這三個(gè)插件后進(jìn)行如下配置：

"editor.lineNumbers": "on", //打開(kāi)行號(hào)
  "editor.quickSuggestions": {
    //開(kāi)啟自動(dòng)顯示建議
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符號(hào)eslint
  "editor.formatOnSave": true, //保存時(shí)自動(dòng)格式化
  "eslint.autoFixOnSave": true, //保存時(shí)自動(dòng)將代碼按ESLint格式進(jìn)行修復(fù)
  "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
  "prettier.semi": false, //去掉代碼結(jié)尾的分號(hào)
  "prettier.singleQuote": true, //使用帶引號(hào)替代雙引號(hào)
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強(qiáng)制折行對(duì)齊
    }
  },
  "eslint.validate": [
    //開(kāi)啟對(duì).vue文件中錯(cuò)誤的檢查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

如此，使用vscode寫(xiě)vue便稍微順手一些了 。

下面貼出完整配置：

{
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay", //自動(dòng)保存
  "editor.lineNumbers": "on", //打開(kāi)行號(hào)
  "editor.quickSuggestions": {
    //開(kāi)啟自動(dòng)顯示建議
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符號(hào)eslint
  "editor.formatOnSave": true, //保存時(shí)自動(dòng)格式化
  "eslint.autoFixOnSave": true, //保存時(shí)自動(dòng)將代碼按ESLint格式進(jìn)行修復(fù)
  "prettier.eslintIntegration": true, //讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
  "prettier.semi": false, //去掉代碼結(jié)尾的分號(hào)
  "prettier.singleQuote": true, //使用帶引號(hào)替代雙引號(hào)
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強(qiáng)制折行對(duì)齊
    }
  },
  "eslint.validate": [
    //開(kāi)啟對(duì).vue文件中錯(cuò)誤的檢查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "emmet.triggerExpansionOnTab": true,
  "files.associations": { //要進(jìn)行html補(bǔ)全的文件
    "*.js": "html",
    "*.vue": "html"
  }
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vscode+vue如何添加配置”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：vscode+vue如何添加配置-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.rwnh.cn/article24/cejhje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、建站公司、做網(wǎng)站、商城網(wǎng)站、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)