Building My First VSCode Extension

My journey in creating and publishing the vscode extension and why it is straightforward.

Photo by Mohammad Rahmani on Unsplash

It’s a fantastic journey of how much a person can learn when he tries to do new things. That is pretty much the same feeling I had when I started writing my first VSCode Theme extension (Flutter Light Theme). It was amazing how much control we can have on its look and feel. Below are some of the things that I found easier while developing/deploying my theme.

1. Creating the VSCode Extension ( Predefined Yeoman generator )

There is a predefined npm package ‘generator-code’ already available to get you started. Use yo code to launch the Yeoman generator. The interactive panel allows you to select from the available extension options.

Select the “New Color Theme” option and provide the name and other details to get the boilerplate code setup in your machine.

Before getting started, it is always a good practice to examine what we have currently. The “Developer: Generate Color Theme from Current Settings” option from the command panel lets you review the current theme settings. The command gives you the combined version of your current Theme settings as well as your settings.json file.

2. Testing your Extension

Testing your Theme extension is like running any of your projects via VSCode. The ‘Run Without Debugging/Start Debugging’ option opens a new VSCode instance with the recently opened project. Then, your color theme gets applied, and you can start changing and testing your new color theme.

If you want to understand the rule applied to a keyword in a file, you can use the ‘Inspect Editor Token and Scopes’ option from the command panel.

Inspecting Token Scope from my color theme

3. Updating colors

In VSCode, the terminal has some predefined colors that may/may not go well with your intended color theme. No Problem!. VSCode allows you to update those as well. Below are some terminal colors that I updated to make the terminal text more visible.

"terminal.ansiCyan": "#00f",
"terminal.ansiGreen": "#008A00",
"terminal.ansiMagenta": "#00f",

Welcome Page colors, git decoration colors can also be updated via the colors options in your theme.json file. I didn't know this earlier.

The workbench can overwrite all colors defined in the theme.colorCustomizations option in your settings file.

4. Publishing the extension

Publishing your extension is one of the easiest tasks in the development of VSCode extensions. The process is extensively explained in the visual studio code API docs.

The vsce ( The Visual Studio Code Extension Manager ) helps us easily package the extension and publish it to the marketplace. Once we are done with our extension, color theme, in my case, Create the publisher in the marketplace and generate the Personal Access Token ( PAT ). ( screenshots are available in the above link for easy reference…). Once we have the PAT, execute the following commands.

vsce login <publisher name>
//This will ask you for the PAT for verification. 
// Once Logged in 
vsce publish // This will publish the extension to the marketplace.

We can use the vsce publish command to publish the semantic versioning updates, which will update the theme’s package.json before publishing to the marketplace.

vsce publish minor/major/patch

Conclusion

I was working with Flutter and could not find any Light Themes that fit my needs. So, I started working on this one. Sometimes, what seems difficult might not be really that way when we start paying attention. I was able to complete the Theme extension and published it in a day.

Hope this helps you get started with VSCode extensions.

Happy Coding!

Reference Links:

Publishing VSCode Extensions: https://code.visualstudio.com/api/working-with-extensions/publishing-extension

Flutter Light Theme: https://marketplace.visualstudio.com/items?itemName=maneesh.flutter-light-theme