Skip to content

better-tcy/dom-to-code

Folders and files

NameName
Last commit message
Last commit date
Oct 22, 2022
Oct 21, 2022
Oct 26, 2022
Oct 25, 2022
Oct 27, 2022
Oct 21, 2022
Oct 21, 2022
Oct 21, 2022
Oct 24, 2022
Oct 25, 2022
Oct 25, 2022
Oct 21, 2022
Jan 3, 2023
Jan 3, 2023
Oct 21, 2022
Oct 21, 2022
Oct 22, 2022
Oct 21, 2022
Oct 27, 2022
Oct 27, 2022
Oct 21, 2022
Oct 21, 2022
Oct 21, 2022
Oct 21, 2022
Oct 22, 2022

Repository files navigation

DOM TO CODE

简体中文 | English

开发效率神器,点击 dom 直接跳到编辑器对应代码。

支持 vite/webpack + vue2/vue3/react + vscode/webstorm

npm package language gzip librariesio LICENSE stars

✨ 介绍

接手一个项目开发网页时要修改某部分,要么靠搜索,要么靠记忆找到对应代码,过程极为浪费时间。

在项目里用了 dom-to-code 插件后,对准想要修改的 dom 部分 ctrl + 按下鼠标滚轮,就会在编辑器打开对应的 dom 元素源码。

(使用 mac 触摸板的用户可以ctrl + 触摸板右键)

支持 vite/webpack + vue2/vue3/react

支持 vscode/webstorm

别人搜索你直接跳,别人加班你摸鱼。

📦 安装

npm i dom-to-code

🔨 使用

配置选项

interface Options {
  /**
   * 插件模式,默认是 vue
   */
  mode: 'vue' | 'react'

  /**
   * 引入的文件规则,vue 默认是 jsx、tsx、vue 文件,react 默认是 jsx、tsx 文件
   */
  include?: string | RegExp | string[] | RegExp[] | null

  /**
   * 排除的文件规则,默认是 node_modules 文件
   */
  exclude?: string | RegExp | string[] | RegExp[] | null
}

第一步

首先在项目入口文件(比如 index 文件或 main 文件)中引入插件初始化

import { initDomToCode } from 'dom-to-code'

// 初始化 dom-to-code
// initDomToCode()

// 推荐:只在非生产环境初始化
process.env.NODE_ENV !== 'production' && initDomToCode()

第二步

配置打包器,dom-to-code 支持 vitewebpack 打包器,以下是 vitevue-cliwebpack 里的示例(推荐只在非生产环境配置)

Vite
// vite.config.ts
import { defineConfig } from 'vite'
import vue3 from '@vitejs/plugin-vue'
import { domToCodePlugin } from 'dom-to-code/vite'

export default defineConfig({
  plugins: [
    vue3(),
    process.env.NODE_ENV !== 'production'
      ? domToCodePlugin({
          mode: 'vue',
        })
      : undefined,
  ].filter((f) => !!f)
})

Example: playgrounds/vite-vue3


Webpack
// webpack.config.js
const { domToCodePlugin } = require('dom-to-code/webpack')
module.exports = {
  /* ... */
  plugins: [
    domToCodePlugin({
      mode: 'vue'
    })
  ]
}


Vue CLI
// vue.config.js
const { domToCodePlugin, domToCodeDevServerV4, domToCodeDevServerV5 } = require('dom-to-code/webpack')

module.exports = {
  devServer: {
    // 如果你的 package.json 里的 @vue/cli-service 版本 <= 4.x.x,则使用 domToCodeDevServerV4
    // ...domToCodeDevServerV4,

    // 如果你的 package.json 里的 @vue/cli-service 版本 >= 5.x.x,则使用 domToCodeDevServerV5
    ...domToCodeDevServerV5
  },
  configureWebpack: {
    plugins: [
      domToCodePlugin({
        mode: 'vue'
      })
    ]
  }
  // 如果你使用的是chainWebpack
  // chainWebpack: (config) => {
  //   config
  //     .plugin('domToCodePlugin')
  //     .use(domToCodePlugin())
  // }
}

Example: playgrounds/webpack5-vue2


Create-react-app + react-app-rewired
// config-overrides.js
const { domToCodePlugin, domToCodeDevServerV4, domToCodeDevServerV5 } = require('dom-to-code/webpack')

module.exports = {
  webpack(config) {
    config.plugins.push(domToCodePlugin({
      mode: 'react',
    }))
    return config
  },
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost)

      // 如果你的 package.json 里的 react-scripts 版本 <= 4.x.x,则使用 domToCodeDevServerV4
      // Object.assign(config, domToCodeDevServerV4)

      // 如果你的 package.json 里的 react-scripts 版本 >= 5.x.x,则使用 domToCodeDevServerV5
      Object.assign(config, domToCodeDevServerV5)

      return config
    }
  },
}

Example: playgrounds/webpack5-react


📚 文档

查看 文档指南 📒(即将上线...)

💡 注意

如果无法跳转编辑器,请确保你的编辑器已经添加到环境变量,比如 vscode,添加成功后在命令终端输入

code -v

可以看到 vscode 版本信息意味着成功。

🤖️ Contributing

Learn about contribution here.

This project exists thanks to all the people who contribute:

📄 License

MIT License © 2022-PRESENT tuocangyu