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月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
33 0
|
2月前
|
前端开发
Vue3/React 动态设置 ant-design/icons 图标
Vue3/React 动态设置 ant-design/icons 图标
60 1
|
2月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
79 0
|
1月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
|
21天前
|
存储 前端开发 API
React 实现文件分片上传和下载
在当今的前端开发中,处理文件流操作已经成为一个常见的需求。无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据。而随着文件大小的增加和网络传输的限制,文件分片上传和下载逐渐成为了提升性能和用户体验的必备技术。
|
1月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
1月前
|
前端开发 JavaScript API
Github 上 8 个很棒的 React 项目
Github 上 8 个很棒的 React 项目
|
2月前
|
前端开发 开发工具 git
React项目包结构的作用
React项目包结构的作用
20 0
|
2月前
|
前端开发
React 中 react-i18next 切换语言( 项目国际化 )
React 中 react-i18next 切换语言( 项目国际化 )
36 0
|
2月前
|
前端开发 应用服务中间件 数据安全/隐私保护
部署React项目到云服务器(步骤清晰)
部署React项目到云服务器(步骤清晰)

相关产品

  • 云迁移中心