Visual Studio Code: The top five features

Getting started with the new open-source code editor

Visual Studio Code is a new, lightweight, and open-source code editor that can be installed on Windows, Linux or Mac OS X. The first of this short series of articles, published in association with Microsoft, SSergii Baidachnyi, a Tech Evangelist at Microsoft Canada, will take us through the following features of Visual Studio Code:

For Mac devices, the installation process is very simple: you just need to download the Visual Studio Code install package, drop it into the Application folder, and it is ready to run. Of course, geeks can visit GitHub repository to build and run VS Code directly from the source, but if you don’t plan to contribute, it is better to use a stable and ready to use installation.

We will be using the Visual Studio Code beta (0.10.1) version to cover some important features, but Microsoft usually publishes public installation packages on a monthly basis, adding new features. For example, in the beta, Microsoft introduced extensibility features, GitHub source availability, and lots of small changes around debugging and languages.

Navigating the Editor

Visual Studio Code is a folder-based editor, so in order to open an existing project, you need to open the project’s folder. If you want to create a new project, you just need to create a folder and open it in Code.

In general, when using Visual Studio Code, you will work with the following common parts of the interface: Viewbar, Sidebar, Statusbar and Editor window.

The Viewbar (an interface near the left edge) allows you to switch between different views and contains information about items such as unsaved changes and commits.

The Sidebar allows you to display different views like Explore, Search, Git and Debug. The most common view is Explore, which allows you to navigate between files in your folder, create new files or deleting existing ones. The Search view allows you to find a search term inside the folder’s files, the Git view provides some features related to Git, and Debug view provides information about breakpoints, variables and related items during debugging sessions.

Finally, the Editor window allows you to edit files. You can open up to three Editor windows at the same time - just use the Sidebar to select any file and select Open to the Side context menu item to open the file in a new Editor window (pictured below).

In the context menu you can find two more useful commands: Reveal in Finder and Open in Console. The first one allows you to open a folder where the selected file is located, and the second one allows you to open the console in the context of the folder.

Visual Studio Code supports many different settings. To change the existing settings, you can use User Settings or Workspace Settings:

User Settings allows you to apply settings to all folders, while Workspace Settings allows you to override settings for the current workspace.

The settings contain editor configuration, information about extensions that should be excluded from Explore and Search views, and IntelliSense settings for different languages. You can use your mouse for these commands, or if you prefer hot keys - just type ⇧ ⌘ P, and you will see the following command options:

In this window (Command Palette) you can see hot key combinations for future use. You can change any key combination through Preferences: Open Keyboard Shortcuts command using the Command Palette.

Finally, Visual Studio Code supports color themes. You can add your own theme with the help of the extensibility features or select one of the preinstalled themes. To select a color theme, you can use the Command Palette window or Color Theme menu item:

Top 5 Editor Features

1. Language Support

Visual Studio Code supports more than 30 languages, and the greatest number of features supported is for TypeScript, CSS, HTML, JavaScript and JSON.

However, this is not a complete list. Starting with the beta version, VS Code supports extensions, and you can already find some that support Go, OmniPascal, classic ASP and others. Of course, in order to have good IntelliSense support for JavaScript, TypeScript or C#, the editor should have information about the projects in your folder. VS Code can get information about your projects by reading it from package.json, project.json, jsconfig.json, tsconfig.json and even from .csproj files. Visual Studio Code scans not just the root folder but all subfolders, which enables you to create several projects using subfolders and your own projects’™ files.

Git Integration

Visual Studio Code supports integration with Git and the execution of all Git related operations directly from its interface. In order to start working with Git you will need to switch to Git view and initialize Git repository:

Now you can work with Git locally, and using GIT view you can see which files are changed:

Once you invoke the Git menu, you will have access to basic commands that allow you to commit changes, put files on stage or add a remote server and execute push and pull tasks:

Finally, by clicking the branch name in the status bar you can open the command line for the Git tool, where you can create a new branch or switch to an existing one.

3. Tasks

The next important feature in Visual Studio Code is tasks. Thanks to tasks you can run any command line tool directly from Visual Studio Code and get output - including compilers, deployment tools, and packaging tools.

To create a task you first need to start with a tasks.json file that can contains one or more task definitions. Usually it contains a task name, parameters and information related to the output; but before creating a native task for VS Code, pay special attention that if you have Gulp, Grunt or Jake tasks in your project, they will be recognized automatically. You can use all existing experiences there using well-known technologies but if you want to add your own problem matcher or execute something simple, you can use tasks.json.

In order to execute any task, you can use the Command Palette window:

4. Debugging

Visual Studio Code supports debugging for Node.js and Mono runtimes. In order to activate debugging features we need to add a launch.json file to our project. If you decide to make everything from scratch you can open Debug view in Code and click the Settings button in order to add launch.json:

By default, Code will add launch.json for Node.js projects but you can easily reconfigure it to Mono. Once configuration file is ready you can run the Debugger:

Working with Debug view, in a debugging session, you can find the following elements:

Breakpoints -“ you can see and manage all available breakpoints in the project. This window contains information like the name of a file, line number, and subfolder name. In order to manage breakpoints you can use the context menu;

Watch - using this window you can evaluate expressions with variables that are accessible in the context;

Variables - this window shows local variables and their values. Additionally, you can check parameters and “this” object;

Debug actions panel - using this panel you can pause or stop the process. Additionally, you can move through your code step by step;

Debug console -one more way to evaluate expressions

Debug view has all of the necessary attributes of a professional debugger.

5. Extensions

With the recent release of the beta version of Visual Studio Code, developers can now use extensions. You can find many of them by visiting Visual Studio Marketplace:

The library already contains integration with some debuggers, themes, snippets, and languages. The number of extensions is low right now, but this feature was only announced last week, and more extensions will be coming soon.

VS Code also supports APIs that allow you to develop extensions. You can use JavaScript or TypeScript to build your own extensions and debug and test them in VS Code.

In order to install existing extensions, use the Command Palette window and execute an appropriate command:

Visual Studio Code will download the full list of all available names and you can filter it and select what you want:

Summary

In this article we have discussed basic Visual Studio Code navigation and features. If you want to know more about integration with Unity3D, how to publish your applications to Azure, how to create Office add-ins and other topics, visit the Code documentation page, where you can find much more information.

Visual Studio Code is a tool to check out because its IntelliSense, Debugger, Tasks, and Extensions are exactly the type of features that will increase your productivity. Stay tuned for the next article in this Visual Studio Code series. ®