Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webfansplz/vite-plugin-vue-inspector

jump to editor source code while click the element of browser automatically.
https://github.com/webfansplz/vite-plugin-vue-inspector

debug inspector vite vite-plugin vscode vue vuejs

Last synced: 5 days ago
JSON representation

jump to editor source code while click the element of browser automatically.

Host: GitHub
URL: https://github.com/webfansplz/vite-plugin-vue-inspector
Owner: webfansplz
License: mit
Created: 2022-03-16T12:14:39.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-09-08T17:08:03.000Z (4 months ago)
Last Synced: 2024-10-29T14:52:45.616Z (2 months ago)
Topics: debug, inspector, vite, vite-plugin, vscode, vue, vuejs
Language: Vue
Homepage:
Size: 10.5 MB
Stars: 691
Watchers: 6
Forks: 71
Open Issues: 20
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-vite - v23 - Jump to local IDE source code while click the element of browser. (Plugins / Vue)
awesome-vite - v23 - Jump to local IDE source code while click the element of browser. (Plugins / Vue)
awesome-element-plus - vite-plugin-vue-inspector - Click DOM open IDE. (Recommended With / Blog Posts)
awesome-element-plus - vite-plugin-vue-inspector - Click DOM open IDE. (Recommended With / Blog Posts)

README

        








  

  

  









## 📖 Introduction

A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.







## 📦 Installation

```bash

# vite-plugin-vue-inspector 

pnpm install vite-plugin-vue-inspector -D

# unplugin-vue-inspector

pnpm install unplugin-vue-inspector -D

```

## 🦄 Usage

### Configuration Vite

```ts

// for Vue2

import { defineConfig, } from 'vite'

import { createVuePlugin, } from 'vite-plugin-vue2'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({

  plugins: [

    createVuePlugin(),

    Inspector({

      vue: 2

    }),

  ],

})

```

```ts

// for Vue3

import { defineConfig } from 'vite'

import Vue from '@vitejs/plugin-vue'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({

  plugins: [Vue(), Inspector()],

})

```

```ts

// for Nuxt3

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

import Inspector from 'vite-plugin-vue-inspector'

export default defineNuxtConfig({

  modules: [

    ['unplugin-vue-inspector/nuxt', {

      enabled: true,

      toggleButtonVisibility: 'always',

    }],

  ],

})

```

### Options

```ts

interface VitePluginInspectorOptions {

  /**

   * Vue version

   * @default 3

   */

  vue?: 2 | 3

  /**

   * Default enable state

   * @default false

   */

  enabled?: boolean

  /**

   * Define a combo key to toggle inspector

   * @default 'control-shift' on windows, 'meta-shift' on other os

   *

   * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -

   * examples: control-shift, control-o, control-alt-s  meta-x control-meta

   * Some keys have native behavior (e.g. alt-s opens history menu on firefox).

   * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.

   * You can also disable it by setting `false`.

   */

  toggleComboKey?: string | false

  /**

   * Toggle button visibility

   * @default 'active'

   */

  toggleButtonVisibility?: 'always' | 'active' | 'never'

  /**

   * Toggle button display position

   * @default top-right

   */

  toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

  /**

   * append an import to the module id ending with `appendTo` instead of adding a script into body

   * useful for frameworks that do not support transformIndexHtml hook (e.g. Nuxt3)

   *

   * WARNING: only set this if you know exactly what it does.

   */

  appendTo?: string | RegExp

  /**

   * Customize openInEditor host (e.g. http://localhost:3000)

   * @default false

   * @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.

   */

  openInEditorHost?: string | false

  /**

   * lazy load inspector times (ms)

   * @default false

   */

  lazyLoad?: number | false

  /**

   * disable inspector on editor open

   * @default false

   */

  disableInspectorOnEditorOpen?: boolean

  /**

   * Hide information in VNode and produce clean html in DevTools

   *

   * Currently, it only works for Vue 3

   *

   * @default true

   */

  cleanHtml?: boolean

  /**

   * Target editor when open in editor (v5.1.0+)

   *

   * @default code (Visual Studio Code)

   */

  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'

}

```

### Example

- [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)

- [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)

- [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)

## Supported editors

| Value | Editor | Linux | Windows | OSX |

|--------|------|:------:|:------:|:------:|

| `appcode` | [AppCode](https://www.jetbrains.com/objc/) |  |  |✓|

| `atom` | [Atom](https://atom.io/) |✓|✓|✓|

| `atom-beta` | [Atom Beta](https://atom.io/beta) |  |  |✓|

| `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|

| `clion` | [Clion](https://www.jetbrains.com/clion/) |  |✓|✓|

| `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|

| `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|

| `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|

| `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |

| `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|

| `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |

| `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|

| `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|

| `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|

| `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|

| `vim` | [Vim](http://www.vim.org/) |✓| | |

| `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|

| `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|

| `cursor` | [Cursor](https://www.cursor.com/) |✓|✓|✓|

## 🔌  Configuration IDE / Editor

**Starting from v5.1.0, We recommend using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)

It uses an **environment variable** named **`LAUNCH_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.

For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell.

### VS Code

- install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)

  ![install-vscode-cli](./public/install-vscode-cli.png)

- set env to shell, like `.bashrc` or `.zshrc`  

  ```bash

  export LAUNCH_EDITOR=code

  ```




### VS Code with WSL (Windows)

- add the configuration in the `settings.json`

- restart the VS Code (All Windows should be closed to take effect)

```json

{

  // other config...

  "terminal.integrated.env.linux": {

    "EDITOR": "code"

  }

}

```

### WebStorm  

- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)  

  ```bash

  export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

  ```

**OR**

- install WebStorm command line tools

- then set env to shell, like `.bashrc` or `.zshrc`  

  ```bash

  export LAUNCH_EDITOR=webstorm

  ```




### PhpStorm

- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)

  ```bash

  export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'

  ```

**OR**

- install PhpStorm command line tools

- then set env to shell, like `.bashrc` or `.zshrc`

  ```bash

  export LAUNCH_EDITOR=phpstorm

  ```




### Vim

Yes! you can also use vim if you want, just set env to shell

```bash

export LAUNCH_EDITOR=vim

```




## 💡 Notice

- **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**

- It only work in develop mode .

- It does not currently support `Template Engine (e.g. pug)` .

## 👨‍💻 Programmatic Usage

You can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.

```ts

import type { VueInspectorClient } from 'vite-plugin-vue-inspector'

const inspector: VueInspectorClient = window.__VUE_INSPECTOR__

if (inspector) {

  // enable inspector

  inspector.enable()

  // or

  inspector.disable()

}

```

## 🌸 Credits

This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .

Partially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .

## 🤖️ Analysis of Theory

[Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)

## 📄 License

[MIT LICENSE](./LICENSE)