配置 tsconfig.JSon：设置 target、lib、module 等编译选项，启用 strict 严格模式和 noEmit，由构建工具处理输出；2. 设置 .vscode/settings.json：统一编辑器行为，开启保存自动格式化、导入整理及 ESLint 修复；3. 集成 ESLint 与 Prettier：通过 eslint-config-prettier 和插件实现代码规范与格式统一；4. 支持路径别名：在 tsconfig 中配置 baseUrl 和 paths，VSCode 自动识别别名智能提示。组合这些配置可提升 typescript 开发效率与代码质量。
使用 VSCode 开发 TypeScript 项目时，合理的配置能显著提升开发效率和代码质量。核心在于正确设置编辑器行为、TypeScript 编译选项以及集成工具链。以下是经过验证的最佳实践配置。
1. tsconfig.json：TypeScript 编译配置
项目根目录下的 tsconfig.json 是 TypeScript 的核心配置文件。推荐基础配置如下：
{ “compilerOptions”: { “target”: “ES2022”, “lib”: [“ES2022”, “dom”, “DOM.Iterable”], “module”: “ESNext”, “moduleResolution”: “bundler”, “strict”: true, “skipLibCheck”: true, “forceConsistentCasingInFileNames”: true, “allowImportingTsExtensions”: true, “noEmit”: true, “jsx”: “react-jsx”, “allowJs”: true, “isolatedModules”: true, “esModuleInterop”: true, “useDefineForClassFields”: true, “verbatimModuleSyntax”: false }, “include”: [“src”] }
说明：
- target 和 lib：根据目标运行环境选择合适的 ecmascript 版本，确保类型检查准确。
- strict: true：开启严格模式，避免常见类型错误。
- noEmit: true：由构建工具（如 vite、webpack）负责编译输出，VSCode 只做类型检查。
- moduleResolution: bundler：适配现代打包工具的模块解析方式。
2. .vscode/settings.json：编辑器专属配置
在项目中创建 .vscode/settings.json，统一团队开发体验：
{ “typescript.preferences.includePackageJsonautoImports”: “auto”, “typescript.suggest.autoImports”: true, “typescript.validate.enable”: true, “editor.formatOnSave”: true, “editor.defaultFormatter”: “esbenp.prettier-vscode”, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: “explicit”, “source.organizeImports”: true }, “javascript.validate.enable”: false }
关键点：
- 保存时自动格式化、整理导入语句，保持代码整洁。
- 启用 ESLint 自动修复，配合 lint 规则预防错误。
- 指定默认格式化工具（如 Prettier），避免格式争议。
3. 集成 ESLint 与 Prettier
TypeScript 项目应搭配 ESLint 做静态分析。安装依赖：
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier
创建 .eslintrc.cjs：
module.exports = { parser: ‘@typescript-eslint/parser’, extends: [ ‘eslint:recommended’, ‘plugin:@typescript-eslint/recommended’, ‘prettier’ ], plugins: [‘@typescript-eslint’], rules: { ‘@typescript-eslint/no-unused-vars’: ‘warn’ } };
这样 VSCode 中安装 ESLint 插件后，能实时标出问题并支持保存修复。
4. 启用路径别名智能提示
若在 tsconfig 中配置了路径别名（如 “@/*” 指向 “src/*”），需让 VSCode 正确识别：
“compilerOptions”: { “baseUrl”: “.”, “paths”: { “@/*”: [“src/*”] } }
VSCode 默认支持此配置，导入时可自动补全别名路径，无需额外插件。
基本上就这些。合理组合 tsconfig、编辑器设置和代码质量工具，能让 TypeScript 开发流畅且可靠。