1.5.1 磨刀不误砍柴工——IDE 选择：VS Code 配置与插件推荐

一句话破题

VS Code 是全球最流行的代码编辑器，通过合理的插件配置，可以打造一个高效的全栈开发环境。

必装插件清单

开发体验类

插件名称	作用	重要程度
ESLint	代码规范检查	⭐⭐⭐⭐⭐
Prettier	代码格式化	⭐⭐⭐⭐⭐
Error Lens	内联显示错误信息	⭐⭐⭐⭐
Auto Rename Tag	自动重命名配对标签	⭐⭐⭐⭐
Path Intellisense	路径自动补全	⭐⭐⭐⭐

语言支持类

插件名称	作用	重要程度
TypeScript Importer	自动导入 TS 模块	⭐⭐⭐⭐⭐
Tailwind CSS IntelliSense	Tailwind 类名提示	⭐⭐⭐⭐⭐
Prisma	Prisma schema 高亮和补全	⭐⭐⭐⭐
PostCSS Language Support	CSS 语法支持	⭐⭐⭐

效率提升类

插件名称	作用	重要程度
GitLens	增强 Git 功能	⭐⭐⭐⭐
Thunder Client	轻量级 API 测试工具	⭐⭐⭐⭐
Todo Tree	高亮和管理 TODO 注释	⭐⭐⭐
Better Comments	增强注释高亮	⭐⭐⭐

推荐配置

在 VS Code 设置（settings.json）中添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "typescript.preferences.importModuleSpecifier": "relative",
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

快捷键速查

操作	Windows/Linux	macOS
命令面板	Ctrl + Shift + P	Cmd + Shift + P
快速打开文件	Ctrl + P	Cmd + P
全局搜索	Ctrl + Shift + F	Cmd + Shift + F
侧边栏切换	Ctrl + B	Cmd + B
终端切换	`Ctrl + ``	`Cmd + ``
格式化代码	Shift + Alt + F	Shift + Option + F
重命名变量	F2	F2
跳转到定义	F12	F12

Cursor 用户说明

如果你使用 Cursor，以上配置同样适用。Cursor 基于 VS Code 构建，完全兼容 VS Code 的插件和配置。

额外的 Cursor 特有配置可以在 Cursor 设置中找到，主要是 AI 相关的选项（已在 1.1.2 节介绍）。

工作区配置

对于团队项目，建议在项目根目录创建 .vscode/settings.json，确保团队成员使用统一的配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

避坑指南

• 插件不要装太多：只装需要的，太多插件会拖慢编辑器
• 保持插件更新：过时的插件可能有兼容性问题
• 备份你的配置：使用 Settings Sync 功能同步配置到云端