# vscode-extension-decorator > Decorator for VS Code Latest version **0.0.6** (published 2019-06-19) · GPL-3.0 license · 0 weekly downloads ## Install ```sh npm install vscode-extension-decorator pnpm add vscode-extension-decorator yarn add vscode-extension-decorator bun add vscode-extension-decorator ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.6 | | Published | 2019-06-19 | | First published | 2019-05-31 | | Weekly downloads | 0 | | License | GPL-3.0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 75.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Kevin Chou | | Maintainers | k9982874 | ## Links - npm: https://www.npmjs.com/package/vscode-extension-decorator - Repository: https://github.com/k9982874/vscode-extension-decorator - Homepage: https://github.com/k9982874/vscode-extension-decorator#readme - Issues: https://github.com/k9982874/vscode-extension-decorator/issues - npm.io page: https://npm.io/package/vscode-extension-decorator ## Recent versions - 0.0.6 (latest) — 2019-06-19 - 0.0.5 — 2019-06-14 - 0.0.4 — 2019-06-12 - 0.0.2 — 2019-05-31 - 0.0.1 — 2019-05-31 ## README # Visual Studio Code Decorator The decorators for Visual Studio Code. ``` npm install vscode-extension-decorator --save-dev ``` How to use: ``` import * as vscode from "vscode"; import { IWebviewProvider, IWebviewWrapper, Command, Event, Extension, TextDocumentContentProvider, TreeDataProvider, Subscriber, WebviewPanel, WebviewProvider } from "vscode-extension-decorator"; class ExampleContentProvider implements TextDocumentContentProvider { provideTextDocumentContent(uri: vscode.Uri): string | vscode.ProviderResult { return "Hello World"; } } class ExampleTreeProvider implements TreeDataProvider { getChildren(element?: vscode.TreeItem): vscode.TreeItem[] { if (element) { return []; } else { return [ new vscode.TreeItem("Hello World") ]; } } } @WebviewProvider export default class ExampleWebviewProvider implements IWebviewProvider { wrapper?: IWebviewWrapper; wrapperClass?: Object; static show(data?: any) { (WebviewProvider as any).reveal(vscode.ViewColumn.One, data); } createWebviewPanel(): WebviewPanel { return vscode.window.createWebviewPanel( "ExampleWebview", "Example Webview", vscode.ViewColumn.One, { enableScripts: true } ); } didReceiveMessageHandle(message: any) { // handle the message here } getHtmlContent(data?: any): string { return `

Hello World

`; } } @Extension class ExampleExtension extends Subscriber { @TextDocumentContentProvider("ExampleContent") public readonly contentProvider: ExampleContentProvider = new ExampleContentProvider(); @TreeDataProvider("ExampleTree") public readonly treeProvider: ExampleTreeProvider = new ExampleTreeProvider(); @WebviewPanel("ExampleWebview") public readonly historyView: ExampleWebviewProvider = new ExampleWebviewProvider(); @Command("Example.sayHello") sayHello() { vscode.window.showInformationMessage("Hello World!"); } @Event("onDidSaveTextDocument") didSaveTextDocumentHandle(doc: vscode.TextDocument) { // handle file saved event here } } export function activate(context: vscode.ExtensionContext) { new ExampleExtension(); } ``` --- _Source: https://npm.io/package/vscode-extension-decorator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._