工欲善其事必先利其器

安裝步驟
.
.
.
.
.
.
.
.
.

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

2.自動閉合標簽Auto Close Tag

3.同步修改標簽Auto Rename Tag

4.高亮代碼的回調，括號的區域范圍Bracket Pair Colorizer

4.支持多中代碼的執行Code Runner

5.直觀得看到你設置的樣式顏色Color Highlight

6.在 HTML 中通過 CSS id 或則 class 來定位到其定義 CSS Peek

7.ES7 React/Redux/GraphQL/React-Native snippets

8.Git History
用來查看 git log 或則一個文件的 git 歷史，比較不同的分支，commits。

9.Highlight Matching Tag
這本來應該是 VSCode 應該默認提供的功能，高亮匹配的標簽。

10.JavaScript (ES6) code snippets
VS Code 編輯器的 ES6 語法的 JavaScript 代碼片段（支持 JavaScript 和 TypeScript）。

11.npm Intellisense
VSCode 插件可以在導入語句自動補全 npm 模塊名稱。

12.open in browser

13.Path Intellisense
該擴展可以自動補全代碼中的路徑和文件名。

14.Prettier - Code formatter
你絕對不能少了這個插件，你需要它來一鍵美化你的 JavaScript/TypeScript/CSS 代碼

15.Vetur
Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。(VScode官方欽定Vue插件，Vue開發者必備。)

VueHelper
vue使用者必備

16.Visual Studio IntelliCode
這個插件旨在幫助開發人員提供智能的代碼完成建議而構建的，并且已預先構建了對多種編程語言的支持。

17.vscode-icons
文件夾的圖標

18.Beautify
代碼文件右鍵格式化 美化代碼

19.HTML Snippets
智能提示HTML標簽，以及標簽含義

20.Npm Intellisense(node必備)

21.GitLens
方便查看git日志，它不僅能幫助你通過 Git blame 注解直觀地看到代碼作者，而且還可以無縫瀏覽和探索 Git 存儲庫，通過強大的比較命令獲得有價值的見解，等等。

Git History
用來查看 git log 或則一個文件的 git 歷史，比較不同的分支，commits。

22.ESLint
代碼規范–需要配置—個人一般不用（格式不對會報錯比較煩）

23.jQuery Code Snippets
jQuery代碼智能提示

23.color info
提供有關CSS顏色的快速信息

24.Trailing Spaces
高亮那些冗余的空格，可以快速刪掉。

25.主題：

One Dark Pro 黑色背景 很舒服。

Monokai Charcoal high contrast 黑色背景 高對比度，配合背景透明，調到很低也很清晰。

26.以下一部分是uniapp開發插件

27.小程序助手

28.minapp 微信小程序標簽、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）

39.vscode wxml

40.wechat-snippet 微信小程序代碼輔助,代碼片段自動完成

41.wxml 微信小程序wxml格式化以及高亮組件(高度自定義)

42.TypeScript Hero

43.Import Cost 文件導入包大小

總結

以上是生活随笔為你收集整理的前端vscode插件合集的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。