为什么VSCode不在tsconfig中获取路径别名

Question

我有一个jsconfig.json，我用tsconfig.json替换了它。更换后，VSCode不会拾取路径别名，并报告导入错误：

示例：

Cannot find module '@Components/Title' or its corresponding type declarations.ts(2307)

jsconfig.json

// https://code.visualstudio.com/docs/languages/jsconfig
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@Components/*": ["./src/components/*"],
"@Modules/*": ["./src/modules/*"],
"@Styles/*": ["./src/styles/*"],
"@Content/*": ["./src/content/*"],
"@Apps/*": ["./src/apps/*"]
}
},
//Add any build/compiled folders here to stop vscode searching those
"exclude": ["node_modules", "build"]
}

tsconfig.json

// https://code.visualstudio.com/docs/languages/jsconfig
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@Components/*": ["./src/components/*"],
"@Modules/*": ["./src/modules/*"],
"@Styles/*": ["./src/styles/*"],
"@Content/*": ["./src/content/*"],
"@Apps/*": ["./src/apps/*"]
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": ["node_modules", "build"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

更新1:我只有以.js结尾的文件有这个问题。如果我将它们重命名为.ts，一切都会正常工作。奇怪的是，如果我将文件重命名回.js并重新启动VSCode，错误就不会再出现在文件中。

Answer 1

tsconfig配置将仅适用于与；包括"；选项并且不被"；排除"；选项您的"；包括"；选项只匹配.ts和.tsx文件，但不匹配.js文件

加上"***"。js"；添加到包含的globs列表中，它应该可以工作。

Answer 2

问题是TypeScript的编译器保留了在源代码中写入的路径，正如您在这个GitHub问题中看到的那样，这使得tsc不适用于您的用例。

由于您显然正在构建一个web应用程序，我将提供一个基于Webpack的最小解决方案，Webpack是最流行的web捆绑器之一。

.
├── src
│   ├── components
│   │   └── component.ts
│   └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js

src/index.ts

import { Component } from '@Components/component';
Component.log();

src/components/component.ts

export class Component {
static log() {
console.log("test");
}
}

package.json

{
"name": "70072923",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"devDependencies": {
"ts-loader": "^9.2.6",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.5.2",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1"
},
"scripts": {
"build": "webpack",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}

tsconfig.json

{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@Components/*": ["components/*"],
},
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"jsx": "preserve"
},
"exclude": ["node_modules", "build"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

webpack.config.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
entry: './src/index.ts',
resolve: {
extensions: ['.ts'],
plugins: [
new TsconfigPathsPlugin,
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};

使用npm run build构建项目，它输出一个准备执行的最小自包含文件：

dist/bundle.js

(()=>{"use strict";(class{static log(){console.log("test")}}).log()})();

此处为完整项目：https://github.com/Guerric-P/Webpack-and-TypeScript-path-mappings

Answer 3

在我的情况下，Jest扩展上的vs代码在测试期间无法读取别名，但纱线测试没有问题。

FAIL  src/components/main/index.spec.tsx
● Test suite failed to run
Cannot find module '@test' from 'src/components/main/index.spec.tsx'
> 1 | import { render } from "@test";
| ^
2 |
3 | import { Main } from "./index";
4 |

解决方案是在.vscode文件夹ar根目录中添加settings.json

// .vscode/settings.json
{
"jest.jestCommandLine": "yarn test"
}