你如何為 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 。 試試這兩個。