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

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

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

relj7zay

relj7zay1#

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

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

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

字符串

kq4fsx7k

kq4fsx7k2#

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

  • 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-click”导入@c/Navbar时,文件src/components/Navbar.js被打开,一切都按预期工作。
感谢上一个回复的作者关于jsconfig.json的提示。

fykwrbwg

fykwrbwg3#

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

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

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

相关问题