Skip to content

Testing VSIX Packages

Peter Strömberg edited this page Nov 12, 2023 · 7 revisions

A VSIX package is how VS Code extensions are packaged. It is a zip-file with the extension .vsix (e.g. you can examine the contents some with unzip -l).

Building a VSIX Package

To build the Calva extension (assuming you have done npm i):

$ npx vsce package

This will compile all the things and leave a Calva-<version>.vsix file for you. <version> will be picked from package.json, which on dev (which you branched off your changes from, remember?) will be the currently released version + 1 patch. In order to play nicely along with VS Code's auto-update features, you probably want to add a prerelease suffix to that version, so that it reads <version>-your-prerelease-suffix.

CircleCI builds

Please also note that a VSIX package will be built by CircleCI, when you file a PR. You'll find a CI section at the end of the PR page on Github. There you'll see that one of the build steps is called ci/circleci: build. The details link takes you to the job on CircleCI, and there you should find a tab labeled Artifacts. Download the .vsix file from there. (This file will always be suffixed as a prerelease). The file may download as a .zip file, and if so, change the file extension to .vsix so it can be installed in VS Code.

CircleCI not showing the Artifacts tab

NB: _At a time of this writing you need to be logged in on CircleCI to see it. Either log in or do this:

Click on one of the other tabs, say Parameters, and then edit the URL, changing #build-parameters to #artifacts.

Installing a VSIX Package

To use your custom Calva VSIX package you open the Extensions pane in VS Code and locate the small meatballs menu at the top of the pane. It has the option: Install from VSIX.... If you downloaded the VSIX file from CircleCI, you may need to change the extension from .zip to .vsix so VS Code can install it.

change-downloaded-vsix-file-extension.mp4

To start using the currently released Calva again use the settings gear menu on the Calva entry in the Extensions pane and choose Install Another Version....

VS Code adhers to SemVer when it comes to extension versions. So if you have autoupdates on, which is nice, it will update to any released version with a major.minor.patch higher than the one you are currently using. And it will also update any major.minor.patch-pre-release, with the same, or higher, major.minor.patch. Good to keep in mind.