Webpack的resolve.alias与VS Code IntelliSense不兼容

Question

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

一开始我遇到了很多问题，但在搜索网络和许多GitHub Issues之后，我找到了一些帖子，这些帖子帮助我解决了我的问题。

导入工作了，但是我的问题是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 Code: 1.20

Windows 10

有人知道缺少什么吗？为什么 IntelliSense 没有触发？

- AO19

---

你成功了吗？ - Sergio Nikolaev

你能解释一下你的意思吗？ - AO19

将您的jsconfig.json放在根目录中，或将baseUrl指定为'.././'。 - Nikolai Hegelstad

Answer 1

尝试将jsconfig更改为以下内容：

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

我不知道为什么，但是没有星号的话对我来说无法工作。

- Felipe

---

感谢您的回答，但那并没有解决我的问题。 - AO19

Answer 2

对我来说，问题在于确保我的baseUrl和路径正确。我在项目的根目录使用了./，但是错误地将我的JavaScript文件夹（这是一个Rails项目）指定为./javascript/some_module而不是./app/javascript/some_module。

此外，请确保使用排除选项以避免引用node_modules：

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

- Smitty