VSCode如何配置TypeScript环境 - 编译命令与tsconfig.json设置-VSCode-PHP中文网

tsconfig.json 最小必需配置是 "compileroptions" 和 "include"（或 "files"），其中 "strict": true 不可省略，否则失去 typescript 核心类型检查能力；"outdir" 和 "baseurl" 需显式设置才能启用编译输出与路径别名。

vscode如何配置typescript环境 - 编译命令与tsconfig.json设置

tsconfig.json 必须存在的最小配置项

没有 tsconfig.json，VSCode 就不会启用 TypeScript 的项目级检查和智能提示，哪怕文件后缀是 .ts。它不是可选的“高级设置”，而是 TypeScript 项目的启动开关。

最简可用配置只需两项："compilerOptions" 和 "include"（或 "files"）：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

"target" 建议设为 ES2020 或更高：太低（如 ES5）会抹掉类型信息、生成冗余代码；太高（如 ESNext）可能在旧环境运行报错
"include" 要明确覆盖源码路径，["src/**/*"] 比 ["**/*.ts"] 更安全——后者会误扫 node_modules 或构建产物
漏掉 "strict": true 是常见疏忽：它开启全部严格检查（noImplicitAny、strictNullChecks 等），关掉等于放弃 TypeScript 最核心价值

tsc 编译命令默认不生成 JS 文件？

直接运行 tsc 命令却没看到输出的 .js 文件，大概率是因为没开 "outDir" 或 "declaration" 等输出相关选项——TypeScript 编译器默认只做类型检查，不做文件落地。

要让 tsc 真正生成可执行代码，必须显式指定输出行为：

加 "outDir": "./dist"：所有编译结果（.js、.d.ts）写入该目录，且自动按源码目录结构组织
加 "rootDir": "./src"：配合 outDir 明确源码根路径，避免 tsc 把 node_modules 或配置文件也当源码处理
不要依赖 "outFile"：它只适用于单文件打包（amd 或 system 模块），现代项目基本用不上，还容易和 outDir 冲突

验证是否生效：终端执行 tsc --noEmit false（强制开启输出），再看 dist/ 下是否有对应文件。

VSCode 不识别 tsconfig.json 中的路径别名？

写了 "paths" 别名（比如 "@/*": ["src/*"]），但 VSCode 里 Ctrl+点击跳转失败、路径补全不出现，问题不在 Webpack 或 Vite，而在 VSCode 自身的 TS 服务没加载到该配置。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

关键点：VSCode 默认使用工作区内置的 TypeScript 版本（通常较新），但它读取 tsconfig.json 时，对 "baseUrl" 和 "paths" 的解析依赖于 "baseUrl" 是否存在且合法：

必须同时声明 "baseUrl": "."（或 "./"），否则 "paths" 会被完全忽略
"baseUrl" 值必须是相对路径（不能是 src 或绝对路径），且相对于 tsconfig.json 所在目录解析
改完配置后，VSCode 右下角会出现 “TypeScript reload required”，必须点击或手动触发 Restart TS Server（Ctrl+Shift+P → 输入 “TypeScript: Restart TS Server”）

错误示例："baseUrl": "src" 看似合理，但会导致路径解析失败——它实际被解释为 tsconfig.json 目录/src，而非你想要的 src/ 根目录。

为什么保存时没自动编译？tsc --watch 不是实时的

VSCode 本身不监听文件变化并调用 tsc，所谓“保存即编译”其实是靠外部工具（如 tsc --watch 或构建脚本）实现的，而 --watch 模式有隐藏限制：

tsc --watch 默认只监视 tsconfig.json 所在目录及子目录，如果 tsconfig.json 放在项目根，但源码在 packages/foo/src，它可能根本不会触发编译
修改 tsconfig.json 后，--watch 不会自动重载配置，必须手动终止再重启
VSCode 的保存操作不会触发 shell 命令，想“保存即编译”，得配 tasks.json + 文件关联，或用插件（如 Auto Build Typescript），但更推荐统一用 npm run build:watch