This article is more than 1 year old

Visual Studio Code: Let's talk about Extensions

Laying the foundations to build your own

Visual Studio Code is a lightweight, cross-platform and open source code editor that you can download for free at http://visualstudio.com.

In the third of this short series of articles, published in association with Microsoft, Sergii Baidachnyi, a Tech Evangelist at Microsoft Canada, will dive into the editor's extensibility features.

(In case you missed it, check out the first article, Visual Studio Code: The top five features, and the second, Visual Studio Code: How to integrate Git).

Sergii uses a Mac for this demo but VS Code works on Windows and Linux computers as well.

Extensions

Starting with Visual Studio Code Beta (0.10.1 version), you can use the Visual Studio Code Marketplace to download and install ready-to-use extensions or you can develop your own extensions using JavaScript or TypeScript.

Let’s start our overview with ready-to-use extensions that you can find in the Marketplace. At the Connect(); 2015 conference, Microsoft announced a single site from where you can download extensions for Visual Studio, Team Service, and Visual Studio Code.

Go to the Visual Studio Code page to find extensions that allow you to add support for new languages, install new themes, activate debugging features for frameworks, and more.

Visual Studio Code screenshot

The new extension library is growing all the time so you can expect to see new extensions populate the Marketplace. You can visit http://taco.tools/vscode to get more information on how to develop and add your own extensions.

In order to install an extension from the library, you can use the Command Palette window in Code, and execute the Install Extension command.

Visual Studio Code screenshot

When you select the command, Visual Studio Code will download a list of extensions and you can select any of them by scrolling through the list or typing a key word to filter.

Visual Studio Code screenshot

When the extension has finished installing, Code will prompt you to restart and then you can start using the extension. Depending on the activation type, the extension can be invoked automatically when you select a file or folder, or you can using a command in the Command Palette. Here are several extensions from the library:

  • PowerShell extension – add PowerShell language support to Code including code-snippets, IntelliSense, integration with online help, local scripts debugging, etc. This extension is a very good example of how to add new language support with a host of features;
  • Debugger for Chrome extension by default, Code supports Node.js and Mono debuggers but there is no way to debug a website that you develop in Code. This extension resolves the problem by adding Chrome debugger integration. As a result, you can start debugging your web site directly from Code and using all debugging features;
  • Go language support – another good extension, and one that shows how to add one more supported language to Visual Studio Code. Using this extension, you can find many snippets, build-on-save support, integration with the debugger, and many editor features;

You can list all the installed extensions using the Command Palette window and Show Installed Extensions commands.

Visual Studio Code screenshot

However, if you are looking for the physical location for your extensions, you can open the $HOME/.vscode/extensions folder on Mac and Linux or the %USERPROFILE%\.vscode\extensions folder on Windows devices.

Using these folders, you can remove any extension manually or check bits to increase your knowledge of the structure of the extensions structure. You can also use these folders to install the extensions manually if you have extensions that are not published to the library.

If you want to create your own extension, you can use Yeoman, a tool that allows you to scaffold a new project. In order to do this, you can use the Node.js package manager and execute the following commands:

sudo npm install –g yo
sudo npm install –g generator-code

Once Yeoman and the generator are installed, you can start working with Yeoman:

yo code

After executing this command, you will have to select a language that you will use (JavaScript or TypeScript):

Your next step is to select a name for the extension, provide a description and your publisher name. Yeoman will create all of the required files for you. The generator creates up to 100 files, so I do not recommend that you create or add them manually.

You will generally work with package.json and extension.ts (or .javascript), but the project contains a lot of supporting files: TypeScript definition files in order to support IntelliSense system, a template for unit tests, Node.js modules that allow you to get access to Visual Studio Code object model, configuration files for the project, and a launch.json file that allows you to debug your extension directly from Code.

Bear in mind that in the case of launch.json, Code contains two configuration elements that allows it to debug the extension or launch and debug unit tests: In both cases, the debugger will activate one more instance of Visual Studio Code and connect to that remote instance. This is really helpful for working with more complex plug-ins.

Once you create the project, you can start developing your extension. In order to find more about VS Code API and ways to activate your own extension, go to Code documentation, to find all the information. ®

More about

TIP US OFF

Send us news


Other stories you might like