VSCode 使用自定义 webpack 解析自动完成 javascript 导入的对象答案

【问题标题】：VSCode autocomplete javascript imported objects with custom webpack resolveVSCode 使用自定义 webpack 解析自动完成 javascript 导入的对象
【发布时间】：2020-09-11 07:43:40
【问题描述】：

在 vscode 上使用 javascript 并尝试导入对象时，IntelliSense 无法识别所述对象的可用属性。相反，它向我显示了文件中的所有关键字。在下面的打印中，您会看到所有这些自动完成结果都不是clientRoutes 对象的一部分。

此项目不是使用create-react-app 创建的，并且具有以下 webpack 配置：

const webpackConfig = {
  name: 'client',
  target: 'web',
  devtool: 'source-map',

  // entry: {
  //   bundle: path.resolve('src/index.js'),
  // },
  entry: ["@babel/polyfill", path.resolve('src/index.js')],

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            '@babel/plugin-proposal-object-rest-spread',
            [
              '@babel/plugin-proposal-class-properties',
              {
                'loose': true,
              }
            ],
          ]
        }
      }
    }
...
  resolve: {
    modules: [
      path.resolve('src'),
      path.resolve('src/lib'),
      path.resolve('.'),
      'node_modules',
    ],
    extensions: ['.js'],
  },
};

这是我的 jsconfig.json：

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2020",
    "moduleResolution": "node",
    "baseUrl": "."
  },
  "include": [
    "src",
    "src/lib",
  ],
  "exclude": ["node_modules"]
}

我尝试在 jsconfig.json 上为 module 和 target 选项设置不同的选项，但没有帮助。自动完成显然适用于从根文件夹上的文件导入，所以我猜它找不到我正在导入的文件，因为我添加了 webpack 解析规则，但它应该与 jsconfig.json 上设置的 include 属性一起使用.

项目运行良好，我正在使用另一个编辑器，但我决定从现在开始使用 vscode 进行自动完成，但自动完成无法正常工作。

【问题讨论】：

标签： javascript webpack visual-studio-code babeljs javascript-intellisense

【解决方案1】：

不确定是什么原因，请尝试查看 VS Code 网站上的帮助页面： Why am I not seeing method and variable suggestions?

【讨论】：

【解决方案2】：

所以我发现解决方案是在 jsconfig.json 文件中使用 paths 属性。我在发布此问题之前尝试过此操作，但没有成功，可能是因为我错过了通配符或正斜杠之类的东西。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*" : ["src/*", "src/libs/*", "./*"]
    }
  },
  "exclude": ["node_modules"]
}

所以基本上你使用paths 属性为你的路径创建别名。它接受一个数组，因此我使用了通配符 (*)，现在当导入文件时，IntelliSense 将检查这三个文件夹以找到它。此外，exclude 选项仍然存在，因此 IntelliSense 不会检查 node_modules 文件夹。 include 选项用于告诉 IntelliSense 应该考虑哪些文件夹，但您仍然必须相对于 baseUrl 引用它们。我对这个paths 配置的唯一问题是它似乎让事情有点滞后，但并不多。

【讨论】：