作为一名前端开发者，VSCode几乎是标配编辑器。但很多人只用了它10%的功能。
今天推荐10个我每天都在用的VSCode插件，让你的开发效率翻倍。
一、代码格式化****
1. Prettier - Code formatter****
功能：自动格式化代码，支持多种语言。
配置：
{
"editor.formatOnSave": true,
"prettier.semi": false,
"prettier.singleQuote": true
}
为什么必装：不用再纠结代码风格，保存自动格式化，团队代码风格统一。
2. ESLint****
功能：JavaScript代码检查，发现潜在问题。
配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
为什么必装：提前发现bug，强制规范代码质量。
二、开发效率****
3. Auto Rename Tag****
功能：修改HTML/JSX标签时，自动修改配对的闭合标签。
示例：
修改 <div> 为 <section>
自动修改 </div> 为 </section>
为什么必装：React/Vue开发必备，省去手动改闭合标签的麻烦。
4. Bracket Pair Colorizer****
功能：给括号添加不同颜色，方便识别嵌套层级。
为什么必装：多层嵌套时一目了然，不用数括号了。
5. Path Intellisense****
功能：路径自动补全。
示例：
import Component from './components/Component'
// 输入 './components/' 会自动提示文件名
为什么必装：不用记住文件名，避免路径写错。
三、Git管理****
6. GitLens****
功能：增强Git功能，显示每一行代码的修改历史。
为什么必装：想知道这行代码谁写的、什么时候写的，一键查看。
7. Git Graph****
功能：可视化Git分支图。
为什么必装：多人协作时，分支关系一目了然，解决冲突更轻松。
四、框架专用****
8. ES7+ React/Redux/React-Native snippets****
功能：React代码片段。
示例：
输入 imrc → import React, { Component } from 'react'
输入 cc → class Component extends Component { ... }
为什么必装：React开发必备，大幅减少重复代码。
9. Vetur****
功能：Vue开发工具集，语法高亮、智能提示、格式化。
为什么必装：Vue开发者必装，提供完整的开发体验。
五、其他神器****
10. Live Server****
功能：本地开发服务器，保存自动刷新。
使用：右键HTML文件 → Open with Live Server
为什么必装：写静态页面时，保存自动刷新，不用手动F5。
插件安装建议****
1. 不要装太多：插件越多，VSCode越慢。只装真正需要的。
2. 配置要同步：用Settings Sync同步配置，换电脑不用重新配置。
3. 定期清理：半年检查一次，删除不用的插件。
我的完整配置****
{
// 格式化
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Prettier
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
// ESLint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 其他
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"files.autoSave": "afterDelay"
}
总结****
这10个插件，覆盖了前端开发的核心需求：
| 类别 | 插件 |
|------|------|
| 格式化 | Prettier, ESLint |
| 效率 | Auto Rename Tag, Bracket Pair Colorizer, Path Intellisense |
| Git | GitLens, Git Graph |
| 框架 | React Snippets, Vetur |
| 其他 | Live Server |
安装这些插件，开发效率至少提升50%。
你还有什么好用的插件？欢迎评论区分享！
