Vscode 当测试/** 不包含在 tsconfig 中时，TS 语言功能不可用

Question

当 test 文件夹与 src 相邻时，我希望我的打字稿测试能够接收 linting、代码完成、vscode 智能感知（ts 语言功能）。我不希望在构建打字稿项目时转换测试。

我的打字稿节点项目的结构如下：

.    
├── server
│   │ 
│   │    
│   ├── src
│   │   │
│   │   └── app.ts
│   ├── test
│   │   │
│   │   └── app.test.ts
│   ├── node_modules/
│   ├── package-lock.json
│   ├── package.json
│   ├── tslint.json
│   └── tsconfig.json
├── front_end/
└── README.md

使用我的 tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ESNext",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

当我导航到 vscode 中的测试文件时，vscode 语言功能无法识别 node_modules 中安装的类型和包。令人惊讶的是，如果我只在服务器文件夹中打开 vscode（正如您从我的文件夹结构中看到的那样，服务器不是根目录），语言功能会起作用。

测试使用 ts-jest 到运行，所以这里不需要 tsc。为测试扩展 tsconfig.json 会更好吗？

这是否可以在设置中修复，或者我应该向 https://github.com/microsoft/vscode/issues/new/choose 提交错误。

Answer 1

我没有电脑来测试这个，但我认为你只需要将以下代码添加到你的 ts json 文件中。

"exclude": [
        "node_modules",
        "**/*.test.ts"
    ]

细分：排除**所有文件夹/*所有带有.test的ts文件。

如果您不使用节点，则可以省略 node_modules 部分。但我希望在我的回答中使用它，以防使用节点的人复制排除。默认情况下 node_modules 被排除，但添加更多修饰符可以覆盖它。

祝你好运。

希望这就是您要找的。

Answer 2

是的，您可以扩展您的 tsconfig，以便您拥有一个通用的、一个生产的和一个开发的。在我们的例子中，我们有这个：

tsconfig.common.json - 包含开发和生产共享的所有设置。

tsconfig.json - 包含测试的开发版本：

{
    "extends": "./tsconfig.common",
    "exclude": ["bin", "node_modules"]
}

tsconfig.prod.json - 排除测试的生产版本。

{
    "extends": "./tsconfig.common",
    "exclude": ["bin", "node_modules", "tests", "**/*.spec.ts"]
}

然后使用我们的 webpack.config，我们有一个类似的设置：

webpack.common.js - 包含开发和生产共享的所有设置

webpack.dev.js - 使用开发tsconfig:

rules: [
        {
            test: /\.ts$/,
            exclude: [/bin/, /node_modules/],
            include: /ClientApp/,
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/],
                configFile: 'tsconfig.json'
            }
        }
    ]

webpack.prod.js - 使用生产 tsconfig:

rules: [
        {
            test: /\.ts$/,
            exclude: [/bin/, /node_modules/],
            include: /ClientApp/,
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/],
                configFile: 'tsconfig.prod.json'
            }
        }
    ]

最后，package.json 文件的脚本部分包含以下内容：

scripts: {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
}

希望对你有所帮助。

Answer 3

Vscode 单根 tsconfig 文件有问题。 src 的相邻 test 文件夹将使用 tsconfig（添加在此 pull request) however it won't work if the folder you open is one directory above it (for example if you have a server & client folder). A solution is being tracked in this issue: https://github.com/Microsoft/vscode/issues/12463.

此外，如果您想升级到 eslint（不推荐使用 tslint），如果您希望将测试文件夹排除在主 tsconfig 中，打字稿解析器还会强制您将 tsconfig 文件添加到测试文件夹. Link to eslint multi tsconfig docs.

简单的解决方案是使用两个额外的 tsconfig。一个用于 linter tsconfig.eslint.json 和一个用于测试在 test 文件夹中：test/tsconfig.json 具有以下内容：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": ["./**/*"]
}

不优雅，但目前不存在更好的解决方案。

Vscode 当测试/** 不包含在 tsconfig 中时，TS 语言功能不可用

Vscode TS language features unavailable when tests/** are not included in the tsconfig

typescript

jestjs

visual-studio-code

ts-jest