Over a million developers have joined DZone.

Introduction to Visual Studio Code

DZone 's Guide to

Introduction to Visual Studio Code

Here is a promising tool for source code editing across platforms and multiple languages. It's loaded with features and a clean uncluttered interface. And it's free and open source!

· Web Dev Zone ·
Free Resource

Visual Studio Code is Microsoft’s tool for source code editing and it is designed for Windows, Linux, and OS X. It’s a tool used as a support for embedded Git control, debugging, syntax highlighting, snippets, intelligent code completion, and code refactoring. It is an agile, cross-platform, and multi-language editor, which you can download directly from Visual Studio website.

0-Visual Studio Code

Overview of Visual Studio Code User Interface

The main user interface of Visual Studio Code is divided into five sections:
1. Menu Bar
2. View Bar
3. Side Bar
4. Editor
5. Status Bar

1-user interface of Visual Studio Code

The first section at the top will be your menu bar, then on the extreme left-hand side you have got the view bar. Next to the view bar you have the sidebar. The big area in the center is where you have your editor, and at the bottom there is a status bar.

On the menu bar, you have got a file menu. The file menu will give you access to various file related functions so you can open files/folders, save files, close editor/folders, etc.

The edit menu will give you access to various basic editing functions such as undo, redo, cut, copy, paste, and also the find and replace functions.

On the view menu, you can access and also toggle various of the user interface related components so you can switch between various areas of the view bar.

The go to menu allows you to do basic navigation in your code so you can navigate forward, backward, access the navigation history as well as go to specific file, symbol, definition, or a line number.

The help menu gives you access to the documentation and release notes and also checks for updates.

The view bar on the left-hand side works in conjunction with the side bar. As you navigate between these various functional areas, you will also change the view of the sidebar.

On the status bar, you will be able to access various extension related functions. You will also see icons related to Git support so from here you can perform functionalities such as switching between branches and you can also synchronize changes in your local repository with your remote repository.

Next to that there are errors and warnings and that’s going to be dependent on the type of project that you are editing so if there are errors and warnings, you will be able to see those down here.

On the right-hand side of the status bar, it shows current line number and column, it shows to us that we are using spaces or tabs and the number of spaces. It will show the encoding of the current file and then also it will allow us to set the end of line sequence.

Smiley face allows you to tweet feedback to the visual studio code team. You can also submit a bug from here so this will take you to Visual Studio Code repository on GitHub from where you can open an issue.


The announcement and a release preview of Visual Studio Code were done at Microsoft’s Build conference in 2015. Later in the same year, the release was done under the MIT License, the source code was posted to GitHub, and the announcement of extension support was done. In 2016, Visual Studio Code was released to the web as free, open source, and able to run everywhere no matter what OS you are using. There are many regular updates which are very easy to install, and all updates are released on all platforms simultaneously.

ide ,visual studio code ,dev environment ,editor

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}