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

g6ll5ycj  于 2023-11-21  发布在  React
关注(0)|答案(3)|浏览(151)

所以,我最近创建了一个React应用程序,并根据文档(https://report-react-app.dev/docs/importing-a-component/#absolute-imports)更新了我项目的jslog.json,添加了绝对导入。现在我可以在我的项目中使用绝对导入,但现在VS代码智能感知似乎被破坏了,因为我没有获得绝对路径的自动建议。有人能指出原因吗?

relj7zay

relj7zay1#

我按照cra文档和遭受同样的问题,我找到了解决方案,修改baseUrlsrc./src,希望这可以帮助你!

  1. // jsconfig.json
  2. {
  3. "compilerOptions": {
  4. "baseUrl": "./src"
  5. },
  6. "include": ["src"]
  7. }
  8. // .eslintrc
  9. {
  10. "settings": {
  11. "import/resolver": {
  12. "node": {
  13. "paths": ["src"]
  14. }
  15. }
  16. }
  17. }

字符串

展开查看全部
kq4fsx7k

kq4fsx7k2#

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

  • jsconfig.json(我们需要添加/修改Vscode以识别导入的唯一文件):
  1. {
  2. "compilerOptions": {
  3. "baseUrl": ".",
  4. "paths": {
  5. "@/*": ["./src/*"],
  6. "@c/*": ["./src/components/*"],
  7. "@h/*": ["./src/helpers/*"],
  8. "~/*": ["./node_modules/*"]
  9. }
  10. }
  11. }

字符串

  • webpack.config.js中解析的路径别名:
  1. resolve: {
  2. alias: {
  3. '@': path.resolve(__dirname, 'src/'),
  4. '@c': path.resolve(__dirname, 'src/components/'),
  5. '@h': path.resolve(__dirname, 'src/helpers/'),
  6. '~': path.resolve(__dirname, 'node_modules/')
  7. }
  8. },


现在,当我输入,例如,@c/,Vscode提供自动完成提示正确,显示src/components文件夹的内容,或者当我“ctrl-click”导入@c/Navbar时,文件src/components/Navbar.js被打开,一切都按预期工作。
感谢上一个回复的作者关于jsconfig.json的提示。

展开查看全部
fykwrbwg

fykwrbwg3#

嗨,只是在这里添加一个答案,因为我一直在努力与我目前使用的模板。
查看此问题,解决方案是添加一个新的jsconfig.json属性:

  1. {
  2. "compilerOptions": {
  3. "module": "es6"
  4. }
  5. }

字符串
在添加了这个选项之后,intellisense能够检测到我的类的方法和属性。

相关问题