VScode 常用插件推荐，非常全面
文章目錄
- 一、主題美化
- Peacock
- Material Theme
- Material Theme Icons
- background
- Power Mode
- Rainbow CSV
- Indent Rainbow
- Polacode
- 二、檢查格式化
- ESLint
- Prettier - Code formatter
- Prettier ESLint
- Stylelint
- 三、編程美化
- Document This
- Better Comments
- Rainbow Brackets
- 四、集成插件
- Docker
- PostCode
- REST Client
- Live Server
- Code Runner
- Tabnine
- GitLens
- Git History
- Remote Development
- 五、開發效率
- Vetur/volar
- Codelf
- WXML - Language Service
- XML Tools
- Auto Rename Tag
- json2ts
- px to rem & rpx (cssrem)
- CSS Peek
- IntelliSense for CSS/SCSS/Less
- Path Intellisense
- Image preview
- Trailing Spaces
- Auto Close Tag
- HTML CSS Support
- Bookmarks
- Error Lens
- Project Manager
- 六、數據分析
- VS Code Counter
- Import Cost
- filesize
- 七、學習一下
- Code Spell Checker
- A-super-translate
- 會了吧
- 八、摸魚神器
- LeetCode
- fisher
- 4399 on VSCode
- VSC Netease Music
- 韭菜盒子
- Rainbow Fart
- 九、其他
- Partial Diff
- Chinese
- Todo Tree
- Vim
- Markdown Preview Enhanced
- Markdown PDF
- Markdown All in One
一、主題美化
Peacock
可以為 VScode 中的不同項目添加不同的顏色主題，方便區分不同項目。
效果圖：
Material Theme
為 VScode 提供 Material Design 風格的主題。
Material Theme Icons
為 VScode 中的文件和文件夾添加 Material Design 風格的圖標。
background
給 Visual Studio Code 添加背景，也可以自定義背景圖片。
效果圖：
Power Mode
炫酷的敲代碼插件。
效果圖：
Rainbow CSV
對 CSV 文件進行語法高亮，方便查看和編輯。
效果圖：
Indent Rainbow
為縮進添加彩虹色條帶，方便識別縮進層次。
效果圖：
Polacode
生成漂亮的代碼截圖的插件。
效果圖：
二、檢查格式化
ESLint
用于 JavaScript/TypeScript 代碼的語法檢查和格式化。
Prettier - Code formatter
代碼格式化插件，支持多種語言。
Prettier ESLint
代碼格式化。
Stylelint
CSS代碼檢查工具，包括捕捉錯誤、最佳實踐、控制可以使用的語言特性和強制代碼風格規范。
效果圖：
三、編程美化
Document This
主要針對JavaScript 和 TypeScript 語言生成注釋。
效果圖：
Better Comments
一款美化注釋的插件，可以根據不同種類的注釋，顯示不同的顏色，一目了然，提高注釋可讀性。
效果圖：
Rainbow Brackets
在代碼中使用彩虹色高亮括號，方便識別括號嵌套層次。
效果圖：
四、集成插件
Docker
集成 Docker 環境，方便在 VScode 中管理容器和鏡像。
PostCode
在 vscode 里面使用 postman
效果圖：
REST Client
可直接在 VScode 中發起 HTTP 請求，方便測試和調試 API。
效果圖：
Live Server
為 HTML、CSS 和 JavaScript 提供實時預覽和自動刷新，在瀏覽器中實時預覽靜態網頁的插件。
效果圖：
Code Runner
支持多種編程語言的代碼運行器。
Tabnine
AI 輔助自動補全插件，支持多種語言。
效果圖：
GitLens
用于集成 Git 功能，提供更多的 Git 信息和可視化操作。
效果圖：
Git History
可以查看 Git 歷史記錄和提交詳細信息。
效果圖：
Remote Development
遠程開發插件，可以在 VScode 中遠程連接到遠程主機或容器中開發。
效果圖：
五、開發效率
Vetur/volar
vue/vue3語法高亮、智能感知、Emmet等, 包含格式化功能。
Codelf
變量命名神器
效果圖：
WXML - Language Service
微信小程序 .wxml 文件代碼高亮，標簽、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，并提供 code snippets）。
效果圖：
XML Tools
XML 文件增強插件，提供 XML 文件的語法提示、自動補全、格式化等功能。
Auto Rename Tag
自動重命名成對的HTML標記，修改開始標簽，結束標簽會同步修改。
效果圖：
json2ts
效果圖：
px to rem & rpx (cssrem)
自動換算單位的插件。很簡單，出現提示以后回車即可。
效果圖：
CSS Peek
可以通過點擊類名迅速定位到樣式的定義。但不支持less、stylus的嵌套
效果圖：
IntelliSense for CSS/SCSS/Less
提供 CSS、SCSS 和 Less 的語法提示和自動補全。
效果圖：
Path Intellisense
提供文件路徑的自動補全和提示。
效果圖：
Image preview
預覽代碼中圖片的引用，鼠標移上去就會有小窗展示圖片。
效果圖：
Trailing Spaces
把尾隨空格顯示出來。
效果圖：
Auto Close Tag
自動閉合 HTML/XML 標簽的插件，避免輸入錯誤的標簽閉合造成的問題。
效果圖：
HTML CSS Support
在 HTML 文件中提供 CSS 的語法提示和自動補全功能。
Bookmarks
為代碼添加書簽，方便在文件中快速跳轉。
效果圖：
Error Lens
將編輯器診斷出的警告、錯誤、語法問題（提示的波浪線）等，以用顏色填充行背景的方式突出提示，并將診斷信息顯示在尾部。
效果圖：
Project Manager
項目管理，方便進入任何項目
效果圖：
六、數據分析
VS Code Counter
統計代碼總行數、注釋行數、空白行數，以及使用的語言。
效果圖：
Import Cost
在導入語句中顯示導入模塊的大小的插件。
效果圖：
filesize
在狀態欄中顯示當前文件大小。
效果圖：
七、學習一下
Code Spell Checker
檢查代碼中單詞拼寫是否正確，當單詞不正常的時候，就會在下方出現波浪線進行提示，還可以自定義詞典，忽略某個單詞的檢查等。
效果圖：
A-super-translate
劃詞翻譯。鼠標停留選中幾秒就會查看翻譯內容。
效果圖：
會了吧
打開源碼可以自動分析所有包含的英語單詞，并顯示解釋結果，先學單詞再看代碼
八、摸魚神器
LeetCode
在線LeetCode刷題
效果圖：
fisher
獨創4種最隱蔽最安全摸魚方式,其中猥瑣模式/安全模式，極為隱蔽，瞞天過海，暗度陳倉。
效果圖：
4399 on VSCode
玩一會 4399 小游戲, 放松身心, 勞逸結合, 更好地開始接下來的工作 。
效果圖：
VSC Netease Music
網易云音樂程序員版，使用 Webview 實現，通過 HTMLAudio?Element 播放音樂，不依賴命令行播放器
效果圖：
韭菜盒子
VSCode 里也可以看股票 & 基金實時數據，做最好用的投資插件。
效果圖：
Rainbow Fart
VSCode Rainbow Fart是一個在你編程時持續夸你寫的牛逼的擴展，可以根據代碼關鍵字播放貼近代碼意義的真人語音。
九、其他
Partial Diff
查看哪里修改了代碼、查看輸出的日志信息有什么區別等等。
Chinese
為 VS Code 提供本地化中文界面。
Todo Tree
可以掃描代碼中的注釋并生成待辦事項列表，方便管理任務。
效果圖：
Vim
為 VScode 添加 Vim 的編輯模式。
Markdown Preview Enhanced
提供更多的 Markdown 預覽和導出選項，預覽窗口內置于 vscode 中。
效果圖：
Markdown PDF
MarkdownPDF可將Markdown文件轉換為pdf、html、png或jpeg文件
效果圖：
Markdown All in One
為 Markdown 提供語法高亮、預覽、導出等功能。
效果圖：
總結
以上是生活随笔為你收集整理的VScode 常用插件推荐，非常全面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 新版本GPU加速的tensorflow库
- 下一篇： 谷歌发现育碧uPlay安全漏洞