应如何配置 VSCode 以支持 Lerna Monorepo？

我有一个lerna https://github.com/lerna/lernamonorepo 包含很多包。

我正在努力实现以下目标：

1. 确保 VSCode 提供从一个包到另一个包的正确导入建议（基于包名称，而不是相对路径）。
2. 确保我可以“打开定义”这些导入之一并转到该文件的 src。

对于 1. 我的意思是，如果我在 package-a 中导航代码并开始键入 package-b 导出的函数，我会收到一条建议，该建议将触发添加导入： `import { example } from 'package- b'。

对于 2。我的意思是，如果我在从导入该文件的不同包中导航该文件时，按住“package-b”导出的函数的名称，我将被带到“/packages/namespace/package/b” /src/file-that-c​​ontains-function.js',

我的（lerna）monorepo 的结构是标准的，例如这里是一个“组件”包，发布为@namespace/components.

- packages
    - components
       - package.json
       - node_modules
       - src
         - index.js
         - components
           - Button
             - index.js
             - Button.js
       - es
         - index.js
         - components
           - Button
             - index.js
             - Button.js

请注意，每个组件都由一个目录表示，以便在必要时它可以包含其他组件。在这个例子中，packages/components/index出口Button作为命名导出。文件被转换为包的/es/目录。

默认情况下，VSCode 为导入提供自动建议，但它会被这种结构混淆，并且如果需要使用 monorepo 中的不同包Button例如，将自动建议以下所有导入路径：

• packages/components/src/index.js
• packages/components/src/Button/index.js
• packages/components/src/Button/Button.js
• packages/components/es/index.js
• packages/components/es/Button/index.js
• packages/components/es/Button/Button.js

然而，这些都不合适，因为它们将呈现为从导入文件到导入文件的相对路径。在这种情况下，以下导入是正确的导入：

import { Button } from '@namespace/components'

将排除添加到项目中jsconfig.json对建议路径没有影响，甚至不会删除以下位置的建议/es/*:

{
  "compilerOptions": {
    "target": "es6",
  },
  "exclude": [
    "**/dist/*",
    "**/coverage/*",
    "**/lib/*",
    "**/public/*",
    "**/es/*"
  ]
}

使用“compilerOptions”显式添加路径也无法在文件之间建立正确的关系：

{
  "compilerOptions": {
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "@namespace/components/*": [
        "./packages/namespace-components/src/*.js"
      ]
    }
  },
}

目前，Cmd/单击从不同包导入无法打开任何内容（未找到定义）。

我应该如何配置 VSCode 以便：

1. VSCode 使用命名空间包作为导入值自动建议从 monorepo 中的其他包导入。
2. 使用“打开定义”将我带到该文件的 src。

根据要求，我在根目录中有一个 babel 配置：

const { extendBabelConfig } = require(`./packages/example/src`)

const config = extendBabelConfig({
  // Allow local .babelrc.js files to be loaded first as overrides
  babelrcRoots: [`packages/*`],
})

module.exports = config

其中延伸：

const presets = [
  [
    `@babel/preset-env`,
    {
      loose: true,
      modules: false,
      useBuiltIns: `entry`,
      shippedProposals: true,
      targets: {
        browsers: [`>0.25%`, `not dead`],
      },
    },
  ],
  [
    `@babel/preset-react`,
    {
      useBuiltIns: true,
      modules: false,
      pragma: `React.createElement`,
    },
  ],
]

const plugins = [
  `@babel/plugin-transform-object-assign`,
  [
    `babel-plugin-styled-components`,
    {
      displayName: true,
    },
  ],
  [
    `@babel/plugin-proposal-class-properties`,
    {
      loose: true,
    },
  ],
  `@babel/plugin-syntax-dynamic-import`,
  [
    `@babel/plugin-transform-runtime`,
    {
      helpers: true,
      regenerator: true,
    },
  ],
]

// By default we build without transpiling modules so that Webpack can perform
// tree shaking. However Jest cannot handle ES6 imports becuase it runs on
// babel, so we need to transpile imports when running with jest.
if (process.env.UNDER_TEST === `1`) {
  // eslint-disable-next-line no-console
  console.log(`Running under test, so transpiling imports`)
  plugins.push(`@babel/plugin-transform-modules-commonjs`)
}

const config = {
  presets,
  plugins,
}

module.exports = config

在你的情况下，我会利用lerna https://yarnpkg.com/lang/en/docs/workspaces/结合纱线工作区 https://yarnpkg.com/lang/en/docs/workspaces/。 跑步时yarn install，您的所有包都链接在您的@namespace在全球范围内node_modules文件夹。这样，您就获得了 IntelliSense。

我在这里设置了一个示例存储库：https://github.com/flolude/stackoverflow-lerna-monorepo-vscode-intellisense https://github.com/flolude/stackoverflow-lerna-monorepo-vscode-intellisense

你只需要添加"useWorkspaces": "true"给你的lerna.json

lerna.json

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

剩下的只是适当的命名：

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"
  }
  // ...
}

然后您可以执行以下操作：

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

// your logic

自动导入自@namespace

不幸的是，我找不到一种方法可以在 VSCode 中使用 Javascript Monorepo 实现此功能。但您可以做一些事情：

1. 使用打字稿（tutorial https://medium.com/@caludio/how-to-use-module-path-aliases-in-visual-studio-typescript-and-javascript-e7851df8eeaa, 其他教程 https://youtu.be/EoqzOEZIzhg)
2. Use 模块别名 https://www.npmjs.com/package/module-alias
3. Add import {} from '@namespace/components' to the top of your file
4. Use Auto Import https://marketplace.visualstudio.com/items?itemName=steoates.autoimport Extension