如何让 VSCode 在导入中解析“@”

Question

我在一个使用 Webpack 的 Vue.js 项目中工作。许多导入使用@ 作为src 目录的别名。如何配置 VSCode 以解析别名并使智能感知与这些导入一起工作？

我在网上的很多地方都找到了如何在 VSCode 中设置别名，使用 jsconfig.json 或 tsconfig.json。我已尝试在这两个文件中进行配置，但似乎没有任何效果。

我的 jsconfig.json：

{
  "compilerOptions": {
    "target": "es6",
    "allowSyntheticDefaultImports": false,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

我希望 VSCode 能够解析路径中的别名，从而使智能感知和窥视定义工作。

Answer 1

在我当前的项目中，我在根目录中有一个jsconfig.json，其中包含：

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "exclude": ["node_modules", "dist", "docs"]
}

它对我有用。

我不知道 moduleResolution 在你的 conf 中到底做了什么，而我的 baseUrl 是我的根文件夹。

vs代码的相关文档：https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases

试试看效果好不好？