本篇文章給大家整理一些VSCode開發(fā)vue項目必裝的插件，希望對大家有所幫助！

如何快速入門VUE3.0：進入學習

之前使用webstorm開發(fā)項目，webstorm雖然好用，但是有兩個很大的缺陷：一是太卡了，三年前買的筆記本在打開一個項目，基本上每天都要重啟，打開三個項目直接卡死，二是付費的，雖然網(wǎng)上有破解版，但是每隔一段時間就會失效，太蛋疼。

因此，決定棄用它，改用輕量級同時也免費的vscode，全稱Visual Studio Code。經(jīng)過我多天的摸索，vs code安裝了以下插件后，基本上已經(jīng)達到了和webstorm一樣的效果甚至比它更好的體驗，從此，再也不用擔心卡頓和失效的問題了?！就扑]學習：《vscode入門教程》】

插件安裝與說明

1. Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code

作用：中文版的VS Code

安裝步驟：

說明：安裝任何一個插件，第123步都一樣，絕大多數(shù)插件也只有第123步，此插件多了第4步，需尤其注意。

2. Vue Language Features (Volar)

作用：默認的vue文件在vs code里全部是一樣的文字，且不能點擊。該插件讓vue文件的內(nèi)容有了顏色區(qū)分，同時支持點擊相對路徑文件的跳轉(zhuǎn)，class名的樣式定位（前提是這個class名和樣式必須在同一個文件里）

3. vue-helper

作用：在template中點擊vue組件，vue變量，vue方法時都可定位到對應的文件或位置，在點擊vue組件時跳轉(zhuǎn)到對應文件的前提是該組件是安裝相對路徑引入（即不支持別名引入），且組件名與組件的文件名一樣。比如組件文件名是select.vue,而引入組件時卻是,這種情況不能點擊，需把組件文件名改成common-select.vue

4. vue peek

作用：在template中點擊vue組件時可跳轉(zhuǎn)到對應的文件，可以支持別名引入的vue組件。比如支持該引入方式： import commonSelect from '@/components/common-select'; 彌補了插件3的不足。

5. css peek

作用：支持跨文件方式的class名跳轉(zhuǎn)，即class名和它的樣式不在同一個文件里，彌補了插件2的不足。

6. 別名路徑跳轉(zhuǎn)

作用：支持別名文件引入方式的調(diào)整，彌補插件2的不足（未使用別名的項目無需裝它）

7. Auto Rename Tag

作用：自動重命名標簽，即修改開始標簽，結(jié)束標簽也會自動修改

8. Code Spell Checker

作用：單詞拼寫檢查，拼寫不對的單詞會有波浪線提醒

9. GitLens — Git supercharged

作用：鼠光標停留在任何一行代碼時，都出出現(xiàn)該行代碼的git修改信息，可以有效避免代碼出問題時背鍋

10. Git Graph

作用：安裝完成后，左下角會出現(xiàn)一個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" }

如果還要配置其他的規(guī)則，可以在項目的根目錄下新建一個.prettierrc文件，把以下代碼復制進去，每行的含義分別為：1.單引號，2.對象最后一個元素不要逗號，3.箭頭函數(shù)只有一個參數(shù)時不要括號，4.超過100個字符換行。

{   "singleQuote": true,   "trailingComma": "none",   "arrowParens": "avoid",   "printWidth": 100 }

12. VSCode Great Icons

作用：使得項目結(jié)構前面有對應圖標，看起來更美觀（非必需）

13. One Dark Pro

作用：vs code的皮膚，讓界面更美觀（非必需）

14. Markdown Preview Enhanced

作用：通常每個項目里面都有README.md文件，安裝它后，每個md文件都可以點擊右鍵預覽效果

15. koroFileHeader

作用：主要用于文件頭部注釋和函數(shù)注釋，即按下快捷鍵自動生成你所配置的注釋，如果無配置，則生成插件默認的注釋。

文件頭部注釋快捷鍵 window：ctrl+win+i，mac：ctrl+cmd+i

函數(shù)注釋快捷鍵 window：ctrl+win+t,mac：ctrl+cmd+t，需先將光標放在函數(shù)行再按快捷鍵。

配置文檔：https://github.com/OBKoro1/koro1FileHeader/wiki/安裝和快速上手