文章目錄

• • • 一、主題美化
    • • 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 常用插件推荐，非常全面的全部內容，希望文章能夠幫你解決所遇到的問題。

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