From 7f1476db2fe68f3148a61231bb0a319d393da550 Mon Sep 17 00:00:00 2001 From: Arlo Date: Wed, 8 May 2024 21:04:32 +0800 Subject: [PATCH] feat: `launchEditor` option (#373) --- docs/guide/faq.md | 20 ++++++++++++++++- docs/guide/vite-plugin.md | 18 +++++++++++++-- packages/playground/basic/vite.config.ts | 4 +++- packages/vite/package.json | 2 +- packages/vite/src/vite.ts | 28 ++++++++++++++++-------- pnpm-lock.yaml | 10 ++++----- 6 files changed, 63 insertions(+), 19 deletions(-) diff --git a/docs/guide/faq.md b/docs/guide/faq.md index b0b69c44..08d69244 100644 --- a/docs/guide/faq.md +++ b/docs/guide/faq.md @@ -1,9 +1,27 @@ # Frequently Asked Questions -## I can't use the Open In Editor feature +## I can't use the open-in-editor feature The feature is based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) plugin and requires configuration, which you can do by looking at the [configuration documentation](https://github.com/webfansplz/vite-plugin-vue-inspector?tab=readme-ov-file#--configuration-ide--editor). +## How can I specify the editor for open-in-editor feature? + +Starting from **v7.2.0**, you can specify the editor by `launchEditor` option: + +This is a list of [supported editors](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors), please ensure that the editor's environment variables are correctly configured beforehand. + +```ts +import VueDevTools from 'vite-plugin-vue-devtools' +export default defineConfig({ + plugins: [ + VueDevTools({ + launchEditor: 'webstorm', + }), + Unocss(), + ], +}) +``` + ## How to work with Laravel Vite Plugin? ```ts diff --git a/docs/guide/vite-plugin.md b/docs/guide/vite-plugin.md index 4c08ee18..612d91fb 100644 --- a/docs/guide/vite-plugin.md +++ b/docs/guide/vite-plugin.md @@ -57,14 +57,28 @@ interface VitePluginVueDevToolsOptions { appendTo?: string | RegExp /** - * Customize openInEditor host (e.g. http://localhost:3000) + * Enable vue component inspector + * + * @default true + */ + componentInspector?: boolean | VitePluginInspectorOptions + + /** + * Target editor when open in editor (v7.2.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' + + /** + * Customize openInEditor host * @default false * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ openInEditorHost?: string | false /** - * DevTools client host (e.g. http://localhost:3000) + * DevTools client host * useful for projects that use a reverse proxy * @default false * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts index f08406a9..601283d6 100644 --- a/packages/playground/basic/vite.config.ts +++ b/packages/playground/basic/vite.config.ts @@ -9,7 +9,9 @@ import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ vue(), - VueDevTools(), + VueDevTools({ + launchEditor: 'code', + }), Unocss(), AutoImport({ imports: [ diff --git a/packages/vite/package.json b/packages/vite/package.json index 546c6164..a31548f5 100644 --- a/packages/vite/package.json +++ b/packages/vite/package.json @@ -56,7 +56,7 @@ "execa": "^8.0.1", "sirv": "^2.0.4", "vite-plugin-inspect": "^0.8.4", - "vite-plugin-vue-inspector": "^5.0.1" + "vite-plugin-vue-inspector": "^5.1.0" }, "devDependencies": { "@types/node": "^20.12.8", diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index def4923e..228ac191 100644 --- a/packages/vite/src/vite.ts +++ b/packages/vite/src/vite.ts @@ -42,31 +42,39 @@ export interface VitePluginVueDevToolsOptions { appendTo?: string | RegExp /** - * Customize openInEditor host (e.g. http://localhost:3000) + * Enable vue component inspector + * + * @default true + */ + componentInspector?: boolean | VitePluginInspectorOptions + + /** + * Target editor when open in editor (v7.2.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' + + /** + * Customize openInEditor host * @default false * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ openInEditorHost?: string | false /** - * DevTools client host (e.g. http://localhost:3000) + * DevTools client host * useful for projects that use a reverse proxy * @default false * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host. */ clientHost?: string | false - - /** - * Enable Vue Component Inspector - * - * @default true - */ - componentInspector?: boolean | VitePluginInspectorOptions } const defaultOptions: VitePluginVueDevToolsOptions = { appendTo: '', componentInspector: true, + launchEditor: 'code', } function mergeOptions(options: VitePluginVueDevToolsOptions): VitePluginVueDevToolsOptions { @@ -173,6 +181,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt pluginOptions.componentInspector && { tag: 'script', injectTo: 'head-prepend', + launchEditor: pluginOptions.launchEditor, attrs: { type: 'module', src: `${config.base || '/'}@id/virtual:vue-inspector-path:load.js`, @@ -190,6 +199,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt pluginOptions.componentInspector && VueInspector({ toggleComboKey: '', toggleButtonVisibility: 'never', + launchEditor: pluginOptions.launchEditor, ...typeof pluginOptions.componentInspector === 'boolean' ? {} : pluginOptions.componentInspector, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b782495..4ec4bcb8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -813,8 +813,8 @@ importers: specifier: ^0.8.4 version: 0.8.4(rollup@4.13.0)(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)(terser@5.26.0)) vite-plugin-vue-inspector: - specifier: ^5.0.1 - version: 5.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)(terser@5.26.0)) + specifier: ^5.1.0 + version: 5.1.0(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)(terser@5.26.0)) devDependencies: '@types/node': specifier: ^20.12.8 @@ -8028,8 +8028,8 @@ packages: '@nuxt/kit': optional: true - vite-plugin-vue-inspector@5.0.1: - resolution: {integrity: sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==} + vite-plugin-vue-inspector@5.1.0: + resolution: {integrity: sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==} peerDependencies: vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 @@ -16700,7 +16700,7 @@ snapshots: - rollup - supports-color - vite-plugin-vue-inspector@5.0.1(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)(terser@5.26.0)): + vite-plugin-vue-inspector@5.1.0(vite@5.2.11(@types/node@20.12.8)(sass@1.76.0)(terser@5.26.0)): dependencies: '@babel/core': 7.24.5 '@babel/plugin-proposal-decorators': 7.23.5(@babel/core@7.24.5)