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，请阅读shorthand。然后再读一遍。 Webpack - Alias

示例

我用了这个。

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

const path = require('path');

// Webpack Config
export default {
  // ...
  resolve: {
    alias: {
      ['@']: path.join(root, 'src')
    }   
  }
}

如果您具有根路径，则很容易更改路径。因此，我也建议don't use multiple '@' pahts。

参考

Webpack-Github CRA Path Issues
CRA：Github-https://webpack.js.org/configuration/resolve/#resolvealias

Answer 2

您需要为ReactJ安装扩展，例如：WebInvoke(BodyStyle =WebMessageBodyStyle.Wrapped)或ES7 React/Redux/GraphQL/React-Native snippets。尝试这两个。

Answer 3

最后的解决方案是使用模块：commonjs而不是模块：es6

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

报价： “在jsconfig中，模块选项仅更改路径的解析方式”

如何为React配置VSCode jsconfig？

3 个答案:

示例

参考