正确配置VSCode的TypeScript开发环境可提升编码体验和代码质量。首先安装TypeScript并生成tsconfig.json，设置target、module、outDir等编译选项；推荐启用strict和sourceMap。接着集成ESLint与Prettier，安装相关依赖并配置.eslintrc.js文件以统一代码风格，启用保存时自动格式化。若使用路径别名如@/components，需在tsconfig.json中配置baseUrl和paths。最后通过package.json定义build、dev、lint等脚本，结合tsc监听和ESLint检查实现高效开发。合理配置后可复用至新项目，显著提升效率。
想在 VSCode 中高效进行 TypeScript 开发，关键在于正确配置编辑器和项目环境。合理的设置不仅能提升编码体验，还能提前发现错误、提高代码质量。以下是实用的配置建议。
启用 TypeScript 支持
VSCode 内置了对 TypeScript 的支持，无需额外安装插件即可使用基础功能。确保项目中已安装 TypeScript：
npm install --save-dev typescript初始化 tsconfig.json 配置文件，定义编译选项：
npx tsc --init常见重要配置项包括：
立即学习“前端免费学习笔记（深入）”；
- target: 指定编译后的 JavaScript 版本（如 "ES2020"）
- module: 模块系统（推荐 "ESNext" 或 "CommonJS"）
- outDir: 编译输出目录（如 "./dist"）
- rootDir: 源码目录（如 "./src"）
- strict: 启用所有严格类型检查选项
- sourceMap: 生成 source map 便于调试
集成 ESLint 和 Prettier
为了统一代码风格并捕获潜在问题，推荐搭配 ESLint 和 Prettier 使用。
安装依赖：
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier创建 .eslintrc.js 文件：
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended',
],
env: { browser: true, es2021: true },
rules: {
'@typescript-eslint/no-unused-vars': 'warn',
},
};
添加 .prettierrc 配置格式化规则，并在 VSCode 设置中启用保存时自动格式化：
在线订餐系统源码,提供给设计人员参考一个小型的在线订餐管理系统源码，采用三层模式开发，代码注释详细前台可以进行用户注册、菜单管理及订餐后台管理员可以进行菜单管理、新闻管理、菜肴管理、用户管理操作数据库采用的是Sql2005（由于数据库在App_Data下，如果装了Sql2005数据库会自动配置）
- 打开设置（Ctrl + ,）
- 搜索 “format on save” 并勾选
- 设置默认 formatter 为 "Prettier - Code formatter"
智能提示与路径别名支持
若项目使用路径别名（如 @/components），需让 TypeScript 和 VSCode 正确识别。
在 tsconfig.json 中配置 baseUrl 和 paths：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
VSCode 默认读取 tsconfig.json，重启编辑器后即可识别别名并提供跳转和补全功能。
调试与运行脚本
配合 package.json 脚本，可快速构建和调试。
常用脚本示例：
"scripts": {"build": "tsc",
"dev": "tsc --watch",
"lint": "eslint src --ext .ts,.tsx"
}
运行 npm run dev 可持续监听文件变化并编译。结合浏览器调试工具或 VSCode 的调试器，能实现高效开发流程。
基本上就这些。配置一次，后续新建项目可复用大部分内容，提升开发效率。不复杂但容易忽略细节。
