3 Ways to Speed up Visual Studio Code Extension Development

I published my first Microsoft Visual Studio Code Extension to the gallery. Select text in the editor, press Ctrl+Shift+F1 and it will search Stack Overflow, and specifically entries tagged with PowerShell.

While creating an extension in Visual Studio Code, I found myself interacting with three command line tools and I wanted a more efficient way to work with them from PowerShell.

The Command Line

The three tools are npm, tsd and vsce.

  • npm – is the default Package manager for the JavaScript runtime environment Node.js
  • tsd – is the TypeScript Definition manager for DefinitelyTyped
  • vsce – is tool you use to publish Visual Studio Code extensions to the Extension Gallery

For example, if you want to open a URL in the users browser from your extension, you can leverage the node open package. I used TypeScript to create my extension so I needed to install both the the node package and TypeScript definition to make this work.

npm install open –-save
tsd install open –-save

After installing the packages you need and you finished developing your extension, publishing to the gallery is next. That’s a whole other command line tool, vsce. It too has several parameters and switches to setup a publisher, do the packaging or publishing and more.

Enter PowerShell

You’ve got enough things to remember. Plus, we’re polyglots. I prefer to let the computer augment my recall capacity, because it’s so much more efficient.

At the command line, if you type npm <space> and then <TAB>, PowerShell will complete it with file names in the current directory. I could type npm and press <Enter>, scroll around looking for the parameter/switch I need and then type install. Lots of typing, lots of chances for spelling mistakes, very inefficient.

Another scenario, lets say you wanted to run a script in your package.json. You can use npm run, press <Enter>, list the available scripts, bring up that up again and type the script you want to run.

Compare that to the quick and easy tab completion in PowerShell.

Note: If you don’t have the npm completion module, then from a PowerShell v5 prompt install it with:

Install-Module -Name NPMTabCompletion. After it is installed, do an Import-Module NPMTabCompletion

The Microsoft TabExpansion Module lets you dynamically interact with the environment as you type. When you type npm run, the NPM Completion module cracks open the package.json, converts it to PowerShell objects (ConverFrom-JSON), enumerates the scripts property to construct the drop down list. Lastly, each script entry has a name and it’s associated code. This is transformed into the list item and tooltip.

The Other Tab Completion Modules

All of the tab completion modules are on the PowerShell Gallery and can be installed using Install-Module.

Note: You also need the Microsoft TabExpansion Module

Install-Module -Name NPMTabCompletion
Install-Module -Name TSDTabCompletion
Install-Module -Name VSCETabCompletion

If you want do see how these were built, check it out on my GitHub repos: NPM TabCompletion, TSD TabCompletion, VSCE TabCompletion

Summary

These tab completions help you power through what you need to get done when using the command line tools. The added bonus, you can install each separately. So if you’re working with just TypeScript or NPM, this will make you more productive.

Leave a Reply

Your email address will not be published. Required fields are marked *