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

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

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

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

插件安裝與說明

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

作用：中文版的VS Code

安裝步驟：

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

2. Vue Language Features (Volar)

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

3. vue-helper

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

4. vue peek

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

5. css peek

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

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

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

7. Auto Rename Tag

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

8. Code Spell Checker

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

9. GitLens — Git supercharged

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

10. Git Graph

作用：安裝完成后，左下角會出現(xiàn)一個(gè)Git Graph的按鈕，點(diǎn)擊可看到所有g(shù)it commit的詳細(xì)信息及每次commit的代碼的改動(dòng)明顯

11. Prettier – Code formatter

作用：文件格式化，可配置保存文件時(shí)，格式化該文件

步驟：安裝完該插件后，找到setting.json

把以下代碼復(fù)制進(jìn)去，前兩行是該插件必須要用到的，最后兩個(gè)分別是插件12和插件13所需要的，如果你不裝插件12和13，可以刪除最后兩行

{   "editor.formatOnSave": true, // 保存時(shí)是否格式化   "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件   "editor.tabSize": 2, // tab健空格   "editor.fontSize": 14, // 字體大小   "workbench.iconTheme": "vscode-great-icons",   "workbench.colorTheme": "One Dark Pro" }

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

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

12. VSCode Great Icons

作用：使得項(xiàng)目結(jié)構(gòu)前面有對應(yīng)圖標(biāo)，看起來更美觀（非必需）

13. One Dark Pro

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

14. Markdown Preview Enhanced

作用：通常每個(gè)項(xiàng)目里面都有README.md文件，安裝它后，每個(gè)md文件都可以點(diǎn)擊右鍵預(yù)覽效果

15. koroFileHeader

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

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

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

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