Let you create a webview vscode plug-in in 1 minute

Install

npm i @vscode-use/createwebview

Usage1

function activate(context: vscode.ExtensionContext) {
 const provider = new CreateWebview(
    context.extensionUri,
    {
      title: 'Daily planner', // The title of the tab page opened by webview
      scripts: ['https://unpkg.com/vue@2/dist/vue.js', 'https://unpkg.com/element-ui/lib/index.js'], // The local js file needs to be configured 
      styles: ['reset.css', 'https://unpkg.com/element-ui/lib/theme-chalk/index.css', 'main.css']
    }
  ) // When the css style is imported, the local css must be configured in the media directory
}
  const viewTodoDisposable = vscode.commands.registerCommand('extension.openWebview', () => {
    provider.create(`
    <div id="app">
      <div>Hello, World</div>
    </div>
    `, (data)=>{
      // callback Get the post message data of the js layer
    })
  })

Usage2

function activate(context: vscode.ExtensionContext) {
  const provider = new CreateWebview(
    context.extensionUri,
    {
      title: 'Daily planner', // The title of the tab page opened by webview
      scripts: [],
      styles: []
    }
  )
}

  const viewTodoDisposable = vscode.commands.registerCommand('extension.openWebview', () => {
    // Relative path based on the root directory
    // The local path resource (href="" | src="") in html needs to use the relative path and put it under the media folder in the root directory.
    provider.createWithHTMLUrl('./src/webview/index.html', (data)=>{
        // callback Get the post message data of the js layer
    })
  })

Api

• provider.isActive Checks whether the current webview is open
• provider.create Create a webview
• provider.destory Destroy Close the webview
• provider.deferScript The default js is loaded at the back of the body,defer script is injected after the default js, and in order to solve some problems with default data rendering, support is supported'xxx'
• provider.postMessage Send a message to the js layer

Feature

Previously, the script used the string method to insert the bad experience, now exposed the defer script uri method to pass the.ts or.js path under the media, so you can write js, and you need to pass the set props method in advance. js can then get the parameters via webview this, webview this will be replaced with the parameters of set props in the final render

const vscode = acquireVsCodeApi()
const { name, age } = webviewThis
const App = {
  data() {
    return {
      name,
      age,
    }
  },
}
new Vue(App).$mount('#app')

Cases

• vscode icones
• vscode yesicone

License

MIT License © 2022 Simon He