学习
实践
活动
专区
工具
TVP
写文章
专栏首页前端皮小蛋「开发提效」从页面直接打开代码文件

「开发提效」从页面直接打开代码文件

背景

在平时的开发中,快速定位需求所在的代码文件,是十分常见的需求。

一般来说,常见的定位源码的方式有:

  • 搜索页面关键字
  • 页面路由
  • Devtool 中的组件名

这些方式往往效率都不是很高,而且可能需要很长的操作路径才能达到目的, 比较麻烦。

如果通过点击页面,能直接打开代码所在的文件, 岂不是美滋滋 ?

今天我们就来探究一下:如何实现一键跳转

今天的主要内容:

  • React 项目该如何配置
  • Vue 项目该如何配置
  • 相关原理探究

正文

React 项目该如何配置

对于 React 项目,有这样一个款插件:react-dev-inspector

它的神奇之处就在于:

可以从页面上识别 react 组件,直接跳转到本地 IDE 的代码片段上。

如何配置

1. 安装

npm i -D react-dev-inspector

2. 引入到对应的组件中

import React from 'react'
import { Inspector, InspectParams } from 'react-dev-inspector'

const InspectorWrapper = process.env.NODE_ENV === 'development'
  ? Inspector
  : React.Fragment

export const Layout = () => {
  // ...
  return (
    <InspectorWrapper
      keys={['control', 'shift', 'command', 'c']}
      disableLaunchEditor={false}
      onHoverElement={(params: InspectParams) => {}}
      onClickElement={(params: InspectParams) => {}}
    >
      <YourComponent>
       // ...
      </YourComponent>
    </InspectorWrapper>
  )
}

babel 配置

// babelrc.js
export default {
  plugins: [
    'react-dev-inspector/plugins/babel',
  ],
}

webpack 配置

// webpack.config.ts
import type { Configuration } from 'webpack'
import { launchEditorMiddleware } from 'react-dev-inspector/plugins/webpack'

const config: Configuration = {
  devServer: {
    before: (app) => {
      app.use(launchEditorMiddleware)
    },
  },
}

另外, 这个插件也支持 Vite:

// vite.config.ts:
import { defineConfig } from 'vite'
import { inspectorServer } from 'react-dev-inspector/plugins/vite'

export default defineConfig({
  plugins: [
    inspectorServer(),
  ],
})

配置编辑器

这个时候还不足以打开编辑器并定位到具体的位置,因为在环境中还不能调动编辑器,在 vs code 中做如下操作即可。

  • 打开 vscode
  • ctrl + shift + p,输入shell command:

选择 install 'code' command in PATH即可.

you can use window.REACT_DEV_INSPECTOR_TOGGLE() to toggle inspector. 也可以使用该方法切换调试模式。

更多配置信息可以参考:https://github.com/zthxxx/react-dev-inspector

Vue 项目该如何配置

Vue Devtools4.0 版本之后, 也提供了一个这样的功能:

一键在编辑器中打开组件的源码文件

实现以上 devtool 的功能配置, 只需要简单的三步:

1. 安装 launch-editor-middleware

npm i -D launch-editor-middleware

2. 更改webpack devServer配置

const openInEditor = require('launch-editor-middleware');

module.exports = {
  devServer: {
    before: (app) {
      app.use('/__open-in-editor', openInEditor('code'));
    }
  }
}

before方法中,给devServer注册一个/__open-in-editor的 HTTP 路由,并在路由的回调中通过launch-editor-middleware唤起编辑器。

openInEditor方法的参数, code 表示编辑器是 VS Code。

更多支持的编辑器和参数可以参考:https://github.com/yyx990803/launch-editor#supported-editors

3. 把编辑器的路径加入到环境变量PATH中

选择 install 'code' command in PATH即可.

相关原理探究

篇幅有限,为了更好的阅读体验,这里就不赘述。

具体原理可以参考如下文章:

?我点了页面上的元素,VSCode 乖乖打开了对应的组件?原理揭秘。https://juejin.cn/post/6901466406823575560#heading-8

最后

快速定位到代码所在位置,一定程度上能提高我们的开发效率,专注在更有价值的事情上。

今天的内容就这么多, 希望对大家有所帮助, 谢谢。

文章分享自微信公众号:
前端皮小蛋

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:南山皮小蛋
原始发表时间:2021-04-19
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 前端工程实践之可视化搭建系统(一)

    随公司业务不断发展,营销活动、广告、页面改版等需求日益倍增,靠纯人工撸代码已经无法跟上需求增长速度。加班?招人?显得不够明智,也不够前端,提效也就成为了关键。如...

    政采云前端团队
  • 04 提效工具之swagger&yapi转换可视化部署

    上两篇文章我们介绍了swagger&yapi接口文档转换jmeter使用的方式,第三篇文章实现了yapi接口登录,已经可以覆盖大多数公司的接口文档转换,可以帮助...

    flowerdrop
  • 2021 GMTC北京站 - 大前端工程提效分享与总结

    2021GMTC一共分为16个专场演讲,几乎涵盖了目前大前端所有领域,感谢公司和秋实提供的机会,在7月4日有幸参加了大前端工程提效专项的分享,本次专场分为以下四...

    五月君
  • IntelliJ IDEA 2020.3正式发布,年度最后一个版本很讲武德

    2020庚子年是载入史册的一年,但对Jetbrain公司来说却是它的20周年。上个较大版本的发布,要追溯到8月份了:

    YourBatman
  • 【方向盘】工具提效:Sublime Text 4的常用快捷键合集

    你好,这里是Java方向盘,我是方向盘(YourBatman),坐稳扶好,开始发车。

    YourBatman
  • H5 基础脚手架:极速构建项目

    使用该插件,可以在编辑过程中去计算 loader 跟 plugin 的运行时间,针对性的看下某个环境构建速度过慢的原因

    Cookieboty
  • 精读《对低代码搭建的理解》

    在说低代码搭建之前,首先要理解什么是搭建(本文搭建指通过 Web 交互搭建一个自定义的新页面)。

    黄子毅
  • 【告别复制粘贴】动态模板生成小技巧

    ? 这是第 75 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~

    政采云前端团队
  • Supernova, 一款将设计图生成 App UI辅助工具

    众所周知,一款移动端App的诞生,需要多方人员的配合。先要做出设计,之后写代码时若想高度还原设计还需要再花费许多人力。

    Qson
  • 【方向盘】升级到IDEA 2022.1版本后,我把Maven Helper卸载了

    你好,这里是Java方向盘,我是方向盘(YourBatman),坐稳扶好,开始发车。

    YourBatman
  • 几款好用到爆的 JSON 处理工具,极大提高效率!

    JSON是一种流行的轻量级数据交换格式,在网络上已很常见。众所周知,JSON 让开发人员易于使用,又让机器易于解析和生成。

    程序猿川子
  • Flutter 在哈啰出行 B 端创新业务的实践

    Flutter 在我们团队的起步算是比较晚的,直到 Flutter 要出 1.0 版本前夕才开始实践。

    稻子
  • 【Web技术】1498- 基于 Web Components 的新一代跨框架 UI 组件库

    新一代基于 Web Components 的跨框架 UI 组件库 Quark ,输出标准的 Custom Element,组件可以同时在 React、Vue、P...

    pingan8787
  • 爆款预订,2022 年最值得关注的后台框架 —— Fantastic-admin

    Fantastic-admin 做为一款开箱即用的 Vue 中后台管理系统框架,距离首次面向大众已经过去一年多的时间了,在这一年多的时间里,我们服务了数百个团队...

    胡尐睿丶
  • React Native在美团外卖客户端的实践

    美团研发团队基于React Native开源框架,并结合美团业务场景,定制化开发了一套动态化方案。本文主要分享该动态化方案在美团外卖业务场景中的实践,希望能给大...

    美团技术团队
  • 让你 vscode 写代码效率更高的技巧

    vscode 是我们写代码常用的编辑器,它的功能很多,但其实我们有很多功能都没用到,这篇文章就是想梳理下那些可能你不知道的但是却对效率提高很有帮助的一些技巧。

    @超人
  • 一种基于 “领域模型” 的建站模式

    前端发展至今,研发同学们为了解决提效问题,衍生出多种建站模模式,核心思路是:把多而重复的工作尽可能磨平,只针对定制化需求进行开发。这里分享一种新的建站模式 - ...

    哲玄
  • Go语言学习路线 - 6.提效篇:不懈地追求提升研发效率

    在入门篇与基础篇之后,我选择做了这一讲提效篇。而在提效篇的推出之前,我也开启Go语言技巧系列的更新,着重分享一些具体的工程化实例,包括错误处理、Go Modul...

    junedayday

扫码关注腾讯云开发者

领取腾讯云代金券