在 VS 代码中：[ts] 找不到模块 '@src/xxx'

Question

所以，我正在使用这个tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "module": "ES6",
    "moduleResolution": "node",
    "outDir": "./lib/",
    "paths": {
      "@src/*": ["src/*"]
    },
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES6"
  },
  "include": [
    "global.d.ts",
    "src/**/*.ts"
  ]
}

在哪里可以看到别名 @src 是为我的代码定义的。

tsc/webpack 构建所有内容都没有问题，但是在 VS Code 中编辑时，当我将某些内容导入为时，我无法摆脱此错误消息

import { xxx } from '@src/xxx';

有同样问题的人吗？对我来说，看到这个很奇怪，因为如果它正确编译/构建（来自 tsc 和 webpack），这意味着配置是正确的。那么为什么 VS Code 会显示这个错误信息呢？这很烦人，但我想解决它。

tsconfig.json 文件也使用标准名称（tsc 没有自定义 -p 选项）所以，VS Code 应该能够自动读取它，对吧？还是需要对 IDE 进行任何额外的配置？

Answer 1

我有同样的问题。在我运行 Cmd+Shift+P > Typescript: Restart TS Server 的情况下，技巧和错误消息消失了

Answer 2

很久之后（我已经忘记了这个问题......）我让它工作了（不知道当原始问题发布时是否可能）。

我会在这里写下我所做的，以防它可以帮助其他人:)

基本上，我需要以下内容：

1。在tsconfig.json 中定义路径

这是在原始问题中，但也包括在此处以完成：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src": ["src"],
      "@src/*": ["src/*"],
    }
}

2。安装tsconfig-paths

npm i -D tsconfig-paths

如果您正在使用 webpack，请添加 tsconfig-paths-webpack-plugin 并将插件添加到您的 webpack.config.js 中，如下所示：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    plugins: [new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })],
  },
};

如果您使用的是 NextJS，插件的配置在next.config.js 中如下所示：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  webpack: (config) => {
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })
    );

    return config;
  },
};

---

我不确定是否只是改进了 VS Code（因此我的问题在我发布问题后的一年半内自动修复），但这是我现在使用的并且是工作正常。希望对其他人也有帮助:)

Answer 3

现在应该开箱即用。顺便说一句，确保 jsconfig/tsconfig 中的包含指向正确的路径，即

// example:
"include": [
  "./**/*.ts",
  "./**/*.tsx"
],