CODEWITHSUNDEEP
javascriptwebpackvisual-studio-codebabeljsjavascript-intellisense
Tiago Mendonça
Tiago Mendonça

Reputation: 199

VSCode autocomplete javascript imported objects with custom webpack resolve

When using javascript on vscode and trying to import an object, IntelliSense does not recognize the available properties of said object. Instead it shows me all the keywords in the file. In the print bellow you see all these autocomplete results are not part of the clientRoutes object.enter image description here

Error

This project was not created with create-react-app, and has these webpack configurations:

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'],
  },
};

And this is my jsconfig.json:

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

I tried setting different options for module and target options on jsconfig.json but it did not help. Autocomplete works fine for imports from files on the root folder apparently, so I guess it is not finding the files I am importing because of the webpack resolve rules that I added, but it should work with the include property set on jsconfig.json.

The project works fine, I was using another editor but I decided to use vscode from now on for the autocomplete, but autocomplete is not working as it should.

Upvotes: 1

Views: 4096

Answers (2)

Tiago Mendonça
Tiago Mendonça

Reputation: 199

So I found that the solution for this is to use the paths property on the jsconfig.json file. I tried this before posting this question but it didn't work, probably because I missed a wildcard or a forward slash or something.

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

So basically you use the paths property to create aliases for your paths. It accepts an array so I used a wildcard (*), and now when a file is imported IntelliSense will check these three folders to find it. Also the exclude option is still there, so IntelliSense will not check the node_modules folder. The include option is used to tell which folders IntelliSense should consider, but you still have to reference them relative to baseUrl. My only problem with this paths configuration is that it seems it made things a little bit laggy, but not much.

Upvotes: 4

Chems Eddine
Chems Eddine

Reputation: 153

Not sure what the reason is, by try to check the help page on VS code website: Why am I not seeing method and variable suggestions?

Upvotes: 0

Related Questions