reactjs - 你如何为 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 导入!

编辑2:原因解释如下:
https://github.com/Microsoft/vscode/issues/24715

Answer 1

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

如果您使用过 Webpack，请阅读 Webpack - Alias .然后也读这个。 Github CRA Path Issues

例子

我用过这个。

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