Packaging the Loom extension

The loom-vscode package ships to the VS Code Marketplace as a .vsix bundle. Vite bundles the client and the language server into dist/client.js and dist/server.js, and vsce — the Marketplace packaging tool — wraps the result into the .vsix. Every library the extension needs is inlined into the bundle, so the published package carries no runtime dependencies.

The manifest

VS Code reads the manifest to learn what the extension is and when to run it. The activationEvents field loads the extension the first time a loom file opens, and the contributes.languages field registers the .loom extension as the loom language so that event can fire. The main field points the extension host at the bundled client.

The pack:vsix script builds the bundle and then packages it with vsce. The bundle inlines every dependency, so all dependencies belong in the devDependencies field — nothing is installed at the user's end.

{{ version = ${version} }}

JSON

{
  "name": "loom-vscode",
  "publisher": "athrio",
  "displayName": "Loom",
  "description": "A VS Code extension for Loom",
  "version": "::[version]",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/athrio-com/loom.git",
    "directory": "packages/loom-vscode"
  },
  "engines": {
    "vscode": "^1.120.0"
  },
  "activationEvents": [
    "onLanguage:loom"
  ],
  "main": "./dist/client.js",
  "contributes": {
    "languages": [
      {
        "id": "loom",
        "extensions": [
          ".loom"
        ]
      }
    ]
  },
  "scripts": {
    "build": "vite build",
    "watch": "vite build --watch",
    "pack:vsix": "vite build && vsce package --no-dependencies"
  },
  "devDependencies": {
    "@types/vscode": "^1.120.0",
    "@volar/language-server": "^2.4.28",
    "@volar/vscode": "^2.4.28",
    "vscode-languageclient": "^9.0.1"
  }
}

The TypeScript config

The tsconfig.json extends the workspace-root tsconfig.base.json and covers the src directory. It adds the node and vscode type packages, since the extension runs in the VS Code host. Vite produces the dist bundle, so the configuration is a development tool only and never ships in the .vsix.

JSON

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "out",
    "rootDir": "src",
    "types": ["node", "vscode"]
  },
  "include": ["src"]
}

What stays out of the package

The published .vsix needs only the bundled dist and the manifest. .vscodeignore keeps the rest out: the source under src, the Vite and TypeScript configs that built the bundle, the sourcemaps, and the editor settings under .vscode. None of these run at a user's end, so none of them ship.

vscodeignore

src/**
vite.config.ts
tsconfig.json
**/*.map
.vscode/**

Loom