专栏首页前端皮小蛋「开发提效」从页面直接打开代码文件

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

背景

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

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

  • 搜索页面关键字
  • 页面路由
  • 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

最后

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

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

本文分享自微信公众号 - 前端皮小蛋(gh_e69260c16440),作者:南山皮小蛋

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成...

    EasyNVR
  • 程序员的你是否熟练掌握Chrome开发者工具?

    回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

    wblearn
  • 【干货】Chrome插件(扩展)开发全攻略

    严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码...

    winty
  • 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)

    相信你看到这篇文章的时候已经阅读了上篇文章的开发这个小程序的准备工作,如果你准备好了,那接下来让我们一起开始吧!

    Tz一号
  • 微信小程序入门教程之三:脚本编程

    今天,接着往下讲,教大家为小程序加入 JavaScript 脚本,做出动态效果,以及如何跟用户互动。学会了脚本,就能做出复杂的页面了。

    ruanyf
  • 腾讯公测云开发低码!全网首篇实战评测

    听说腾讯的新产品『 云开发低码 』即将开放公测了,怀着无比激动的心情,鱼皮立刻去官网申请并成功拿到了公测资格,然后使用它开发了一个小程序,并且通过 2020 T...

    程序员鱼皮
  • 目录内文件名导出到Excel文件

    1、打印文件夹列表时可以包含其他列。 2、打印文件列表时,可以包含标准文件信息,如文件名,扩展名,类型,所有者和属性以及可执行文件信息(EXE,DLL,OCX)...

    云深无际
  • 构建用于生产的React静态化单页面服务 原

    React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

    随风溜达的向日葵
  • 效率提升50%!基于Serverless的视频云运营系统改造实践(上)

    之前,团队陷入不断的业务逻辑接口开发中,难度不大,需求很多,沟通流程烦,整体效率低。针对需求方多是开发人员的特点,我们想改变开发模式,不仅提高自身效率,也让需...

    腾讯云serverless团队
  • Android 和 Webview 如何相互 sayHello(一)

    在移动时代 Web 的开发方式逐渐从 PC 适配时代转向 Hybird 的 Webview。以前,我们只需要了解一下 PC Chrome 提供的几个操作行为,比...

    villainhr
  • 微信小程序入门教程之四:API 使用

    上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本。有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面。本篇就介...

    ruanyf
  • React Native程序调试

    在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

    xiangzhihong
  • React Native开发之调试

    在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

    xiangzhihong
  • RN沙龙 | 携程是如何做React Native优化的

    赵辛贵,携程无线开发高级技术经理,目前主要负责React Native框架在携程内部的使用推广和性能优化 React Native(下文简称RN)开源已经一年...

    携程技术
  • 携程React Native实践

    React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文...

    xiangzhihong
  • 微信全面调整分享能力:开发者应该注意什么?

    知晓君
  • React Native调试心得

    在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

    xiangzhihong
  • 由webpack按需加载来谈一谈慕课网涉嫌抄袭开源项目的事件

    对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡...

    程序员十三
  • Webpack实战-构建离线应用

    你的网页性能优化的再好,如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术,让资源在第一次被加载后缓存在本地,下次访问它时就直接返回本地的文件,...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券