javascript - 如何使 VSCode 在导入中解析 "@"

Question

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

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

我的 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 code 的相关文档:https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases

试一试，告诉我效果是否更好？