如何在 React 应用程序中启用 VS code 智能感知以进行绝对路径导入？

Question

所以，我最近创建了一个 React 应用程序，并通过根据文档更新我的项目的 jsconfig.json 添加了绝对导入（https://create-react-app.dev/docs/importing-a-component/#绝对进口）。现在我可以在我的项目中使用绝对导入，但现在 VS code 智能感知似乎被破坏了，因为我没有得到绝对路径的自动建议。谁能指出可能是什么原因吗？

Answer 1

我遵循 cra 文档并遇到了同样的问题，我找到了将

baseUrl

从

src

修改为

./src

的解决方案，希望这可以帮助你！

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src"]
}

// .eslintrc
{
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}

Answer 2

也许有人会发现它很有用 - 以下是如何处理路径别名：

• jsconfig.json

  （我们需要添加/修改 Vscode 识别导入的唯一文件）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@c/*": ["./src/components/*"],
      "@h/*": ["./src/helpers/*"],
      "~/*": ["./node_modules/*"]
    }
  }
}

• 路径别名已在

  webpack.config.js

  :
中解析

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src/'),
    '@c': path.resolve(__dirname, 'src/components/'),
    '@h': path.resolve(__dirname, 'src/helpers/'),
    '~': path.resolve(__dirname, 'node_modules/')
  }
},

现在，当我键入时，例如，

@c/

，Vscode 会正确提供自动完成提示，显示

src/components

文件夹的内容，或者当我“按住 Ctrl 键单击”导入

@c/Navbar

时，文件

src/components/Navbar.js

会得到打开，一切正常。

感谢之前回复的作者提供的关于

jsconfig.json

的提示。

Answer 3

您好，只是在此处添加答案，因为我一直在使用当前使用的模板来解决这个问题。

查看这个问题，解决方案是添加一个新的

jsconfig.json

属性：

{
    "compilerOptions": {
        "module": "es6"
    }
}

添加此选项后，智能感知能够检测到我的类的方法和道具。