编辑器 vs IDE
写代码需要一个软件。主要有两类:
**编辑器(Editor)**:轻量,只负责编辑文本,通过插件扩展功能。代表:VS Code、Sublime Text。
**IDE(集成开发环境)**:重量级,自带编译、调试、测试等全套工具。代表:IntelliJ IDEA、Visual Studio。
对 JavaScript/TypeScript 开发,**VS Code** 是事实标准:免费、跨平台、插件生态丰富、微软官方维护。本站就用它开发。
VS Code 核心功能
文件管理
左侧资源管理器(Sidebar)显示项目文件树。点击文件打开,`Cmd+P`(macOS)或 `Ctrl+P`(Windows)快速搜索文件。
多标签编辑
可以同时打开多个文件,每个文件一个标签。`Cmd+1/2/3` 在标签间切换,也可以左右分屏对比两个文件。
集成终端
`Ctrl+` ` 打开内置终端,不用切换到外部终端软件。写代码和跑命令在同一个窗口。
搜索和替换
`Cmd+Shift+F` 全项目搜索,支持正则。改名时很有用:搜到所有引用,一个个改。
Git 集成
左侧 Source Control 面板显示改动的文件:
- **M(Modified)**:改了但没提交。
- **U(Untracked)**:新文件,还没被 Git 跟踪。
- 点文件看 diff(改了哪些)。
- 输入说明,点勾提交。
不用敲 `git` 命令,点几下就完成提交。
必装插件
VS Code 的强大在于插件。几个必装:
- **ESLint**:实时检查代码风格和错误,红色波浪线标出问题。
- **Prettier**:自动格式化代码,保存时自动整理缩进和引号。
- **GitLens**:显示每行代码最后是谁、什么时候改的。
- **Tailwind CSS IntelliSense**:Tailwind 类名自动补全。
- **Error Lens**:把错误信息直接显示在代码行旁边,不用悬停。
快捷键提速
高频快捷键( macOS 用 Cmd,Windows 用 Ctrl):
- `Cmd+S`:保存。
- `Cmd+Z` / `Cmd+Shift+Z`:撤销/重做。
- `Cmd+C` / `Cmd+V`:复制/粘贴。
- `Cmd+D`:选中下一个相同的词(批量改名)。
- `Cmd+/`:注释/取消注释当前行。
- `Alt+↑/↓`:上下移动当前行。
- `Alt+Shift+↑/↓`:向上/下复制当前行。
- `Cmd+Shift+K`:删除当前行。
记住这几个,编辑速度翻倍。
设置同步
登录 GitHub 或微软账号,VS Code 会自动同步你的设置、快捷键、插件到云端。换电脑登录一下,环境一模一样。
工作区设置
每个项目可以有独立的设置,存在 `.vscode/settings.json`:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.autoSave": "onFocusChange"
}保存时自动格式化、失焦时自动保存——这些设置跟着项目走,团队成员一致。
小白建议
- 不用学所有功能,用到再查。
- 先装 ESLint 和 Prettier,让编辑器帮你抓错。
- 记住 5 个快捷键,比鼠标快。
- 用内置终端,不切窗口。
AI 给你的代码,你贴进 VS Code 就能看到高亮、错误提示、自动补全。编辑器是你和 AI 协作的主战场。