- #WRITING VISUAL STUDIO EXTENSIONS HOW TO#
- #WRITING VISUAL STUDIO EXTENSIONS INSTALL#
- #WRITING VISUAL STUDIO EXTENSIONS GENERATOR#
- #WRITING VISUAL STUDIO EXTENSIONS CODE#
You will also want to initialize a git repository to save your changes and keep your code in source control unless you’ve already initialized one yourself.įinally, it will ask if you’d like to use webpack to bundle your source code. The name is the “pretty” name that users will primarily see, while the identifier is used for… uniquely identifying your extension along with your marketplace organization, ie brandongregoryscott.kazoo. If you have any experience with TypeScript, I would highly recommend setting up the project with it from the start - I won’t gush over the benefits that TypeScript gives for modern JavaScript development here, but you should still be able to reasonably follow along with this article even without TypeScript experience.Īs far as configuration goes, give your extension a name, identifier and description. Screenshot of the interactive prompt that Yeoman opens with Once both have been successfully installed, you should be able to run Yeoman to configure your project:
#WRITING VISUAL STUDIO EXTENSIONS INSTALL#
Run the following command to install Yeoman and the VS Code generator:
#WRITING VISUAL STUDIO EXTENSIONS GENERATOR#
The official “Getting Started” guide for developing an extension recommends using Yeoman, a code generator written in NodeJS, to scaffold out the project with a simple ‘Hello World’ extension. This article assumes the reader has a baseline level of knowledge on git, npm, NodeJS, and of course, VS Code. While I would encourage you to look for existing extensions or contributing to existing extensions before creating your own, it can be a valuable learning experience and a powerful tool to keep in your back pocket.
#WRITING VISUAL STUDIO EXTENSIONS HOW TO#
In this article, I’ll be giving an overview of how to get started building a VS Code extension. After a few Friday afternoons and weekends, I proudly presented the kazoo extension to my team. The goal for this extension was to automate the process of adding keys and copy to various translation files, using the Google Translate API for placeholders.
I had been curious about VS Code extension development for a while, so I decided this was the perfect opportunity to get my feet wet. I didn’t find any extensions that quite fit this workflow for managing keys and translations in TypeScript. Highlight the English copy and translate it using an extension wrapping the Google Translate API.Add the new key and its English copy in alphabetical position.Insert the new key in the correct alphabetical position.Open the interface that defines keys which each language file must "implement" (or provide a translated value for).I found another one that worked, but I eventually became frustrated with the tedium of the whole process, with or without the Google Translate extension: I found one, and it worked for a while, but eventually broke without support from the developer. Naturally, I first looked for an extension that would send my English copy to the Google Translate API and replace it. At a minimum, 3 files needed to be updated to add a key, the English copy, and for the first pass, a placeholder Spanish translation using Google Translate. Seeing as this was over a year into development, there were lots of areas where English copy needed to be extracted, tokenized and translated. Recently, my team was tasked with setting up our React application to support multiple languages. Oftentimes I couldn’t find an extension that did what I wanted at all. Awesome - time to move on with my work.īut there have also been many instances where the extension I found didn’t quite work as I needed, had bugs, or simply wasn’t maintained anymore. Sometimes, I’ll find the right extension the first time - it has all the features I need, it’s well documented, and seems to be actively supported. If I have to do the same action more than 3 or so times, I’ll usually go searching for an extension that fits my use case. You’ve also probably run into a situation where you keep repeating a certain action, text transformation, etc. If you use Visual Studio Code on a daily basis for your development, you likely already have a set of favorite extensions that improve your productivity.