前端开发必备 VS Code 插件大全

中文语言包

Chinese (Simplified) Language Pack for Visual Studio Code

Live Server

Live Server Live Server是一款实时开发服务器插件，能够在本地启动一个服务器，当你修改代码时，它能自动检测变化并即时刷新浏览器，让你在开发过程中能即刻看到改动效果，尤其适用于静态网页和单页应用（SPA）的开发。

open in browser

提供右键菜单选项，一键在浏览器打开html文件。可以选择在默认浏览器打开或者选择自己想用的浏览器打开

Code Runner

最好的软件开发往往来自于程序员的直接需求，Code Runner 作者是一位曾就职于微软的中国程序员，他为了方便自己的日常开发工作，开发了 Code Runner 这款可以在 VS Code 中方便快捷运行各种语言代码的插件。目前该款插件已经支持超过 50 种编程语言，下载量超过 2700 万次。

下载地址：
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

AI 代码助手

腾讯云 AI 代码助手是由腾讯云自研的一款开发编程提效辅助工具，基于混元代码大模型，提供技术对话、代码补全、代码诊断和优化等能力。

本工具为开发者提供了针对不同 IDE 的插件，如 JetBrains 插件和 VS Code 插件。通过腾讯云 AI 代码助手，开发者可以更高效地解决实际编程问题，提高编程效率和代码质量。

下载地址：
https://marketplace.visualstudio.com/items?itemName=Tencent-Cloud.coding-copilot&ssr=false#overview

Settings Sync 插件漫游

当你在跨机器、跨平台、跨区域进行开发时，经常会遇到要在不同的机器上重装一遍插件的窘境，如果本来使用的插件就已经很多，那么这个工程就会更加繁琐。

Settings Sync 就是为了解决这个问题而开发的，值得一提的是 VS Code 官方也提供了同样名称的官方插件，大家可以选择适合自己的版本安装使用。

下载地址：
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

在 VS Code 中练习 LeetCode

当前的就业环境波诡云谲，没有人能保证自己的工作就一定能长久地干下去。等到要找工作的时候再刷题岂不是有点晚了？平常开发写代码累了，直接在 VS Code 里刷几道题，既能陶冶情操，又能维持技能水平，还不会被认为是在摸鱼，岂不美哉？

下载地址：
https://marketplace.visualstudio.com/items?itemName=LeetCode.vscode-leetcode

Rainbow 系列

彩虹缩进 indent-rainbow

可以为 VS Code 设置添加色彩、提高生产力。它还可以作为缩进的对齐检查，每个缩进都有一个交替的彩虹颜色。

下载地址：
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Rainbow CSV

这个插件允许你在逗号分隔（.csv）、制表符分隔（.tsv）、分号和竖线分隔的文件中，用不同的颜色高亮显示列。查看 CSV 格式文件效率直接起飞。

下载地址：
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

TODO Highlight & TODO Tree

程序员有时候会有意无意地忘记自己留下的 TODO，随着时间的推移，TODO 就成了一个没有人能看懂的注释。TODO Highlight 可以高亮你在写代码时挖的坑，以免坑到后来人。

下载地址：
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

相似类型的插件还有 TODO Tree，大家可以根据自己的喜好选择安装。

下载地址：
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

Material Them & Material Theme Icons

颜值就是正义，颜值就是生产力，颜值就是 Everything！换上这俩配套插件，芜湖起飞 ✈️！

下载地址：
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons

GitHub Theme

Git Graph

Git 图形化显示和操作

Git History

Image Preview

预览图片

Prettier - Code formatter

Prettier作为一款强大的代码格式化工具，支持多种前端语言，如JavaScript、CSS、HTML等。它能确保团队成员之间的代码风格一致，减少代码审查过程中的格式争论，同时也简化了手动格式化的繁琐步骤。

ESLint

ESLint是一款广泛应用于JavaScript开发的静态代码检查工具。它能实时监测并提示代码中的潜在错误和不符合规范的地方，帮助开发者遵守编码规范，提升代码质量。

Auto Import

Auto Import插件实现了在编写代码时自动导入所需的模块或组件。当你引用未导入的模块时，它会智能提示并自动添加相应的import语句，节省了大量的手动导入时间。

Path Intellisense

此插件增强了路径智能感知能力，当你在代码中书写相对或绝对路径时，它能自动列出并补全项目内的文件和目录，大大提升了引用资源文件的便利性。

Auto Rename Tag

同步修改 HTML/XML标签