你还在用裸奔的 VSCode？****
VSCode 本身就很强大，但加上插件，效率直接起飞。
今天推荐 10 个前端必备插件。
────────────────────────────────────────
必装插件****
1. ES7+ React/Redux/React-Native snippets****
作用：React 代码片段快速生成
用法：
· 输入 rfc → 生成函数组件
· 输入 rafce → 生成箭头函数组件
· 输入 useState → 快速生成 Hook
────────────────────────────────────────
2. Prettier - Code formatter****
作用：代码格式化
配置：
{
"editor.formatOnSave": true,
"prettier.tabWidth": 2,
"prettier.useTabs": false
}
────────────────────────────────────────
3. ESLint****
作用：代码规范检查
好处：
· 实时提示错误
· 自动修复部分问题
· 统一代码风格
────────────────────────────────────────
4. Auto Rename Tag****
作用：自动重命名配对标签
效果：
· 修改 <div> → </div> 自动跟着变
· 不用手动改两个地方
────────────────────────────────────────
5. Path Intellisense****
作用：路径自动补全
好处：
· 输入路径时自动提示
· 避免路径写错
· 提高效率
────────────────────────────────────────
6. GitLens****
作用：Git 增强
功能：
· 显示每行代码的提交信息
· 快速查看文件历史
· 对比版本差异
────────────────────────────────────────
7. Live Server****
作用：本地开发服务器
用法：
· 右键 HTML 文件
· 选择 "Open with Live Server"
· 自动刷新页面
────────────────────────────────────────
8. Color Highlight****
作用：颜色高亮显示
效果：
· 颜色代码直接显示对应颜色
· 不用脑补颜色
────────────────────────────────────────
9. Bracket Pair Colorizer 2****
作用：括号配对高亮
好处：
· 不同层级括号不同颜色
· 快速识别代码结构
────────────────────────────────────────
10. Tailwind CSS IntelliSense****
作用：Tailwind CSS 智能提示
功能：
· 类名自动补全
· 悬停显示样式
· 语法高亮
────────────────────────────────────────
配置推荐****
{
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
────────────────────────────────────────
总结****
| 插件 | 作用 |
|------|------|
| ES7+ snippets | React 代码片段 |
| Prettier | 代码格式化 |
| ESLint | 代码规范 |
| Auto Rename Tag | 标签同步修改 |
| Path Intellisense | 路径补全 |
| GitLens | Git 增强 |
| Live Server | 本地服务器 |
| Color Highlight | 颜色高亮 |
| Bracket Pair Colorizer | 括号高亮 |
| Tailwind IntelliSense | Tailwind 提示 |
────────────────────────────────────────
#前端开发 #VSCode #效率工具 #开发技巧
