vscode----配置vue開發環境

轉載：

https://segmentfault.com/a/1190000014785115

1.Vetur

用vue開發的必裝

作用：高亮.vue文件，附帶有格式化功能，配合Eslint插件對代碼進行格式化檢查

2.Eslint

如果你想你（團隊）的代碼風格所有地方看起來都像是同一個人寫的

作用：檢查你的js、html、css代碼，確保它們符合規范，並且代碼風格保持一致性，強制性的規則，你少寫一個空格或者多敲一個回車都會被嚴格的指出來，

使用：想讓插件生效，你的項目還得做一番復雜的配置，好在vue-cli生成的項目幫我們把配置都生成好了，
　　　　你也不必修改什么規則，直接用就行，在使用vue-cli生成webpack項目時會詢問你是否啟用eslint並且使用哪套規范，選擇Standard規范就行:

　　它會自動在你的項目根目錄下生成.eslintignore和.eslintrc.js兩個配置文件，package.json文件里增加下面的依賴：

 

    "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0",

正文

本文針對的開發工具是vscode, 配合vue-cli創建的項目，告訴你安裝什么插件，每個插件的作用，每行配置代碼的作用

一、插件

網上搜索vscode插件的文章，動輒十幾個，其實根本用不了那么多，很多插件的作用還有重疊，電腦性能還被白白浪費。這里精簡為主，每一個插件都發揮它最大的作用，並盡量說明它們的作用

Vetur

用vue開發的必裝，官方推薦,別糾結用哪個，就它了。
作用：高亮.vue文件，附帶有格式化功能，配合Eslint插件對代碼進行格式化檢查

 

Eslint

如果你想你（團隊）的代碼風格所有地方看起來都像是同一個人寫的，就靠它咯
作用：檢查你的js、html、css代碼，確保它們符合規范，並且代碼風格保持一致性，強制性的規則，你少寫一個空格或者多敲一個回車都會被嚴格的指出來，強迫症的福音，第一次用它的同學可能會抓狂，熟悉后你會感謝它
使用：想讓插件生效，你的項目還得做一番復雜的配置，好在vue-cli生成的項目幫我們把配置都生成好了，你也不必修改什么規則，直接用就行，在使用vue-cli生成webpack項目時會詢問你是否啟用eslint並且使用哪套規范，選擇Standard規范就行:

它會自動在你的項目根目錄下生成.eslintignore和.eslintrc.js兩個配置文件，package.json文件里增加下面的依賴：

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
ps:對於我這種從前寫Java的人來說，剛開始也是無法接受這種tab鍵2個空格、不加分號的Standard風格，不過一周以后再看原先的Java代碼反倒不習慣了

 

二、配置

其實裝好上面幾個插件你已經可以滿足最基本的開發需求了，但現在還沒有加任何配置，我們來配置下滿足些額外的需求

1.代碼錯誤實時提示

少寫了一個空格，或者多寫了一個分號，都能馬上以醒目的波浪線提示出來，鼠標懸浮上去還有錯誤提示，雙擊波浪線的代碼還會出現一個小燈泡，點擊燈泡可以自動幫你修正代碼格式：

我們可以找到編輯器左上角，依次打開 文件、 首選項、 設置，將i面配置加入到右邊的用戶設置中：

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

 

2.ctrl+s保存時自動修正格式錯誤的js代碼

在配置里加入下面的json:

"eslint.autoFixOnSave": true,

 

3.格式化寫的代碼

在vue文件里，按下鼠標右鍵，在菜單里你會發現有個格式化文件按鈕，我們點擊它，你會發現，本來圖A好好的代碼格式化后變成了圖B，由於不符合standard的規范，就報錯了：

格式化后多幫我們加了分號，還把單引號變成了雙引號。
這是由於vetur插件默認格式化vue文件里面的js代碼使用的prettier,和我們的standard規范有沖突，你可以點擊這里查看vetur插件格式化的默認配置
既然知道了原因，我們可以覆蓋它的默認配置：

"vetur.format.defaultFormatter.js": "vscode-typescript",
再試一次格式化，發現問題解決了，不過還是報錯：

鼠標懸浮上去提示告訴我們，定義函數時，函數名要與后面的括號有一個空格，所以我們繼續加配置解決問題：

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
這次格式化vue文件終於沒有報錯啦

 

別急哈，問題還沒完：

請你仔細的觀察下整個vue文件格式化后的樣子，有沒有發現html模板代碼沒有被格式化？

因為vetur插件的默認格式化配置里，是沒有為html模板格式的，需要我們手動指定配置:

"vetur.format.defaultFormatter.html": "prettier",

4.保存時自動格式化

每次寫完代碼自己右鍵菜單格式化似乎有點麻煩，所以我們可以讓它更智能用電，ctrl+s一保存就立馬自動格式化:

"editor.formatOnSave": true,

 

其他與插件無關的配置

在vue文件，默認按tab會有4個空格的縮進，我們需要的是2個:

"editor.tabSize": 2,

 

小結

好啦，能滿足你基本寫代碼需求的插件和配置我講完了，不多，配合vue-cli項目真的很省事，2個插件，幾行配置就搞定了，更重要的是，你能知道每個插件、每行配置都干了什么事情，解決了什么問題，而不是裝了一堆不知道作用的插件，配置了一堆自己也看不懂的配置。
這里匯總下上面的配置:

 

  "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.formatOnSave": true,
    "editor.tabSize": 2,