本篇文章給大家整理一些vscode開發vue項目必裝的插件，希望對大家有所幫助！
之前使用webstorm開發項目，webstorm雖然好用，但是有兩個很大的缺陷：一是太卡了，三年前買的筆記本在打開一個項目，基本上每天都要重啟，打開三個項目直接卡死，二是付費的，雖然網上有破解版，但是每隔一段時間就會失效，太蛋疼。
因此，決定棄用它，改用輕量級同時也免費的vscode，全稱Visual Studio Code。經過我多天的摸索，vs code安裝了以下插件后，基本上已經達到了和webstorm一樣的效果甚至比它更好的體驗，從此，再也不用擔心卡頓和失效的問題了。【推薦學習：《vscode》】
插件安裝與說明
1. Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code
作用：中文版的VS Code
立即學習“前端免費學習筆記（深入）”；
安裝步驟：
說明：安裝任何一個插件，第123步都一樣，絕大多數插件也只有第123步，此插件多了第4步，需尤其注意。
2. Vue Language Features (Volar)
作用：默認的vue文件在vs code里全部是一樣的文字，且不能點擊。該插件讓vue文件的內容有了顏色區分，同時支持點擊相對路徑文件的跳轉，class名的樣式定位（前提是這個class名和樣式必須在同一個文件里）
3. vue-helper
作用：在template中點擊vue組件，vue變量，vue方法時都可定位到對應的文件或位置，在點擊vue組件時跳轉到對應文件的前提是該組件是安裝相對路徑引入（即不支持別名引入），且組件名與組件的文件名一樣。比如組件文件名是select.vue,而引入組件時卻是,這種情況不能點擊，需把組件文件名改成common-select.vue
4. vue peek
作用：在template中點擊vue組件時可跳轉到對應的文件，可以支持別名引入的vue組件。比如支持該引入方式： import commonSelect from ‘@/components/common-select’; 彌補了插件3的不足。
5. css peek
作用：支持跨文件方式的class名跳轉，即class名和它的樣式不在同一個文件里，彌補了插件2的不足。
6. 別名路徑跳轉
作用：支持別名文件引入方式的調整，彌補插件2的不足（未使用別名的項目無需裝它）
7. Auto Rename Tag
作用：自動重命名標簽，即修改開始標簽，結束標簽也會自動修改
8. Code Spell Checker
作用：單詞拼寫檢查，拼寫不對的單詞會有波浪線提醒
9. GitLens — Git supercharged
作用：鼠光標停留在任何一行代碼時，都出出現該行代碼的git修改信息，可以有效避免代碼出問題時背鍋
10. Git Graph
作用：安裝完成后，左下角會出現一個Git Graph的按鈕，點擊可看到所有git commit的詳細信息及每次commit的代碼的改動明顯
11. Prettier – Code formatter
作用：文件格式化，可配置保存文件時，格式化該文件
步驟：安裝完該插件后，找到setting.json
把以下代碼復制進去，前兩行是該插件必須要用到的，最后兩個分別是插件12和插件13所需要的，如果你不裝插件12和13，可以刪除最后兩行
{ "editor.formatOnSave": true, // 保存時是否格式化 "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件 "editor.tabSize": 2, // tab健空格 "editor.fontSize": 14, // 字體大小 "workbench.iconTheme": "vscode-great-icons", "workbench.colorTheme": "One Dark Pro" }
如果還要配置其他的規則，可以在項目的根目錄下新建一個.prettierrc文件，把以下代碼復制進去，每行的含義分別為：1.單引號，2.對象最后一個元素不要逗號，3.箭頭函數只有一個參數時不要括號，4.超過100個字符換行。
{ "singleQuote": true, "trailingComma": "none", "arrowParens": "avoid", "printWidth": 100 }
12. VSCode Great Icons
作用：使得項目結構前面有對應圖標，看起來更美觀（非必需）
13. One Dark Pro
作用：vs code的皮膚，讓界面更美觀（非必需）
14. Markdown Preview Enhanced
作用：通常每個項目里面都有README.md文件，安裝它后，每個md文件都可以點擊右鍵預覽效果
15. koroFileHeader
作用：主要用于文件頭部注釋和函數注釋，即按下快捷鍵自動生成你所配置的注釋，如果無配置，則生成插件默認的注釋。
文件頭部注釋快捷鍵 window：ctrl+win+i，mac：ctrl+cmd+i
函數注釋快捷鍵 window：ctrl+win+t,mac：ctrl+cmd+t，需先將光標放在函數行再按快捷鍵。
配置文檔：https://github.com/OBKoro1/koro1FileHeader/wiki/安裝和快速上手
更多關于VSCode的相關知識，請訪問：vscode！
