5月9日 · 306 人閱讀

visual studio code 配置vue開發環境

• 前端

• visual-studio-code

• vue-cli

• 插件

重裝了用了3年的操作系統，配置前端開發環境時一些開發工具配置丟失了，這里做下記錄，我精簡了一遍插件，確保都用得上，且功能不重疊。愛掏網 - it200.com

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

一、插件

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

Vetur

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

Eslint

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

[圖片上傳失敗...(image-54630e-1528709488786)]
它會自動在你的項目根目錄下生成.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.代碼錯誤實時提示

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

[圖片上傳失敗...(image-6048ce-1528709488785)]

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

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

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

在配置里加入下面的json:

"eslint.autoFixOnSave": true,

3.格式化寫的代碼

在vue文件里，按下鼠標右鍵，在菜單里你會發現有個格式化文件按鈕，我們點擊它，你會發現，本來圖A好好的代碼格式化后變成了圖B，由于不符合standard的規范，就報錯了：
圖A：
[圖片上傳失敗...(image-9440d7-1528709488784)]

圖B：
[圖片上傳失敗...(image-9afa99-1528709488784)]

格式化后多幫我們加了分號，還把單引號變成了雙引號。愛掏網 - it200.com
這是由于vetur插件默認格式化vue文件里面的js代碼使用的prettier,和我們的standard規范有沖突，你可以點擊這里查看vetur插件格式化的默認配置

既然知道了原因，我們可以覆蓋它的默認配置：

"vetur.format.defaultFormatter.js": "vscode-typescript",

再試一次格式化，發現問題解決了，不過還是報錯：

[圖片上傳失敗...(image-5562e8-1528709488784)]
鼠標懸浮上去提示告訴我們，定義函數時，函數名要與后面的括號有一個空格，所以我們繼續加配置解決問題：

"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個插件，幾行配置就搞定了，更重要的是，你能知道每個插件、每行配置都干了什么事情，解決了什么問題，而不是裝了一堆不知道作用的插件，配置了一堆自己也看不懂的配置。愛掏網 - it200.com
這里匯總下上面的配置:

    "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,

vscode-icons 美化左邊資源管理器里項目文件的圖標，每一種文件后綴都對應一個圖標，很直觀明了
vscode-background 設置代碼的背景（找張喜歡的小姐姐作為背景），腐宅必備
Path Autocomplete 代碼引用其他資源（比如圖片）寫相對路徑時，會有提示