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"]
}


相关文章
|
1月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
62 3
使用vite搭建一个React项目!真香!
|
1月前
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
105 1
|
20天前
|
前端开发 JavaScript UED
🎬JSF 与 Ajax:打造瞬间响应的魔法界面!🚀 用户输入即刻,数据交互如梦幻泡影般呈现!
【8月更文挑战第31天】在现代Web应用中,异步数据交互是提升用户体验的关键。JavaServer Faces (JSF) 作为标准Java Web框架,结合Ajax技术,可轻松实现页面异步更新与数据交互。本文通过示例代码介绍如何在JSF中使用Ajax组件(如`f:ajax`)及后端处理方法实现异步功能,并结合JavaScript处理复杂交互,帮助开发者提升Web应用体验。
31 0
|
1月前
|
前端开发 JavaScript API
React学习-初始化react项目
【8月更文挑战第16天】
|
3月前
|
前端开发
react框架对Excel文件进行上传和导出
react框架对Excel文件进行上传和导出
|
3月前
|
前端开发 NoSQL Java
杨校老师项目之基于SpringBoot+React框架开发的医院挂号管理系统
杨校老师项目之基于SpringBoot+React框架开发的医院挂号管理系统
58 0
|
3月前
|
前端开发
React实现一个excel文件导出
React实现一个excel文件导出
65 0
|
4月前
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
43 0
|
1月前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
40 0
|
2月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
35 1

热门文章

最新文章