VSCode開發vue項目必裝的插件是什么

這篇文章主要講解了“VSCode開發vue項目必裝的插件是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“VSCode開發vue項目必裝的插件是什么”吧！

插件安裝與說明

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，需先將光標放在函數行再按快捷鍵。

感謝各位的閱讀，以上就是“VSCode開發vue項目必裝的插件是什么”的內容了，經過本文的學習后，相信大家對VSCode開發vue項目必裝的插件是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！