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建立的項目，告訴你安裝什麼插件，每一個插件的做用，每行配置代碼的做用

1、插件

網上搜索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代碼反倒不習慣了

 

2、配置

其實裝好上面幾個插件你已經能夠知足最基本的開發需求了，但如今尚未加任何配置，咱們來配置下知足些額外的需求

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,