Creating Visual Studio Code Extension Packs

Ever wished that you could encapsulate some recommendations or best practices for Visual Studio Code and make them available to your team? Perhaps you just want to make it easier to enable and disable a collections of extensions? If so, then it’s time to consider building your own VS Code extension pack. An extension pack is simply a VSIX extension that references one or more other extensions.

The process is surprisingly straightforward. You will need to have Node.js installed (or a development container). This allows you to use NPM to install the three required dependencies. You will need yo (provides the framework for generating the code), generator-code (provides the VS Code-specific options), and vsce (supports packaging and publishing).

1npm install -g yo generator-code vsce

After that, you can use yo code to create a Visual Studio extension. When prompted, choose New Extension Pack.

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? 
  New Extension (TypeScript) 
  New Extension (JavaScript) 
  New Color Theme 
  New Language Support 
  New Code Snippets 
  New Keymap 
❯ New Extension Pack 
  New Language Pack (Localization) 
  New Web Extension (TypeScript) 
  New Notebook Renderer (TypeScript) 

Next, you’ll configure the extension as you’re prompted:

? Add the currently installed extensions to the extension pack? No
? What's the name of your extension? My Recommendations
? What's the identifier of your extension? vscode-recommendations
? What's the description of your extension? A set of recommended extensions
? Initialize a git repository? Yes

This will create a folder which contains the complete definition for your extension, as well as an appropriate .gitignore, .gitattributes, and .vscodeignore.

The remaining steps are just as straight-forward:

1. Update the package.json file to include the name of the extensions to reference in the extensionPack section. For example:

   1 "extensionPack": [ 
   2 	"bierner.emojisense",
   3 	"bierner.github-markdown-preview"
   4 ]

2. Define a value for publisher in the package.json file. If you intend to distribute this privately, you do not need to register the publisher (but it should be unique, so consider registering anyway!). If you intend to make the extension available publicly, then you will need to register the publisher ID.

3. If you want to have a nice icon associated with your package, create a 128x128 PNG ( not an SVG) and add an icon entry to the package.json.

   1"icon": "images/icon128x128.png"

4. Run vsce package in the same folder as your code to create a .vsix that can be distributed or published. Installing the created package will install the recommended extensions.

And that’s all it takes to publish your own extension recommendations.

Happy DevOp’ing!