{"id":13605422,"url":"https://github.com/tomjs/vite-plugin-vscode","last_synced_at":"2026-01-03T07:22:01.621Z","repository":{"id":213309563,"uuid":"733539728","full_name":"tomjs/vite-plugin-vscode","owner":"tomjs","description":"用 vue/react 来开发 vscode extension webview ，支持 esm 和 cjs。Use vue/react to develop vscode extension webview, supporting esm and cjs.","archived":false,"fork":false,"pushed_at":"2025-03-20T13:39:33.000Z","size":493,"stargazers_count":60,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T11:04:30.903Z","etag":null,"topics":["extension","hmr","hot","plugin","react","vite","vscode","vue","webview"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-19T14:56:51.000Z","updated_at":"2025-03-28T13:56:43.000Z","dependencies_parsed_at":"2024-01-15T12:57:50.292Z","dependency_job_id":"542fe553-09db-4548-9a4f-74906c2be4fb","html_url":"https://github.com/tomjs/vite-plugin-vscode","commit_stats":{"total_commits":85,"total_committers":3,"mean_commits":"28.333333333333332","dds":0.03529411764705881,"last_synced_commit":"943cb6f834d3a6d70eb77e54323b28851e41710a"},"previous_names":["tomgao365/vite-plugin-vscode","tomjs/vite-plugin-vscode"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomjs%2Fvite-plugin-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomjs","download_url":"https://codeload.github.com/tomjs/vite-plugin-vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332602,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extension","hmr","hot","plugin","react","vite","vscode","vue","webview"],"created_at":"2024-08-01T19:00:58.532Z","updated_at":"2026-01-03T07:22:01.615Z","avatar_url":"https://github.com/tomjs.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# @tomjs/vite-plugin-vscode\n\n[![npm](https://img.shields.io/npm/v/@tomjs/vite-plugin-vscode)](https://www.npmjs.com/package/@tomjs/vite-plugin-vscode) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/vite-plugin-vscode) ![NPM](https://img.shields.io/npm/l/@tomjs/vite-plugin-vscode) [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@tomjs/vite-plugin-vscode)\n\n**English** | [中文](./README.zh_CN.md)\n\n\u003e Use `vue`/`react` to develop [vscode extension webview](https://code.visualstudio.com/api/references/vscode-api#WebviewPanel), supporting `esm` and `cjs`.\n\nDuring development, inject code into both `vscode extension code` and `web page` code to support `HMR`; during production builds, inject the final generated `index.html` code into the `vscode extension code` to minimize manual effort.\n\n## Features\n\n- Use [tsdown](https://tsdown.dev/) to quickly build `extension code`\n- Simple configuration, focus on business\n- Support `esm` and `cjs`\n- Support ESM extension (vscode `v1.100.0+`)\n- Support webview `HMR`\n- Support `acquireVsCodeApi` of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview)\n- Support [Multi-Page App](https://vitejs.dev/guide/build.html#multi-page-app)\n- Supports `vue` and `react` and other [frameworks](https://cn.vitejs.dev/guide/#trying-vite-online) supported by `vite`\n\n### ESM extension\n\nThe NodeJS extension host now (`v1.100.0+`) supports extensions that use JavaScript-modules (ESM). All it needs is the `\"type\": \"module\"` entry in your extension's `package.json` file. With that, the JavaScript code can use `import` and `export` statements, including the special module `import('vscode')`.\n\n## Install\n\n```bash\n# pnpm\npnpm add @tomjs/vite-plugin-vscode -D\n\n# yarn\nyarn add @tomjs/vite-plugin-vscode -D\n\n# npm\nnpm i @tomjs/vite-plugin-vscode -D\n```\n\n## Usage\n\n### Recommended\n\nSetting `recommended` will modify some preset configurations. See [PluginOptions](#pluginoptions) and `recommended` parameter descriptions in detail.\n\n#### Directory Structure\n\n- By default, `recommended:true` will be based on the following directory structure as a convention.\n\n```\n|--extension      // extension code\n|  |--index.ts\n|--src            // front-end code\n|  |--App.vue\n|  |--main.ts\n|--index.html\n```\n\n- Zero configuration, default dist output directory\n\n```\n|--dist\n|  |--extension\n|  |  |--index.js\n|  |  |--index.js.map\n|  |--webview\n|  |  |--index.html\n```\n\n- If you want to modify the `extension` source code directory to `src`, you can set `{ extension: { entry: 'src/index.ts' } }`\n\n```\n|--src            // extension code\n|  |--index.ts\n|--webview        // front-end code\n|  |--App.vue\n|  |--main.ts\n|--index.html\n```\n\n### extension\n\ncode snippet, more code see examples\n\n```ts\nimport { getWebviewHtml } from 'virtual:vscode';\n\nconst panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {\n  enableScripts: true,\n  localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],\n});\n\n// Vite development mode and production mode inject different webview codes to reduce development work\npanel.webview.html = getWebviewHtml({\n  // vite dev mode\n  serverUrl: process.env.VITE_DEV_SERVER_URL,\n  // vite prod mode\n  webview,\n  context,\n  inputName: 'index',\n  injectCode: `\u003cscript\u003ewindow.__FLAG1__=666;window.__FLAG2__=888;\u003c/script\u003e`,\n});\n```\n\n- Add `\"@tomjs/vite-plugin-vscode/types\"` to `tsconfig.node.json` or `*.d.ts` file.\n\n`tsconfig.node.json`\n\n```json\n{\n  \"extends\": \"@tomjs/tsconfig/node.json\",\n  \"compilerOptions\": {\n    \"tsBuildInfoFile\": \"./node_modules/.tmp/tsconfig.node.tsbuildinfo\",\n    \"types\": [\n      \"@tomjs/vite-plugin-vscode/types\"\n    ]\n  },\n  \"include\": [\n    \"extension\",\n    \"*.config.ts\"\n  ]\n}\n```\n\n`*.dt.s`\n\n```ts\n/// \u003creference types=\"@tomjs/vite-plugin-vscode/types\" /\u003e\n```\n\n- `package.json`\n\n```json\n{\n  \"main\": \"dist/extension/index.js\"\n}\n```\n\n### vue\n\n- `vite.config.ts`\n\n```ts\nimport vscode from '@tomjs/vite-plugin-vscode';\nimport vue from '@vitejs/plugin-vue';\nimport { defineConfig } from 'vite';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag: string) =\u003e tag.startsWith('vscode-'),\n        },\n      },\n    }),\n    vscode(),\n    // Modify the extension source code entry path, and also modify the `index.html` entry file path\n    // vscode({ extension: { entry: 'src/index.ts' } }),\n  ],\n});\n```\n\n### react\n\n- `vite.config.ts`\n\n```ts\nimport vscode from '@tomjs/vite-plugin-vscode';\nimport react from '@vitejs/plugin-react-swc';\nimport { defineConfig } from 'vite';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react(), vscode()],\n});\n```\n\n### **getWebviewHtml**\n\nSee [vue-import](./examples/vue-import) example\n\n- `vite.config.ts`\n\n```ts\nimport path from 'node:path';\nimport vscode from '@tomjs/vite-plugin-vscode';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [vscode()],\n  build: {\n    rollupOptions: {\n      // https://cn.vitejs.dev/guide/build.html#multi-page-app\n      input: [path.resolve(__dirname, 'index.html'), path.resolve(__dirname, 'index2.html')],\n      // You can also customize the name\n      // input:{\n      //   'index': path.resolve(__dirname, 'index.html'),\n      //   'index2': path.resolve(__dirname, 'index2.html'),\n      // }\n    },\n  },\n});\n```\n\n- page one\n\n```ts\nimport { getWebviewHtml } from 'virtual:vscode';\n\ngetWebviewHtml({\n  // vite dev mode\n  serverUrl: process.env.VITE_DEV_SERVER_URL,\n  // vite prod mode\n  webview,\n  context,\n});\n```\n\n- page two\n\n```ts\nimport { getWebviewHtml } from 'virtual:vscode';\n\ngetWebviewHtml({\n  // vite dev mode\n  serverUrl: `${process.env.VITE_DEV_SERVER_URL}/index2.html`,\n  // vite prod mode\n  webview,\n  context,\n  inputName: 'index2',\n});\n```\n\n- A single page uses different parameters to achieve different functions\n\n```ts\nimport { getWebviewHtml } from 'virtual:vscode';\n\ngetWebviewHtml({\n  // vite dev mode\n  serverUrl: `${process.env.VITE_DEV_SERVER_URL}?id=666`,\n  // vite prod mode\n  webview,\n  context,\n  injectCode: `\u003cscript\u003ewindow.__id__=666;\u003c/script\u003e`,\n});\n```\n\n**getWebviewHtml** Description\n\n```ts\ninterface WebviewHtmlOptions {\n  /**\n   * `[vite serve]` The url of the vite dev server. Please use `process.env.VITE_DEV_SERVER_URL`\n   */\n  serverUrl?: string;\n  /**\n   * `[vite build]` The Webview instance of the extension.\n   */\n  webview: Webview;\n  /**\n   * `[vite build]` The ExtensionContext instance of the extension.\n   */\n  context: ExtensionContext;\n  /**\n   * `[vite build]` vite build.rollupOptions.input name. Default is `index`.\n   */\n  inputName?: string;\n  /**\n   * `[vite build]` Inject code into the afterbegin of the head element.\n   */\n  injectCode?: string;\n}\n```\n\n### Warning\n\nWhen using the `acquireVsCodeApi().getState()` method of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview), you must use `await` to call it. Since `acquireVsCodeApi` is a simulated implementation of this method by the plugin, it is inconsistent with the original method. I am very sorry. If you have other solutions, please share them. Thank you very much.\n\n```ts\nconst value = await acquireVsCodeApi().getState();\n```\n\n## Parameters\n\n### PluginOptions\n\n| Property    | Type                                         | Default | Description                                                                                                                                                                           |\n| ----------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| recommended | `boolean`                                    | `true`  | This option is intended to provide recommended default parameters and behavior.                                                                                                       |\n| extension   | [ExtensionOptions](#ExtensionOptions)        |         | Configuration options for the vscode extension.                                                                                                                                       |\n| webview     | `boolean` \\| [WebviewOption](#WebviewOption) | `true`  | Inject html code                                                                                                                                                                      |\n| devtools    | `boolean`                                    | `true`  | Inject script code for [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) or [vue-devtools](https://devtools.vuejs.org/guide/standalone) debugging |\n\n#### Notice\n\nThe `recommended` option is used to set the default configuration and behavior, which can be used with almost zero configuration. The default is `true`. If you want to customize the configuration, set it to `false`. The following default prerequisites are to use the recommended [project structure](#directory-structure).\n\n- The output directory is based on the `build.outDir` parameter of `vite`, and outputs `extension` and `src` to `dist/extension` and `dist/webview` respectively.\n- Other behaviors to be implemented\n\n#### devtools\n\nDuring development, support standalone development tool applications for `react` and `vue`, enabled by default.\n\n- `react`: inject `\u003cscript src=\"http://localhost:8097\"\u003e\u003c/script\u003e`, support [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools)\n- `vue`: inject `\u003cscript src=\"http://localhost:8098\"\u003e\u003c/script\u003e`, support [vue-devtools](https://devtools.vuejs.org/guide/standalone)\n\n### ExtensionOptions\n\nBased on [Options](https://tsdown.dev/reference/api/Interface.Options) of [tsdown](https://tsdown.dev/), some default values are added for ease of use.\n\n| Property   | Type                 | Default               | Description                                        |\n| ---------- | -------------------- | --------------------- | -------------------------------------------------- |\n| entry      | `string`             | `extension/index.ts`  | The vscode extension entry file.                   |\n| outDir     | `string`             | `dist-extension/main` | The output directory for the vscode extension file |\n| watchFiles | `string`\\/`string[]` | ``                    | Watch extension code files during development      |\n\n### WebviewOption\n\n| Property | Type     | Default                                                                                                                                                          | Description                    |\n| -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |\n| csp      | `string` | `\u003cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; style-src {{cspSource}} 'unsafe-inline'; script-src 'nonce-{{nonce}}' 'unsafe-eval';\"\u003e` | The `CSP` meta for the webview |\n\n- `{{cspSource}}`: [webview.cspSource](https://code.visualstudio.com/api/references/vscode-api#Webview)\n- `{{nonce}}`: uuid\n\n### Additional Information\n\n- Default values for `extension` when the relevant parameters are not configured\n\n| Parameter | Development Mode Default | Production Mode Default |\n| --------- | ------------------------ | ----------------------- |\n| sourcemap | `true`                   | `false`                 |\n| minify    | `false`                  | `true`                  |\n\n## Environment Variables\n\n### Vite plugin variables\n\n`vscode extension` use.\n\n- `development` mode\n\n| Variable              | Description                    |\n| --------------------- | ------------------------------ |\n| `VITE_DEV_SERVER_URL` | The url of the vite dev server |\n\n- `production` mode\n\n| Variable            | Description                   |\n| ------------------- | ----------------------------- |\n| `VITE_WEBVIEW_DIST` | vite webview page output path |\n\n## Debug\n\nRun `Debug Extension` through `vscode` to debug. For debugging tools, refer to [Official Documentation](https://code.visualstudio.com/docs/editor/debugging)\n\n`launch.json` is configured as follows:\n\n```json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Debug Extension\",\n      \"type\": \"extensionHost\",\n      \"request\": \"launch\",\n      \"args\": [\"--extensionDevelopmentPath=${workspaceFolder}\"],\n      \"outFiles\": [\"${workspaceFolder}/dist/extension/*.js\"],\n      \"preLaunchTask\": \"npm: dev\"\n    },\n    {\n      \"name\": \"Preview Extension\",\n      \"type\": \"extensionHost\",\n      \"request\": \"launch\",\n      \"args\": [\"--extensionDevelopmentPath=${workspaceFolder}\"],\n      \"outFiles\": [\"${workspaceFolder}/dist/extension/*.js\"],\n      \"preLaunchTask\": \"npm: build\"\n    }\n  ]\n}\n```\n\n`tasks.json` is configured as follows:\n\n```json\n{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"type\": \"npm\",\n      \"script\": \"dev\",\n      \"problemMatcher\": {\n        \"owner\": \"typescript\",\n        \"fileLocation\": \"relative\",\n        \"pattern\": {\n          \"regexp\": \"^([a-zA-Z]\\\\:/?([\\\\w\\\\-]/?)+\\\\.\\\\w+):(\\\\d+):(\\\\d+): (ERROR|WARNING)\\\\: (.*)$\",\n          \"file\": 1,\n          \"line\": 3,\n          \"column\": 4,\n          \"code\": 5,\n          \"message\": 6\n        },\n        \"background\": {\n          \"activeOnStart\": true,\n          \"beginsPattern\": \"^.*extension build start*$\",\n          \"endsPattern\": \"^.*extension (build|rebuild) success.*$\"\n        }\n      },\n      \"isBackground\": true,\n      \"presentation\": {\n        \"reveal\": \"never\"\n      },\n      \"group\": {\n        \"kind\": \"build\",\n        \"isDefault\": true\n      }\n    },\n    {\n      \"type\": \"npm\",\n      \"script\": \"build\",\n      \"group\": {\n        \"kind\": \"build\",\n        \"isDefault\": true\n      },\n      \"problemMatcher\": []\n    }\n  ]\n}\n```\n\n## Examples\n\nFirst execute the following command to install dependencies and generate library files:\n\n```bash\npnpm install\npnpm build\n```\n\nOpen the [examples](./examples) directory, there are `vue` and `react` examples.\n\n- [react](./examples/react): Simple react example.\n- [vue](./examples/vue): Simple vue example.\n- [vue-esm](./examples/vue-esm): Simple vue (ESM Extension) example.\n- [vue-import](./examples/vue-import): Dynamic import() and multi-page examples.\n\n## Related\n\n- [@tomjs/vscode](https://npmjs.com/package/@tomjs/vscode): Some utilities to simplify the development of [VSCode Extensions](https://marketplace.visualstudio.com/VSCode).\n- [@tomjs/vscode-dev](https://npmjs.com/package/@tomjs/vscode-dev): Some development tools to simplify the development of [vscode extensions](https://marketplace.visualstudio.com/VSCode).\n- [@tomjs/vscode-webview](https://npmjs.com/package/@tomjs/vscode-webview): Optimize the `postMessage` issue between `webview` page and [vscode extensions](https://marketplace.visualstudio.com/VSCode)\n\n## Important Notes\n\n### v6.0.0\n\n**Breaking Updates:**\n\nChange the global `__getWebviewHtml__` method to a virtual module method called `import { getWebviewHtml } from 'virtual:vscode';`.\n\nbefore:\n\n```ts\n__getWebviewHtml__({\n  // vite 开发模式\n  serverUrl: process.env.VITE_DEV_SERVER_URL,\n  // vite 生产模式\n  webview,\n  context,\n});\n```\n\nafter：\n\n```ts\nimport { getWebviewHtml } from 'virtual:vscode';\n\ngetWebviewHtml({\n  // vite 开发模式\n  serverUrl: process.env.VITE_DEV_SERVER_URL,\n  // vite 生产模式\n  webview,\n  context,\n});\n```\n\n### v5.0.0\n\n**Breaking Updates:**\n\n- Using [tsdown](https://tsdown.dev/zh-CN) instead of [tsup](https://tsup.egoist.dev/), the vscode extension [extension](#ExtensionOptions) configuration is changed to inherit [tsdown](https://tsdown.dev/zh-CN).\n\n### v4.0.0\n\n**Breaking Updates:**\n\n- Merge the `__getWebviewHtml__` method for development and production into one, see [getWebviewHtml](#getwebviewhtml)\n\n### v3.0.0\n\n**Breaking Updates:**\n\n- The simulated `acquireVsCodeApi` is consistent with the `acquireVsCodeApi` of [@types/vscode-webview](https://www.npmjs.com/package/@types/vscode-webview), and `sessionStorage.getItem` and `sessionStorage.setItem` are used to implement `getState` and `setState`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomjs%2Fvite-plugin-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomjs%2Fvite-plugin-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomjs%2Fvite-plugin-vscode/lists"}