【整理分享】VSCode開發vue專案必裝的插件

這篇文章為大家整理一些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中文網其他相關文章！