为什么选择 VS Code？
VS Code 本身就是用 TypeScript 开发的，对 TypeScript 的支持最为完善，包括智能提示、代码导航、重构等功能。
1.6 VS Code 开发环境配置
打造高效的 TypeScript 开发环境
🎯 学习目标
- 配置 VS Code 的 TypeScript 开发环境
- 安装必备的 TypeScript 扩展
- 掌握常用的开发配置和快捷键
- 学会调试 TypeScript 代码
📦 VS Code 简介
Visual Studio Code 是微软开发的免费、开源代码编辑器，对 TypeScript 有着原生支持，是开发 TypeScript 项目的最佳选择。
💡
🔧 必备扩展
核心扩展
- TypeScript Hero - 代码组织工具
- TSLint / ESLint - 代码检查
- Prettier - 代码格式化
推荐扩展
- Path Intellisense - 路径自动补全
- Auto Import - 自动导入
- Error Lens - 行内错误显示
⚙️ 项目配置
.vscode/settings.json
{
// TypeScript 配置
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.suggest.autoImports": true,
"typescript.suggest.includeAutomaticOptionalChainCompletions": true,
// 格式化配置
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// 文件配置
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.exclude": {
"**/.git": true,
"**/node_modules": true,
"**/dist": true
}
}
🎯 推荐配置
.vscode/extensions.json
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"usernamehw.errorlens",
"christian-kohler.path-intellisense",
"streetsidesoftware.code-spell-checker"
]
}
⌨️ 常用快捷键
| 功能 | Windows/Linux | macOS |
|---|---|---|
| 转到定义 | F12 | F12 |
| 查看引用 | Shift + F12 | Shift + F12 |
| 重命名符号 | F2 | F2 |
| 快速修复 | Ctrl + . | Cmd + . |
| 格式化文档 | Shift + Alt + F | Shift + Option + F |
| 触发建议 | Ctrl + Space | Cmd + Space |
🐛 调试配置
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug TypeScript",
"runtimeExecutable": "node",
"runtimeArgs": ["-r", "ts-node/register"],
"args": ["${file}"],
"cwd": "${workspaceFolder}",
"internalConsoleOptions": "openOnSessionStart",
"skipFiles": ["/**"]
},
{
"type": "node",
"request": "launch",
"name": "Debug Compiled JS",
"program": "${workspaceFolder}/dist/index.js",
"preLaunchTask": "npm: build",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"console": "integratedTerminal"
}
]
}
📝 本节小结
✅
- • VS Code 对 TypeScript 有原生支持
- • 安装 ESLint 和 Prettier 扩展提升开发体验
- • 配置 settings.json 优化工作流
- • 使用 launch.json 配置调试环境