vscode-framework

Full-featured set of tools to develop VSCode extensions with speed and minimal friction.

Usage no npm install needed!

<script type="module">
  import vscodeFramework from 'https://cdn.skypack.dev/vscode-framework';
</script>

README

VSCode Frameworkbeta

Full-featured set of tools to develop VSCode extensions with speed and minimal friction.

  • 💡 Not Boilerplated
  • ⚡️ Auto Reload
  • 🔑 TypeScript Types from package.json Contribution Points
  • ⚙️ Use TypeScript type for configuration instead of schema in package.json
  • 📦 Publish Production-ready Build with zero config
  • 🚀 Use console methods in production (creates extension output for you)
  • 🛠️ Highly Configurable

Usage

  • Install it in your project: npm i vscode-framework -D

Brief Overview

import vscode from 'vscode'

export const activate = (ctx: vscode.ExtensionContext) => {
    ctx.subscriptions.push(
        vscode.commands.registerCommand('extension.command', () =>
            vscode.window.showInformationMessage(`Debug is ${vscode.workspace.getConfiguration(extension).get<true>('enableDebug') ? 'enabled' : 'disabled'}`),
        ),
    )
}

With this framework:

import vscode from 'vscode'
import { getExtensionSetting, registerExtensionCommand } from 'vscode-framework'

export const activate = () => {
    // typesafe. ready for refactors
    registerExtensionCommand('command', () =>
        vscode.window.showInformationMessage(`Debug is ${getExtensionSetting('enableDebug') ? 'enabled' : 'disabled'}`),
    )
}

Even More Features

  • access extension context anywhere via extensionCtx export

Why it was Created?

There are several things that I don't really liked, but one of the important parts was the boilerplated generator-code.

Also, web extensions must be bundled into a single file, so just let the included esbuild do all the work.