feat: introducing openInEditorHost option (#72)

webfansplz · web-flow · commit 6b33694f4bbe · 2023-07-24T18:55:43.000+08:00
diff --git a/README.md b/README.md
@@ -132,6 +132,12 @@ interface VitePluginInspectorOptions {
   * WARNING: only set this if you know exactly what it does.
   */
   appendTo?: string | RegExp
+
+  /**
+  * Customize openInEditor host (e.g. http://localhost:3000)
+  * @default false
+  */
+  openInEditorHost?: string | false
 }
 ```
 
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -71,7 +71,6 @@ export default defineConfig({
 ```ts
 // for Nuxt3
 // nuxt.config.ts
-
 import { defineNuxtConfig } from 'nuxt/config'
 import Inspector from 'vite-plugin-vue-inspector'
 
@@ -87,6 +86,7 @@ export default defineNuxtConfig({
 
 ### Options
 
+
 ```ts
 interface VitePluginInspectorOptions {
   /**
@@ -109,8 +109,9 @@ interface VitePluginInspectorOptions {
   * 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
+  toggleComboKey?: string | false
 
   /**
   * Toggle button visibility
@@ -131,6 +132,12 @@ interface VitePluginInspectorOptions {
   * WARNING: only set this if you know exactly what it does.
   */
   appendTo?: string | RegExp
+
+  /**
+  * Customize openInEditor host (e.g. http://localhost:3000)
+  * @default false
+  */
+  openInEditorHost?: string | false
 }
 ```
 
@@ -144,12 +151,12 @@ interface VitePluginInspectorOptions {
 
 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.
+For example, if you want it always open VS Code when inspection clicked, set `export VUE_EDITOR=code` in your shell.
 
 
-### VSCode
+### VS Code
 
-- install VSCode command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
+- 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`  
@@ -160,6 +167,23 @@ For example, if you want it always open VSCode when inspection clicked, set `exp
 
 <br />
 
+### 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)  
diff --git a/packages/core/src/Overlay.vue b/packages/core/src/Overlay.vue
@@ -6,7 +6,7 @@ const protocol = inspectorOptions.serverOptions?.https ? 'https:' : importMetaUr
 const hostOpts = inspectorOptions.serverOptions?.host
 const host = hostOpts && hostOpts !== true ? hostOpts : importMetaUrl?.hostname
 const port = inspectorOptions.serverOptions?.port ?? importMetaUrl?.port
-const baseUrl = isClient ? `${protocol}//${host}:${port}` : ''
+const baseUrl = isClient ? inspectorOptions.openInEditorHost || `${protocol}//${host}:${port}` : ''
 
 const KEY_DATA = 'data-v-inspector'
 const KEY_IGNORE = 'data-v-inspector-ignore'
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
-import path from 'path'
-import { fileURLToPath } from 'url'
-import fs from 'fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import fs from 'node:fs'
 import { bold, dim, green, yellow } from 'kolorist'
 import { normalizePath } from 'vite'
 import type { PluginOption, ServerOptions } from 'vite'
@@ -70,6 +70,12 @@ export interface VitePluginInspectorOptions {
   * WARNING: only set this if you know exactly what it does.
   */
   appendTo?: string | RegExp
+
+  /**
+  * Customize openInEditor host (e.g. http://localhost:3000)
+  * @default false
+  */
+  openInEditorHost?: string | false
 }
 
 const toggleComboKeysMap = {
@@ -94,6 +100,7 @@ export const DEFAULT_INSPECTOR_OPTIONS: VitePluginInspectorOptions = {
   toggleButtonVisibility: 'active',
   toggleButtonPos: 'top-right',
   appendTo: '',
+  openInEditorHost: false,
 } as const
 
 function VitePluginInspector(options: VitePluginInspectorOptions = DEFAULT_INSPECTOR_OPTIONS): PluginOption {
diff --git a/packages/playground/vue3/vite.config.ts b/packages/playground/vue3/vite.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
     VueJsx(),
     Inspector({
       enabled: true,
+      openInEditorHost: "http://127.0.0.1:5173",
       toggleButtonVisibility: 'always',
     }),
   ],
diff --git a/packages/unplugin/README.md b/packages/unplugin/README.md
@@ -71,7 +71,6 @@ export default defineConfig({
 ```ts
 // for Nuxt3
 // nuxt.config.ts
-
 import { defineNuxtConfig } from 'nuxt/config'
 import Inspector from 'vite-plugin-vue-inspector'
 
@@ -110,8 +109,9 @@ interface VitePluginInspectorOptions {
   * 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
+  toggleComboKey?: string | false
 
   /**
   * Toggle button visibility
@@ -132,6 +132,12 @@ interface VitePluginInspectorOptions {
   * WARNING: only set this if you know exactly what it does.
   */
   appendTo?: string | RegExp
+
+  /**
+  * Customize openInEditor host (e.g. http://localhost:3000)
+  * @default false
+  */
+  openInEditorHost?: string | false
 }
 ```
 
@@ -145,12 +151,12 @@ interface VitePluginInspectorOptions {
 
 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.
+For example, if you want it always open VS Code when inspection clicked, set `export VUE_EDITOR=code` in your shell.
 
 
-### VSCode
+### VS Code
 
-- install VSCode command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
+- 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`  
@@ -161,6 +167,23 @@ For example, if you want it always open VSCode when inspection clicked, set `exp
 
 <br />
 
+### 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)  
