站長資訊網(wǎng)本篇文章給大家整理一些VSCode開發(fā)vue項目必裝的插件，希望對大家有所幫助！
如何快速入門VUE3.0：進入學(xué)習(xí)
之前使用webstorm開發(fā)項目，webstorm雖然好用，但是有兩個很大的缺陷：一是太卡了，三年前買的筆記本在打開一個項目，基本上每天都要重啟，打開三個項目直接卡死，二是付費的，雖然網(wǎng)上有破解版，但是每隔一段時間就會失效，太蛋疼。
因此，決定棄用它，改用輕量級同時也免費的vscode，全稱Visual Studio Code。經(jīng)過我多天的摸索，vs code安裝了以下插件后，基本上已經(jīng)達到了和webstorm一樣的效果甚至比它更好的體驗，從此，再也不用擔(dān)心卡頓和失效的問題了。【推薦學(xué)習(xí)：《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方法時都可定位到對應(yīng)的文件或位置，在點擊vue組件時跳轉(zhuǎn)到對應(yīng)文件的前提是該組件是安裝相對路徑引入（即不支持別名引入），且組件名與組件的文件名一樣。比如組件文件名是select.vue,而引入組件時卻是,這種情況不能點擊，需把組件文件名改成common-select.vue
4. vue peek
作用：在template中點擊vue組件時可跳轉(zhuǎn)到對應(yīng)的文件，可以支持別名引入的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的按鈕，點擊可看到所有g(shù)it commit的詳細信息及每次commit的代碼的改動明顯
11. Prettier – Code formatter
作用：文件格式化，可配置保存文件時，格式化該文件
步驟：安裝完該插件后，找到setting.json
把以下代碼復(fù)制進去，前兩行是該插件必須要用到的，最后兩個分別是插件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文件，把以下代碼復(fù)制進去，每行的含義分別為：1.單引號，2.對象最后一個元素不要逗號，3.箭頭函數(shù)只有一個參數(shù)時不要括號，4.超過100個字符換行。
{ "singleQuote": true, "trailingComma": "none", "arrowParens": "avoid", "printWidth": 100 }
12. VSCode Great Icons
作用：使得項目結(jié)構(gòu)前面有對應(yīng)圖標，看起來更美觀（非必需）
13. One Dark Pro
作用：vs code的皮膚，讓界面更美觀（非必需）
14. Markdown Preview Enhanced
作用：通常每個項目里面都有README.md文件，安裝它后，每個md文件都可以點擊右鍵預(yù)覽效果
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/安裝和快速上手
