Vue-dev-vite-plugin NPM

vue-dev-vite-plugin

demo

📖 Introduction

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

vite: support

📦 Installation

# pnpm 
pnpm install vue-dev-vite-plugin -D

# yarn
yarn add vue-dev-vite-plugin -D

# npm
npm install vue-dev-vite-plugin -D

🦄 Usage

Configuration

// for vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteDevPlugin from 'vue-dev-vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  // [warning]It is only recommended to use in the development environment
  plugins: [vue(), ViteDevPlugin()],
})

🔌 Configuration IDE / Editor

It uses an environment variable named VUE_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 VSCode when inspection clicked, set export VUE_EDITOR=code in your shell.

VSCode

install VSCode command line tools, see the official docs
set env to shell, like .bashrc or .zshrc
```
export VUE_EDITOR=code
```

WebStorm

just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)
```
export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
```