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

Posted 2023-03-15

【中文标题】VSCode 使用自定义 webpack 解析自动完成 javascript 导入的对象

【英文标题】：VSCode autocomplete javascript imported objects with custom webpack resolve

【发布时间】：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 进行自动完成，但自动完成无法正常工作。

【参考方案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 配置的唯一问题是它似乎让事情有点滞后，但并不多。