dom-to-code weekly downloads statistics

DOM TO CODE

简体中文 | English

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

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

✨ 介绍

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

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

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

支持 vite/webpack + vue2/vue3/react

支持 vscode/webstorm

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

📦 安装

🔨 使用

配置选项

第一步

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

第二步

配置打包器，dom-to-code 支持 vite 和 webpack 打包器，以下是 vite 、vue-cli、webpack 里的示例(推荐只在非生产环境配置)

Vite

Example: playgrounds/vite-vue3

Webpack

Vue CLI

Example: playgrounds/webpack5-vue2

Create-react-app + react-app-rewired

Example: playgrounds/webpack5-react

📚 文档

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

💡 注意

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

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

🤖️ Contributing

Learn about contribution here.

This project exists thanks to all the people who contribute:

📄 License

MIT License © 2022-PRESENT tuocangyu

Description from the npm listing.