Create your own Extension Pack for Visual Studio Code

26 Apr, 2020

I use multiple VSCode extensions to increase my productivity daily. When we wanted to standardize development in an important project and implement a basic set of necessary extensions, we found it necessary to create an Extension Pack. This way we could better manage the list of required extensions.

What is an Extension Pack?

It's a single extension that groups other extensions together. When installing the pack, all included extensions are installed together. It's ideal for:

• Sharing your favorite tools with colleagues
• Maintaining consistent configurations across teams
• Easily updating collections

Prerequisites

1. Install Node.js

2. Install Yeoman and the VSCode generator:

   npm install -g yo generator-code
   

Generate your Extension Pack

1. Run the generator:

   yo code
   

2. Select "New Extension Pack"
   

3. Choose whether to include your current extensions (I selected No to customize later)
   

Add your extensions

1. Open the generated project in VSCode (code .)

2. Edit package.json and add the extension IDs to the extensionPack array:

   "extensionPack": [
     "eamodio.gitlens",
     "aaron-bond.better-comments",
     "Gruntfuggly.todo-tree",
     "yzhang.markdown-all-in-one",
     "bierner.emojisense",
     "usernamehw.errorlens",
     "IBM.output-colorizer",
     "PKief.material-icon-themee"
   ]
   

   

   TIP: These are the IDs

   

   The IDs appear at the end of the URL as 'itemName=Gydunhn.vsc-essentials', the ID is: Gydunhn.vsc-essentials.

My favorite extensions:

• GitLens — Git supercharged
• Better Comments
• Todo Tree
• Markdown All in One
• :emojisense:
• Error Lens
• Output Colorizer
• Material Icon Theme

Your Pack Icon

1. Note that I added the icon field in the package.json file, with the path img/essentials.png, so if you create a folder with that name, you can put an icon with that filename there. It should be 250px x 250px, so it's identifiable when installed.
   1. Example:
      

Package your extension

1. Make sure publisher is configured in package.json

2. Run:

   vsce package
   

3. A .vsix file will be generated in your project
   

Note: You can publish to the VSCode Marketplace by following the official documentation.

Install your pack

Manual installation in VSCode

1. Open Extensions (Ctrl+Shift+X)
2. Click on the ⋮ menu → Install from VSIX...
3. Select your .vsix file
4. Restart VSCode

Now your entire team can enjoy your extensions with just one click!

Tips

• Update the README.md to explain the purpose of the pack
• Add a License file
• Use semantic versioning when updating
• Evaluate whether it's necessary to publish in the Marketplace to share it widely or not.

Source:

Gydunhn's Blog - Crea tu propio Extension Pack para Visual Studio Code

View original

#Development #Extensions #Productivity #Tools #VSCode