Webpack resolve.alias 不适用于 VS Code IntelliSense答案

【问题标题】：Webpack resolve.alias does not work with VS Code IntelliSenseWebpack resolve.alias 不适用于 VS Code IntelliSense
【发布时间】：2018-02-08 13:04:58
【问题描述】：

我希望我的项目包含 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 没有触发？

【问题讨论】：

你赢了吗？
你能解释一下你的意思吗？
把你的jsconfig.json放在根目录下或者指定baseUrl为'.././'。

标签： javascript reactjs webpack visual-studio-code

【解决方案1】：

尝试将 jsconfig 更改为：

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

我不知道究竟是为什么，但是没有星星它对我不起作用。

【讨论】：

欣赏答案，但这对我没有用。

【解决方案2】：

对我来说，问题是确保我的 baseUrl 以及我的路径是正确的，我使用 ./ 作为我的项目的根目录，但随后错误地将我的 javascript 文件夹（这是一个 rails 项目）指定为./javascript/some_module 而不是 ./app/javascript/some_module。

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

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

【讨论】：