如何在Lerna Monorepo中修复VSCode导入路径建议？

Question

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:

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

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

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

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:

{
  "compilerOptions": {
    "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