How Should VSCode Be Configured To Support A Lerna Monorepo?

Edit: This is broken with the latest version of VSCode.

I finally managed to get this working reliably. You need to create a separate jsconfig.js for every package in your monorepo, for example:

• {monorepo root}/packages/some-package/jsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "jsx": "preserve",
    "module": "commonjs"
  },
  "include": ["src/**/*.js"],
  "exclude": ["src/index.js"]
}

Note that I've excluded the src/index.js file so it doesn't get offered as an import suggestion from within that package.

This setup appears to achieve:

• Intellisense import suggestions from packages instead of using relative paths.
• Go to definition to source of other packages in the monorepo.

VSCode has been pretty flaky of late, but it seems to be working.

Note this is working for a JavaScript-only monorepo (not Typescript).

In your case, I would make use of lerna in combination with yarn workspaces. When running yarn install, all your packages are linked under your @namespace in a global node_modules folder. With that, you get IntelliSense.

I've set up an example repository here: https://github.com/flolude/stackoverflow-lerna-monorepo-vscode-intellisense

You just need to add "useWorkspaces": "true" to your lerna.json

lerna.json

{
  "packages": ["packages/*"],
  "version": "0.0.0",
  "useWorkspaces": "true"
}

And the rest is just propper naming:

global package.json

{
  "name": "namespace",
  // ...
}

package.json of your component package

{
  "name": "@namespace/components",
  "main": "src/index.js",
  // ...
}

package.json of the package that imports the components

{
  "name": "@namespace/components",
  "main": "src/index.js",
  "dependencies": {
     "@namespace/components":"0.0.0"
  }
  // ...
}

Then you can do the following:

import { Component1 } from '@namespace/components';

// your logic

Automatically Importing from @namespace

Unfortunately, I couldn't find a way to make this work in VSCode with a Javascript Monorepo. But there are some things you can do:

1. Use Typescript (tutorial, other tutorial)
2. Use module-alias
3. Add import {} from '@namespace/components' to the top of your file
4. Use Auto Import Extension