這篇文章主要介紹了這么多年來(lái)我在使用 VSCode 過(guò)程中用到的一些不錯(cuò)的插件。這些VSCode插件，幫你打造地表最強(qiáng)IDE！

一、主題及圖標(biāo)

GitHub Theme

黑白兩款皮膚

Material Theme

集成了多種主題皮膚，搭配 Material Icon Theme 食用更佳。【推薦學(xué)習(xí)：vscode教程、編程教學(xué)】

Material Icon Theme

扁平化的主題圖標(biāo)庫(kù)

vscode-icons

VSCode官方出品的圖標(biāo)庫(kù)

二、功能強(qiáng)化

settings sync

同步所有設(shè)置和插件

wakatime

編程時(shí)間及行為跟蹤統(tǒng)計(jì)

Polacode

代碼截圖

Chinese (Simplified) Language Pack for Visual Studio Code

中文語(yǔ)言包

三、Git 集成插件

GitHub Pull requests

在Visual Studio Code中查看和管理GitHub拉取請(qǐng)求和問(wèn)題

Git Graph

Git 圖形化顯示和操作

CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review

團(tuán)隊(duì)協(xié)作開(kāi)發(fā)，評(píng)審，討論

四、數(shù)據(jù)庫(kù)

Oracle Developer Tools for VS Code

Oracle 數(shù)據(jù)庫(kù)支持

SQL Server (mssql)

Microsoft SQL Server 數(shù)據(jù)庫(kù)支持

MySQL

支持 MySQL/MariaDB, Microsoft SQL Server, PostgreSQL, Redis, and ElasticSearch

MongoDB for VS Code

MongoDB 數(shù)據(jù)庫(kù)支持

五、編程美化

Bracket Pair Colorizer

給匹配的括號(hào)上色，可以自定義配置

注意：該插件已經(jīng)內(nèi)置到 vscode，不用重復(fù)安裝，

設(shè)置方法：setting 里搜索 editor.bracketPairColorization.enabled，設(shè)置為 true 即可生效

Highlight Matching Tag

突出顯示匹配的開(kāi)始和/或結(jié)束標(biāo)簽
官方支持的標(biāo)記：HTML和JSX。其他樣式（XML，Vue，Angular，PHP）也可以使用，但不能保證正常使用。

在狀態(tài)欄中顯示標(biāo)記的路徑

Markdown Preview Enhanced

在 VSCode 里編寫(xiě) Markdown，支持預(yù)覽

Image Preview

預(yù)覽圖片

六、開(kāi)發(fā)效率

EditorConfig for VS Code

代碼風(fēng)格統(tǒng)一

change-case

更改命名風(fēng)格

Codelf

給變量起名的神器

Prettier – Code formatter

自動(dòng)格式化代碼

vscode-json

操作美化 json

快捷鍵

• cmd+alt+v，驗(yàn)證
• cmd+alt+b，格式化
• cmd+alt+u，壓縮
• cmd+alt+'，加轉(zhuǎn)義字符

• cmd+alt+;，去轉(zhuǎn)義字符

Regex Previewer

預(yù)覽正則表達(dá)式效果

七、前端開(kāi)發(fā)

Auto Rename Tag

自動(dòng)重命名 HTML或XML 標(biāo)簽

Auto Close Tag

自動(dòng)添加 HTML/XML 關(guān)閉標(biāo)簽

Path Intellisense

智能路徑提示

npm Intellisense

Turbo Console Log

快速添加 console.log 信息，js debug 必備

快捷鍵

ctrl + alt + l 選中變量之后，使用這個(gè)快捷鍵生成 console.log

alt + shift + c 注釋所有 console.log

alt + shift + u 啟用所有 console.log

alt + shift + d 刪除所有 console.log

css-auto-prefix

如圖

CSS Peek

查看 css 定義

八、數(shù)據(jù)分析

Sort lines

對(duì)當(dāng)前文本排序

Data Preview

預(yù)覽數(shù)據(jù)文件

九、修仙插件

LeetCode

刷題利器

VSC Netease Music

網(wǎng)易云音樂(lè)（程序員版）

daily anime

追番神器