這篇文章為大家整理一些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教學！
以上是【整理分享】VSCode開發vue專案必裝的插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
