Question

我希望我的项目包含Webpack resolve.alias选项，因此我将其添加到我的webpack.common.js配置文件中。

起初我遇到了很多问题，但在搜索网页和许多GitHub问题之后，我找到了一些帮助我解决问题的帖子。

导入如此有用，但我的问题是Visual Studios IntelliSense无法使用我声明的别名。我的设置：

我的项目目录：

+src
  -first
  -second
  +third
  | -third-one
  | -third-two
  | +third-three
  |   -third-three-one
  -jsconfig.json
  -.babelrc
-.eslintrc
-webpack.common.js

webpack.common.js

...
resolve: {
    ...
    alias: {
      first: path.resolve(__dirname, './first'),
      second: path.resolve(__dirname, './second'),
      third: path.resolve(__dirname, './third'),
      common: path.resolve(__dirname, './third/third-three/third-three-one'),
    },
  },
...

.babelrc

{
  "presets": ["es2015", "react", "airbnb"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "first": "./first",
        "second": "./second",
        "third": "./third",
        "common": "./third/third-three/third-three-one"
      }
    }]
  ]
}

jsconfig.json

...
"compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "first": ["./first"],
      "second": ["./second"],
      "third": ["./third"],
      "common": ["./third/third-three/third-three-one"],
    }
},
...

.eslintrc

...
"settings": {
    "import/resolver": {
      "webpack": {
                "config": "webpack.common.js"
      },
      "babel-module": {
        "extensions": [".js", ".jsx"]
      }
    }
  },
...

我的本案例是重要的已安装的npm模块：

"webpack": "^2.6.1",
"eslint-import-resolver-babel-module": "^4.0.0",
"eslint-plugin-import": "^2.8.0",
"babel-plugin-module-resolver": "^3.0.0",

VS代码：1.20

Windows 10

有谁知道缺少什么？为什么IntelliSense不会触发？

Answer 1

尝试将jsconfig更改为：

"compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "first/*": ["./first/*"],
      "second/*": ["./second/*"],
      "third/*": ["./third/*"],
      "common/*": ["./third/third-three/third-three-one/*"],
    }
}

我完全不知道为什么，但没有这位明星就不适合我。

Answer 2

对我来说，问题是要确保我的baseUrl和路径正确无误，我在项目的根目录中使用了./，但随后错误地指定了我的javascript文件夹（这是一个rails project）改为./javascript/some_module，而不是./app/javascript/some_module。

此外，请确保使用排除选项只是为了避免引用node_modules：

"exclude": ["node_modules", "dist", "public", "public/packs"]

Webpack resolve.alias不适用于VS Code IntelliSense

2 个答案: