如何在 React 应用程序中为绝对路径导入启用 VS 代码智能感知?

Question

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

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的提示.