你如何为 React 配置 VSCode jsconfig？

Question

我正在尝试使 VSCode 与我的 React 项目顺利运行。 我指的是单击组件和内部 go 的能力，查看组件或提出自动完成的内容（智能感知）。

到目前为止我有这个：

{
  "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/*"],
    }
  }
}

const path = require('path');

// Webpack Config
export default {
  // ...
  resolve: {
    alias: {
      ['@']: path.join(root, '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

Answer 2

最后的解决方案是使用 module: commonjs 而不是 module: es6

这在这里解释： https://github.com/Microsoft/vscode/issues/24715

引用：“在 jsconfig 中，模块选项只会改变路径的解析方式”

Answer 3

您需要为 ReactJs 安装扩展，例如： ES7 React/Redux/GraphQL/React-Native snippets或Simple React Snippets 。 试试这两个。