如何为 React 配置 VSCode jsconfig？

Question

我正在尝试让 VSCode 与我的 React 项目顺利配合。我指的是单击组件并进入内部、查看组件或建议自动完成（智能感知）的功能。

到目前为止我有这个：

{
  "compilerOptions": {
      "module": "es6",
      "target": "es2019",
      "jsx": "react",
      "baseUrl": ".",
      "paths": {
        "@Reducers/*": ["./src/reducers/*"],
        "@Selectors/*": ["./src/selectors/*"],
        "@Components/*": ["./src/components/*"],
        "@App/*": ["./src/components/App/*"],
        "@Footer/*": ["./src/components/Footer/*"],
        "@Header/*": ["./src/components/Header/*"],
    }
  },
  "include" : ["src/**/*"],
  "exclude": ["node_modules", "dist", "config", ".vscode"]
}

我不使用 CRA。

知道为什么不起作用吗？任何帮助，将不胜感激。预先感谢您并致以问候

编辑：似乎使用 module:commonjs 而不是 es6 效果更好，知道为什么吗？我正在使用 es6 导入！

edit2：原因解释如下： https: //github.com/Microsoft/vscode/issues/24715

Answer 1

我们需要有关您的项目的更多信息。但是，关于绝对路径的最大问题是基本 url。

如果您使用过 Webpack，请阅读Webpack - Alias。然后也读一下这个。Github CRA 路径问题

例子

我用过这个。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

如果您有根路径，则很容易更改路径。所以我don't use multiple '@' pahts也推荐这样做。

参考文献

• Webpack - https://webpack.js.org/configuration/resolve/#resolvealias
• CRA：Github - https://github.com/facebook/create-react-app/issues/5118