vscode+vue如何添加配置

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

vscode+vue怎么添加配置？

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

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

相關教程推薦：vscode教程

吐槽歸吐槽，會用谷歌百度就是大佬。

文件自動保存設置

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

文件 -> 自動保存

以上是快捷設置的地方，更詳細的設置在vscode設置里面，路徑如下：

文件 -> 首選項 -> 設置，還可以點擊右上角的 “{}” 圖標打開JSON編輯窗口。在這里還可以設置自動保存的時機。

Html標簽自動補全

之前用其他編輯器（HBuilder、WS、VS等）在寫html代碼時，輸入html標簽前半部分會自動補全后半部分，但是到了vscode就不行了，很是不適應。

vscode自帶安裝的擴展中，Emmet的一大作用就是補全代碼，需要手動設置。

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

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

高亮、語法插件

平時寫的代碼經常會遇到錯誤，但是又不知道哪里錯了，為什么錯了，怎么修改等等，如下圖所示：

出現這類錯誤，我們可以借助這些插件來輔助編碼， Vetur、ESLint和Prettier插件，安裝好這三個插件后進行如下配置：

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

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

下面貼出完整配置：

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vscode+vue如何添加配置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!