Every developer has a lot to gain by using a powerful editor. Auto-complete, fast file switching and the ability to install packages for new technologies are a few of the perks that every developer enjoys utilizing. And you get all these features in Visual Studio Code. It's lightweight and ultra-fast. It's a fast editing experience, similar to what you get with brackets, Sublime Text and Atom while it's debugging and integration experience is similar to what you get with Web Storm or Visual Studio.
Everyone should master the tool that he has inside his toolbox. It helps to use the right tool at the right moment and gain the most from it. In this article I will walk you through what will help you the most when you start using Visual Studio Code and be productive at the meantime.
So, whether it's a Windows, OSX or Linux, let's start walking. If you haven't downloaded Visual Studio Code yet, download and install it from https://code.visualstudio.com.
Language Support
With the language support for 33 Languages Visual Studio Code blows off the following features:
![]()
From the .Net Native Language Support family, C# wins the most of it with IntelliSense, Linting, Outline, Refactoring and all of the rest and not to say its celebration time for TypeScript developers.
“code” is the shortcut keyword to launch Visual Studio Code from cmd / console. So you can just type “code” in the Run Command box and hit Enter to start it.
Enhance your productivity with the following:
- code <filename>: will open a file in VSCode
- code <appDirectoryPath>: will open the project folder inside VSCode
- code . (dot): run this command from a console if you're inside a folder and want to start code and open the current folder into it.
The Command Palette
Do Something:: CTRL+P
Start the command palette and do something. This is the keyboard shortcut you will be using most frequently in VSCode. It gives you access to all the available commands in context. It also shows the keyboard mapping for each command. You can just open the palette by hitting CTRL+P and begin typing whatever you want to do next and the command will be available to you. No need to visit the menu bar. For example, you can say “Open File” / Open Folder / Close File /Close Editor and so on and hit Enter when you see the desired command slide onto the top.
![]()
Did you notice the right angle bracket at the command palette? Actually it's a short code!
![]()
It's a short code for accessing all the commands in context. You can hit Backspace and you have several short codes. You might want to hit CTRL+O in case do not want to first see the command palette and hit Backspace.
Let's look at the available short codes one by one:
- “>” Do Something:: CTRL+P, we've just seen above.
- “@” Go to Symbol: CTRL+O then hit “@”
Use this short code to find any symbol inside the currently opened file.
![]()
As you hit “@” after opening a file, it will provide a list of all the available symbols and also the type of the symbol! Did you notice the icons in the left side of the symbols?
![]()
“@:” Go to Symbol by Category: CTRL+O then hit “@:”
Like Go to Symbol, it lists the available symbols in the currently opened file for you but in a Categorized manner. If you see in the right side of the command palette, you will find that it is categorized by Types. So, as in the image right below, I've two Array type symbols, 1 Boolean, 8 Strings and so on. The beauty of this short code!
![]()
#” Search for a Symbol in the project: CTRL+O then hit “#”
Like Go to Symbol, it finds and lists the symbols inside the current project.
![]()
Navigate to a File or Symbol: No short code required.
Just start the bare command palette by hitting CTRL+O / CTRL+E and type any symbol or file name that you want to find or navigate to.
![]()
Results would also be produced from the recently opened files.
CTRL+Tab gives you access to quickly navigate through the last set of opened files. It is very similar to what you find in most editors, in other words Sublime, Visual Studio, Web Storm and so on.
“:” Go to Line #: CTRL+O then hit “:” or CTRL+G
![]()
I loved this feature. I've been using this feature in Sublime Text for a long while but the available lines count goes a extra mile. You can see in the image above that it shows the line numbers I can navigate through, in other words from line # 1 to line # 339. Pprovide the line number and you're there!
![]()
“!” Errors and Warning:: CTRL+O then hit “!”
Shows all of the errors and warnings from the current project. Select and hit Enter to navigate.
![]()
“?” List of available actions: CTRL+O then hit “?”
No worries at all in case you forget the short codes. Just remember CTRL+O (the quick access key) and hit “?”. It will show the list of available short codes and their actions.
![]()
Intro to Editor
Multiple instances of the editor is supported. You can either launch a new one by going through the Start menu or you can hit CTRL+SHIFT+N from within the Visual Studio Code to start a new instance.
You can open up to three editor windows side-by-side. Click the Split Editor icon in the upper-right corner of the editor window, or hit CTRL+/ as in the following:
![]()
![]()
![]()
Toggle Sidebar: hit CTRL+B to toggle Sidebar navigation window
![]()
The Viewbar on the very left side gives you additional context-specific indicators and lets you switch between views. It also has a beautiful search box with RegEx support that helps you quickly find text within all file(s) in the current working folder.
![]()
![]()
VSCode remembers the state of where you're working last, very like sublime text does. So when you start the next time, you will find it in the same state as where you had closed it.
Enable Auto Save: With this option turned on you don't need to hit CTRL+S to save your work after every edit. You can enable it from file menu or from the command palette CTRL+P then type “auto”.
![enable auto save]()
![]()
With that explained, I will conclude this part. In the next part we will see how to start using the git integration with VSCode. I have found VSCode pretty interesting so far. I hope you find it useful too. See you in the next part of this article.
You might find interesting my next article on Git Integration in Visual Studio Code in this series: