VSCode 插件推荐

小白必备

翻译（英汉词典）

ID: codeinchinese.englishchinesedictionary

说明：不依赖任何在线翻译 API，无查询次数限制。英语救星

链接：https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary

Chinese (Simplified) Language Pack for Visual Studio Code

ID: ms-ceintl.vscode-language-pack-zh-hans

说明：简体中文语言包

链接：https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

颜色主题

GitHub Plus Theme

ID: thenikso.github-plus-theme

说明：一款与 GitHub 一样色系的白色主题

链接：https://marketplace.visualstudio.com/items?itemName=thenikso.github-plus-theme

City Lights theme

ID: Yummygum.city-lights-theme

说明：城市之光主题，主调色是偏深蓝色

链接：https://marketplace.visualstudio.com/items?itemName=Yummygum.city-lights-theme

Dracula Official

ID: dracula-theme.theme-dracula

说明：暗黑风格主题，主调色是偏深紫色

链接：https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

Nebula Theme

ID: chirtlelovesdolls.nebula-theme

说明：一款偏紫黑风格的颜色主题

链接：https://marketplace.visualstudio.com/items?itemName=ChirtleLovesDolls.nebula-theme

Material Theme

ID: Equinusocio.vsc-material-theme

说明：各类暗色主题，我比较喜欢 Material Theme Palenight

链接：https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

实用插件

Code Spell Checker

ID: streetsidesoftware.code-spell-checker

说明：检测代码英文单词错误

链接：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Trailing Spaces

ID: shardulm94.trailing-spaces

说明：高亮 VSCode 中冗余的空格

链接：https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

Bracket Pair Colorizer 2

ID: CoenraadS.bracket-pair-colorizer-2

说明：使用不同颜色来标识匹配的括号

链接：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Path Intellisense

ID: christian-kohler.path-intellisense

说明：引用路径时弹出提示

链接：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Prettier - Code formatter

ID: esbenp.prettier-vscode

说明：针对多种格式的格式化插件

链接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Image preview

ID: kisstkondoros.vscode-gutter-preview

说明：增强 VSCode 中的图片预览插件

链接：https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

GitLens

ID: eamodio.gitlens

说明：增强 VSCode 中内置的 Git 功能

链接：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

vscode-icons

ID: vscode-icons-team.vscode-icons

说明：更换文件或文件夹的默认图标（1）

链接：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Material Icon Theme

ID: PKief.material-icon-theme

说明：更换文件或文件夹的默认图标（2）

链接：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

前端开发

open in browser

ID: techer.open-in-browser

说明：在浏览器中打开文件

链接：https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

Live Server

ID: ritwickdey.liveserver

说明：实时预览静态文件的变动

链接：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Auto Close Tag

ID: formulahendry.auto-close-tag

说明：自动闭合 HTML/XML 标签

链接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

ID: formulahendry.auto-rename-tag

说明：自动同步修改 HTML/XML 标签

链接：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Highlight Matching Tag

ID: vincaslt.highlight-matching-tag

说明：高亮匹配的标签。如 HTML、XML、JSX、Vue、Angular、PHP都可以

链接：https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

Color Highlight

ID: naumovs.color-highlight

说明：CSS 颜色高亮。这个插件会对页面上所有的 CSS/web 的颜色编码进行高亮

链接：https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

HTML CSS Support

ID: ecmel.vscode-html-css

说明：补充了 VSCode 中缺少的 CSS 支持。类属性补全、ID 属性补全和全文件搜索 CSS 和 SCSS 提示等

链接：https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css