为什么 VSCode 不会在 tsconfig 中选择路径别名？答案

【问题标题】：Why does VSCode not pick up path aliases in tsconfig?为什么 VSCode 不会在 tsconfig 中选择路径别名？
【发布时间】：2022-01-01 11:25:15
【问题描述】：

我有一个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，错误就不会再出现在文件中了。

【问题讨论】：

通常当我遇到这种情况时，关闭+重新打开代码会为我做这件事；你试过吗？
是的，很多次。
您是否尝试过从路径中删除前导 ./？
@coppereyecat 试了一下。它没有用。

标签： typescript visual-studio-code tsconfig vscode-jsconfig

【解决方案1】：

问题在于 TypeScript 的编译器会保留在源代码中写入的路径，正如您在 GitHub issue 中看到的那样，这使得 tsc 无法用于您的用例。

由于您显然是在构建 Web 应用程序，因此我将提供一个基于 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

【讨论】：

感谢您花时间解释。很抱歉，我没有让我的问题更清楚 - 我在执行我的代码时没有任何问题。当我查看文件时，我得到的错误纯粹是在 VSCode 上。
我确实从你的包裹中意识到了一些东西。你给你的index文件一个.ts结尾。 VSCode 可以识别'@Components/component'，而这正是这种情况。但是，如果我将文件结尾更改为.js，则会引发相同的错误！
你永远无法在 JavaScript 模块中导入 TypeScript 模块，因为 JavaScript 根本不知道 TypeScript。由于 TypeScript 是 JavaScript 的超集，因此任何 JavaScript 文件都可以作为 TypeScript 有效（只要您没有设置 noImplicitAny、noImplicitReturns 等选项），所以您能做的最好的事情就是重命名您的所有 @ 987654339@ 文件到.ts，而不是像您似乎拥有的混合项目。

【解决方案2】：

tsconfig 配置仅适用于由“include”选项匹配的文件，而不是由“exclude”选项排除的文件。您的“包含”选项仅包括 .ts 和 .tsx 文件，但不包括 .js 文件

将“**/*.js”添加到包含的 glob 列表中，它应该可以工作。

【讨论】：