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

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

vscode+vue怎么添加配置？

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

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

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

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

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

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

文件 -> 自動保存

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

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

Html標簽自動補全

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

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

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

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

高亮、語法插件

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

出現(xiàn)這類錯誤，我們可以借助這些插件來輔助編碼， 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, //去掉代碼結(jié)尾的分號
  "prettier.singleQuote": true, //使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(shù)(名)和后面的括號之間加個空格
  "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, //去掉代碼結(jié)尾的分號
  "prettier.singleQuote": true, //使用帶引號替代雙引號
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(shù)(名)和后面的括號之間加個空格
  "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如何添加配置”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學習!

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

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

廣告

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