{"id":13417479,"url":"https://github.com/sudongyuer/vite-plugin-react-inspector","last_synced_at":"2025-04-07T10:27:13.437Z","repository":{"id":47344215,"uuid":"514876082","full_name":"sudongyuer/vite-plugin-react-inspector","owner":"sudongyuer","description":"🦋 Jump to local IDE source code while click the element of browser automatically","archived":false,"fork":false,"pushed_at":"2022-11-03T08:25:23.000Z","size":724,"stargazers_count":155,"open_issues_count":2,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T08:12:12.309Z","etag":null,"topics":["debug","dev","inspector","react","react-inspector","vite","vite-plugin-react","vscode","webstorm"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-react-inspector","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sudongyuer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"sudongyuer"}},"created_at":"2022-07-17T15:06:14.000Z","updated_at":"2025-03-21T06:16:08.000Z","dependencies_parsed_at":"2022-08-28T13:11:16.275Z","dependency_job_id":null,"html_url":"https://github.com/sudongyuer/vite-plugin-react-inspector","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudongyuer%2Fvite-plugin-react-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudongyuer%2Fvite-plugin-react-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudongyuer%2Fvite-plugin-react-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudongyuer%2Fvite-plugin-react-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sudongyuer","download_url":"https://codeload.github.com/sudongyuer/vite-plugin-react-inspector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247634492,"owners_count":20970533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debug","dev","inspector","react","react-inspector","vite","vite-plugin-react","vscode","webstorm"],"created_at":"2024-07-30T22:00:37.904Z","updated_at":"2025-04-07T10:27:13.411Z","avatar_url":"https://github.com/sudongyuer.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sudongyuer"],"categories":["Plugins"],"sub_categories":["React"],"readme":"\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/sudongyuer/vite-plugin-vue-inspector\"\u003e\u003cimg src=\"https://cdn.staticaly.com/gh/sudongyuer/image-bed@master/vite-plugin-react-inspector.png?raw=true\" width='200'/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-react-inspector\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/v/vite-plugin-react-inspector\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-react-inspector\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/dt/vite-plugin-react-inspector\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/sudongyuer/vite-plugin-react-inspector/blob/master/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/sudongyuer/vite-plugin-react-inspector\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://stackblitz.com/edit/vitejs-vite-1mazom?file=src/App.tsx\"\u003e\u003cimg src=\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\" alt=\"\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 👀 Why \nWhen developing a React app, you have a lot of components in your app. Sometimes you may forget where the code is located that you want to edit. Then you need this plugin to help you find the code, just click the dom in the browser and this plugin can help you to open the editor and find the code.\n\n\n## 📖 Introduction\nThis vite plugin allows users to jump to local IDE code directly from browser React component by just a simple click, which is similar to Chrome inspector but more advanced.\n\n## 🌈 Features\n\n- Support react 16\n- Support react 17\n- Support react 18\n- All features out of box just need add this plugin in vite.config.ts\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.staticaly.com/gh/sudongyuer/image-bed@master/20220724/vite-plugin-react-inspector.gif\" alt=\"vite-plugin-vue-inspector\"\u003e\n\u003c/p\u003e\n\n## 📦 Installation\n\n```bash\n# pnpm \npnpm add vite-plugin-react-inspector -D\n\n# yarn\nyarn add vite-plugin-react-inspector -D\n\n# npm\nnpm install vite-plugin-react-inspector -D\n```\n\n## 🦄 Usage\n\n### Configuration `vite.config.ts`\n\n```ts\n// ❗️this plugin must before react\n\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport ReactInspector from 'vite-plugin-react-inspector'\n\nexport default defineConfig({\n  plugins: [\n    ReactInspector(),\n    react(),\n  ],\n})\n```\n\n### Example\n\n- [React17](https://github.com/sudongyuer/vite-plugin-react-inspector/tree/master/packages/project-react-17)\n- [React18](https://github.com/sudongyuer/vite-plugin-react-inspector/tree/master/packages/project-react-18)\n\n## 🔌  Configuration IDE / Editor\n\nIt uses an **environment variable** named **`REACT_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.\n\nFor example, if you want it always open VSCode when inspection clicked, set `export REACT_EDITOR=code` in your shell.\n\n\n### VSCode\n\n- install VSCode command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)\n  ![install-vscode-cli](https://git.poker/sudongyuer/image-bed/blob/master/vscode-setup.png?raw=true)\n\n- set env to shell, like `.bashrc` or `.zshrc`  \n\n  ```bash\n  export REACT_EDITOR=code\n  ```\n\n\n### WebStorm  \n\n- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)  \n\n  ```bash\n  export REACT_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'\n  ```\n\n**OR**\n\n- install WebStorm command line tools\n\n- then set env to shell, like `.bashrc` or `.zshrc`  \n\n  ```bash\n  export REACT_EDITOR=webstorm\n  ```\n\n\n### Vim\n\nYes! you can also use vim if you want, just set env to shell\n\n```bash\nexport REACT_EDITOR=vim\n```\n\n## 🌸 Credits\n\nThis project is inspired by [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) .\n\nPartially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .\n\n## 👦 Author\n\nsudongyuer email:976499226@qq.com\n\n## ❤️ Thanks Contribution\n\n- [geekris1](https://github.com/geekris1)\n\n## 📄 License\n\n[MIT](./LICENSE) License © 2022 [SuDongYu](https://github.com/sudongyuer)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudongyuer%2Fvite-plugin-react-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsudongyuer%2Fvite-plugin-react-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudongyuer%2Fvite-plugin-react-inspector/lists"}