開發提效」從頁面直接打開代碼文件

背景

在平時的開發中，快速定位需求所在的代碼文件，是十分常見的需求。

通常來講，常見的定位源碼的方式有：

• 搜索頁面關鍵字
• 頁面路由
• 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/rea...

Vue 項目該如何配置

Vue Devtools 在 4.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/...

3. 把編輯器的路徑加入到環境變量PATH中

選擇 install 'code' command in PATH 便可.

相關原理探究

篇幅有限，爲了更好的閱讀體驗，具體原理能夠參考以下文章：

🎉我點了頁面上的元素，VSCode 乖乖打開了對應的組件？原理揭祕。
https://juejin.cn/post/690146...

最後

快速定位到代碼所在位置，必定程度上能提升咱們的開發效率，專一在更有價值的事情上。