react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件

简介: react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件

问题背景



  • 带@的映射路径无法用快捷键跳转到对应位置。

image.png

解决



  1. 在根目录创建@的对应映射文件,命名可以随意,为了见文知意我命名为gotoimport.js
//gotoimport.js
const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  resolve: {
    alias: {
      '@': resolve('src'),
    },
  },
};

在webstorm或者idea中设置找到文件(File)->设置(Setting)->语言与框架(Languages & Frameworks)->JavaScript->Webpack,填入gotoimport.js文件的路径。

image.png

3. 成功

image.png

注意


  1. 该方法只在webstorm或idea编辑器中生效。
  2. Vue项目同样可以在webstorm或idea中如此设置,且Vue项目在vscode编辑器还可以通过jsconfig.json配置直接实现跳转。
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules"]
}


相关文章
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
877 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
7月前
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
190 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
685 1
react项目配合diff实现文件对比差异功能
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
479 1
React项目input输入框输入自动失去焦点
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
3712 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
232 0
|
JSON 前端开发 数据处理