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效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
1153 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
362 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
前端开发 安全 UED
React 文件预览组件:File Preview
在现代Web应用中,文件上传和预览功能至关重要。本文基于React库,详细介绍如何构建文件预览组件,涵盖文件选择器、图片预览、文件大小限制及多种文件类型支持。通过实际代码示例,解析常见问题如跨域请求、文件路径处理和状态管理,并提供解决方案。帮助开发者提升用户体验,减少误操作。
1141 2
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
1021 1
react项目配合diff实现文件对比差异功能
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
4867 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
761 2
|
缓存 前端开发 JavaScript
在react项目中实现按钮权限createContext && useContext
文章介绍了在React项目中如何使用`createContext`和`useContext`来实现按钮级别的权限控制。
401 0
|
JSON 前端开发 数据处理