VSCode does a great job with autosuggesting imports, however inside a (Lerna) monorepo it only suggests relative paths from one package to another, for example:

import example from '../../../@scope/example/lib/index.html'

I need to refer to other packages using their package names:

import example from '@scope/example';

My jsconfig.json which is at the root of my monorepo:

{
  "pilerOptions": {
    "target": "es6",
    "jsx": "react"
  },
  "include": ["**/src/**/*.js"],
  "exclude": [
    "**/node_modules/*",
    "**/dist/*",
    "**/coverage/*",
    "**/demo/*",
    "**/lib/*",
    "**/public/*"
  ]
}

Is there any way to get the correct autopletion in VSCode?

Note: There is a plugin available, but it only works with .ts files.

VSCode does a great job with autosuggesting imports, however inside a (Lerna) monorepo it only suggests relative paths from one package to another, for example:

import example from '../../../@scope/example/lib/index.html'

I need to refer to other packages using their package names:

import example from '@scope/example';

My jsconfig.json which is at the root of my monorepo:

{
  "pilerOptions": {
    "target": "es6",
    "jsx": "react"
  },
  "include": ["**/src/**/*.js"],
  "exclude": [
    "**/node_modules/*",
    "**/dist/*",
    "**/coverage/*",
    "**/demo/*",
    "**/lib/*",
    "**/public/*"
  ]
}

Is there any way to get the correct autopletion in VSCode?

Note: There is a plugin available, but it only works with .ts files.

• javascript
• import
• visual-studio-code
• lerna
• monorepo

• Have you tried configuring anything so far, such as creating a tsconfig or jsconfig for example? – Matt Bierner Commented Dec 10, 2018 at 19:18
• @MattBierner I've added my jsconfig.json file to the question. – Undistraction Commented Dec 11, 2018 at 10:20

1 Answer 1

You can configure paths in a jsconfig.json to let VS Code's tooling know how to resolve @/ paths.

In your jsconfig.json, add:

{
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
       "@scope/example/*": [ "./path/to/scope/example/*" ]
    }
  },
   "exclude": [
     "node_modules"
  ]
}

You can configure paths to map from any path prefix to a subdirectory in your workspace. See the path mapping documentation for more details

Note that paths only effects imports of javascript or typescript files; an .html import still won't work properly