Skip to content

Commit c2d706d

Browse files
webfansplzwebfansplz
authored
feat: introducing launchEditor option (#90)
1 parent cf95c6a commit c2d706d

File tree

6 files changed

+318
-80
lines changed

6 files changed

+318
-80
lines changed

‎README.md

Lines changed: 77 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ pnpm install unplugin-vue-inspector -D
4444

4545
import { defineConfig, } from 'vite'
4646
import { createVuePlugin, } from 'vite-plugin-vue2'
47+
4748
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
4849
4950
export default defineConfig({
@@ -61,6 +62,7 @@ export default defineConfig({
6162

6263
import { defineConfig } from 'vite'
6364
import Vue from '@vitejs/plugin-vue'
65+
6466
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
6567
6668
export default defineConfig({
@@ -90,47 +92,47 @@ export default defineNuxtConfig({
9092
```ts
9193
interface VitePluginInspectorOptions {
9294
/**
93-
* Vue version
94-
* @default 3
95-
*/
95+
* Vue version
96+
* @default 3
97+
*/
9698
vue?: 2 | 3
9799

98100
/**
99-
* Default enable state
100-
* @default false
101-
*/
101+
* Default enable state
102+
* @default false
103+
*/
102104
enabled?: boolean
103105

104106
/**
105-
* Define a combo key to toggle inspector
106-
* @default 'control-shift' on windows, 'meta-shift' on other os
107-
*
108-
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
109-
* examples: control-shift, control-o, control-alt-s meta-x control-meta
110-
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
111-
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
112-
* You can also disable it by setting `false`.
113-
*/
107+
* Define a combo key to toggle inspector
108+
* @default 'control-shift' on windows, 'meta-shift' on other os
109+
*
110+
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
111+
* examples: control-shift, control-o, control-alt-s meta-x control-meta
112+
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
113+
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
114+
* You can also disable it by setting `false`.
115+
*/
114116
toggleComboKey?: string | false
115117

116118
/**
117-
* Toggle button visibility
118-
* @default 'active'
119-
*/
119+
* Toggle button visibility
120+
* @default 'active'
121+
*/
120122
toggleButtonVisibility?: 'always' | 'active' | 'never'
121123

122124
/**
123-
* Toggle button display position
124-
* @default top-right
125-
*/
125+
* Toggle button display position
126+
* @default top-right
127+
*/
126128
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
127129

128130
/**
129-
* append an import to the module id ending with `appendTo` instead of adding a script into body
130-
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
131-
*
132-
* WARNING: only set this if you know exactly what it does.
133-
*/
131+
* append an import to the module id ending with `appendTo` instead of adding a script into body
132+
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
133+
*
134+
* WARNING: only set this if you know exactly what it does.
135+
*/
134136
appendTo?: string | RegExp
135137

136138
/**
@@ -140,11 +142,33 @@ interface VitePluginInspectorOptions {
140142
*/
141143
openInEditorHost?: string | false
142144

145+
/**
146+
* lazy load inspector times (ms)
147+
* @default false
148+
*/
149+
lazyLoad?: number | false
150+
143151
/**
144152
* disable inspector on editor open
145153
* @default false
146154
*/
147155
disableInspectorOnEditorOpen?: boolean
156+
157+
/**
158+
* Hide information in VNode and produce clean html in DevTools
159+
*
160+
* Currently, it only works for Vue 3
161+
*
162+
* @default true
163+
*/
164+
cleanHtml?: boolean
165+
166+
/**
167+
* Target editor when open in editor (v5.1.0+)
168+
*
169+
* @default code (Visual Studio Code)
170+
*/
171+
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
148172
}
149173
```
150174

@@ -154,8 +178,34 @@ interface VitePluginInspectorOptions {
154178
- [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
155179
- [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
156180

181+
## Supported editors
182+
183+
| Value | Editor | Linux | Windows | OSX |
184+
|--------|------|:------:|:------:|:------:|
185+
| `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
186+
| `atom` | [Atom](https://atom.io/) |✓|✓|✓|
187+
| `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
188+
| `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
189+
| `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
190+
| `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
191+
| `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
192+
| `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
193+
| `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
194+
| `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
195+
| `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
196+
| `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
197+
| `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
198+
| `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
199+
| `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
200+
| `vim` | [Vim](http://www.vim.org/) |✓| | |
201+
| `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
202+
| `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
203+
204+
157205
## 🔌 Configuration IDE / Editor
158206

207+
**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.)
208+
159209
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.
160210

161211
For example, if you want it always open VS Code when inspection clicked, set `export VUE_EDITOR=code` in your shell.
@@ -174,6 +224,7 @@ For example, if you want it always open VS Code when inspection clicked, set `ex
174224

175225
<br />
176226

227+
177228
### VS Code with WSL (Windows)
178229

179230
- add the configuration in the `settings.json`

‎packages/core/README.md

Lines changed: 103 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ pnpm install unplugin-vue-inspector -D
4444

4545
import { defineConfig, } from 'vite'
4646
import { createVuePlugin, } from 'vite-plugin-vue2'
47+
4748
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
4849
4950
export default defineConfig({
@@ -61,6 +62,7 @@ export default defineConfig({
6162

6263
import { defineConfig } from 'vite'
6364
import Vue from '@vitejs/plugin-vue'
65+
6466
import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector
6567
6668
export default defineConfig({
@@ -90,56 +92,83 @@ export default defineNuxtConfig({
9092
```ts
9193
interface VitePluginInspectorOptions {
9294
/**
93-
* Vue version
94-
* @default 3
95-
*/
95+
* Vue version
96+
* @default 3
97+
*/
9698
vue?: 2 | 3
9799

98100
/**
99-
* Default enable state
100-
* @default false
101-
*/
101+
* Default enable state
102+
* @default false
103+
*/
102104
enabled?: boolean
103105

104106
/**
105-
* Define a combo key to toggle inspector
106-
* @default 'control-shift' on windows, 'meta-shift' on other os
107-
*
108-
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
109-
* examples: control-shift, control-o, control-alt-s meta-x control-meta
110-
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
111-
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
112-
* You can also disable it by setting `false`.
113-
*/
107+
* Define a combo key to toggle inspector
108+
* @default 'control-shift' on windows, 'meta-shift' on other os
109+
*
110+
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
111+
* examples: control-shift, control-o, control-alt-s meta-x control-meta
112+
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
113+
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
114+
* You can also disable it by setting `false`.
115+
*/
114116
toggleComboKey?: string | false
115117

116118
/**
117-
* Toggle button visibility
118-
* @default 'active'
119-
*/
119+
* Toggle button visibility
120+
* @default 'active'
121+
*/
120122
toggleButtonVisibility?: 'always' | 'active' | 'never'
121123

122124
/**
123-
* Toggle button display position
124-
* @default top-right
125-
*/
125+
* Toggle button display position
126+
* @default top-right
127+
*/
126128
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
127129

128130
/**
129-
* append an import to the module id ending with `appendTo` instead of adding a script into body
130-
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
131-
*
132-
* WARNING: only set this if you know exactly what it does.
133-
*/
131+
* append an import to the module id ending with `appendTo` instead of adding a script into body
132+
* useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
133+
*
134+
* WARNING: only set this if you know exactly what it does.
135+
*/
134136
appendTo?: string | RegExp
135137

136138
/**
137139
* Customize openInEditor host (e.g. http://localhost:3000)
138140
* @default false
139141
* @deprecated This option is deprecated and removed in 5.0. The plugin now automatically detects the correct host.
140-
*
141142
*/
142143
openInEditorHost?: string | false
144+
145+
/**
146+
* lazy load inspector times (ms)
147+
* @default false
148+
*/
149+
lazyLoad?: number | false
150+
151+
/**
152+
* disable inspector on editor open
153+
* @default false
154+
*/
155+
disableInspectorOnEditorOpen?: boolean
156+
157+
/**
158+
* Hide information in VNode and produce clean html in DevTools
159+
*
160+
* Currently, it only works for Vue 3
161+
*
162+
* @default true
163+
*/
164+
cleanHtml?: boolean
165+
166+
/**
167+
* Target editor when open in editor (v5.1.0+)
168+
*
169+
* @default code (Visual Studio Code)
170+
*/
171+
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
143172
}
144173
```
145174

@@ -149,8 +178,34 @@ interface VitePluginInspectorOptions {
149178
- [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)
150179
- [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)
151180

181+
## Supported editors
182+
183+
| Value | Editor | Linux | Windows | OSX |
184+
|--------|------|:------:|:------:|:------:|
185+
| `appcode` | [AppCode](https://www.jetbrains.com/objc/) | | |✓|
186+
| `atom` | [Atom](https://atom.io/) |✓|✓|✓|
187+
| `atom-beta` | [Atom Beta](https://atom.io/beta) | | |✓|
188+
| `brackets` | [Brackets](http://brackets.io/) |✓|✓|✓|
189+
| `clion` | [Clion](https://www.jetbrains.com/clion/) | |✓|✓|
190+
| `code` | [Visual Studio Code](https://code.visualstudio.com/) |✓|✓|✓|
191+
| `code-insiders` | [Visual Studio Code Insiders](https://code.visualstudio.com/insiders/) |✓|✓|✓|
192+
| `codium` | [VSCodium](https://github.com/VSCodium/vscodium) |✓|✓|✓|
193+
| `emacs` | [Emacs](https://www.gnu.org/software/emacs/) |✓| | |
194+
| `idea` | [IDEA](https://www.jetbrains.com/idea/) |✓|✓|✓|
195+
| `notepad++` | [Notepad++](https://notepad-plus-plus.org/download/v7.5.4.html) | |✓| |
196+
| `pycharm` | [PyCharm](https://www.jetbrains.com/pycharm/) |✓|✓|✓|
197+
| `phpstorm` | [PhpStorm](https://www.jetbrains.com/phpstorm/) |✓|✓|✓|
198+
| `rubymine` | [RubyMine](https://www.jetbrains.com/ruby/) |✓|✓|✓|
199+
| `sublime` | [Sublime Text](https://www.sublimetext.com/) |✓|✓|✓|
200+
| `vim` | [Vim](http://www.vim.org/) |✓| | |
201+
| `visualstudio` | [Visual Studio](https://www.visualstudio.com/vs/) | | |✓|
202+
| `webstorm` | [WebStorm](https://www.jetbrains.com/webstorm/) |✓|✓|✓|
203+
204+
152205
## 🔌 Configuration IDE / Editor
153206

207+
**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.)
208+
154209
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.
155210

156211
For example, if you want it always open VS Code when inspection clicked, set `export VUE_EDITOR=code` in your shell.
@@ -169,6 +224,7 @@ For example, if you want it always open VS Code when inspection clicked, set `ex
169224

170225
<br />
171226

227+
172228
### VS Code with WSL (Windows)
173229

174230
- add the configuration in the `settings.json`
@@ -206,6 +262,26 @@ For example, if you want it always open VS Code when inspection clicked, set `ex
206262

207263
<br />
208264

265+
### PhpStorm
266+
267+
- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
268+
269+
```bash
270+
export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
271+
```
272+
273+
**OR**
274+
275+
- install PhpStorm command line tools
276+
277+
- then set env to shell, like `.bashrc` or `.zshrc`
278+
279+
```bash
280+
export LAUNCH_EDITOR=phpstorm
281+
```
282+
283+
<br />
284+
209285
### Vim
210286

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

0 commit comments

Comments
 (0)