使用tsconfig.app.json时VS Code显示TS错误但构建正常的解决方法

问题背景 #

项目根目录的tsconfig.json设置了strictNullCheck: true，但在apps/app-not-strict/tsconfig.app.json这个嵌套配置文件里将该选项设为false。用tsc构建时完全正常，但VS Code编辑器里这个子项目依然显示TypeScript错误；把这个配置文件重命名为tsconfig.json后，编辑器就恢复正常了。需要让VS Code遵循tsconfig.app.json的配置，使编辑器和构建结果保持一致。

解决方案 #

方法1：通过VS Code工作区配置指定子项目配置文件 #

• 打开VS Code的工作区设置（快捷键Ctrl+,，切换到「工作区」标签）
• 直接编辑.vscode/settings.json，添加如下配置：

{
  "typescript.tsconfigPaths": {
    "apps/app-not-strict/*": ["apps/app-not-strict/tsconfig.app.json"]
  }
}

这个配置会明确告诉VS Code：apps/app-not-strict目录下的所有文件，都使用tsconfig.app.json作为TypeScript配置文件。

方法2：用TypeScript项目引用关联配置 #

如果是多项目结构，推荐用TypeScript官方的项目引用功能：

1. 根目录tsconfig.json开启composite，并添加子项目引用：

{
  "compilerOptions": {
    "strictNullChecks": true,
    "composite": true
  },
  "references": [
    { "path": "./apps/app-not-strict/tsconfig.app.json" }
  ]
}

2. 子项目的tsconfig.app.json也要开启composite，并明确指定文件范围：

{
  "compilerOptions": {
    "strictNullChecks": false,
    "composite": true,
    "rootDir": "./src",
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

配置完成后，VS Code会自动识别子项目的专属配置，同时tsc --build也能正确批量构建所有关联项目。

方法3：结合配置继承简化设置（可选） #

如果子项目只是覆盖根配置的少数选项，可以在tsconfig.app.json里继承根配置，减少重复代码：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "strictNullChecks": false
  },
  "include": ["src/**/*"]
}

搭配前面两种方法使用，效果更顺畅。

问题原因 #

VS Code默认只会在当前目录及父目录中查找名为tsconfig.json的文件作为配置文件，自定义命名的配置（比如tsconfig.app.json）不会被自动识别，必须通过手动指定或项目引用的方式，让编辑器关联到正确的配置文件。

内容的提问来源于stack exchange，提问作者kDar