vscode+vue如何添加配置

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

vscode+vue怎么添加配置？

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

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

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

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

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

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

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

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

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

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

之前用其他編輯器（HBuilder、WS、VS等）在寫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"
}
}

高亮、語法插件

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

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

"editor.lineNumbers": "on", //打開行號(hào)
  "editor.quickSuggestions": {
    //開啟自動(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": [
    //開啟對(duì).vue文件中錯(cuò)誤的檢查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

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

下面貼出完整配置：

{
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay", //自動(dòng)保存
  "editor.lineNumbers": "on", //打開行號(hào)
  "editor.quickSuggestions": {
    //開啟自動(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": [
    //開啟對(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í)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!