在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文件也使用标准名称（-p没有自定义tsc选项），因此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进行了改进（因此，自发布问题以来的一年半时间内，我的问题已自动修复），但这就是我现在正在使用的工作正常。希望对其他人也有帮助：）