Visual Studio Code Tips & Tricks

Good code editors increase development speed and reduce application development time. Visual Studio Code proves this sentence true.

Visual Studio Code or VS Code is one of the most popular Code Editor Nowadays. It is Open Source Code Editor with over 52K stars on GitHub. 

VSCode was released in 2015 and now It is used by over 35% of developers in the world according to the Stack overflow Developer Survey.

VSCode combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.

Now It is not only a simple code editor but used as a proper IDE.

If you have not tried VSCode before I strongly recommend you to try it once and I am sure you will love it.

If you are using it then you will be aware with the basic VS Code shortcuts and techniques.

In this article, you will find important Visual Studio Code tips and tricks which I am sure will increase your development speed.

• Visual Studio Code Important Shortcuts
• VSCode Emmet Notation
• JSON to TS Converter
• VSCode Debugging
• Zen Mode
• User Defined Snippets
• Live Share

We will start with the important visual studio code shortcuts for Windows, Linux and Mac.

Important Shortcuts

VSCode comes with a set of default shortcuts. here we will see important shortcuts which are frequently used in coding.

Command Palette

Using Command Palette you can access all available commands based on your current context.

Windows / Linux : Ctrl + Shift + P or F1
Mac : Cmd + Shift + P or F1

Quick Open

This shortcut is used to quickly navigate between files, with additional options. 

Using 

<b>@:</b>

 we can navigation between methods and symbols in file.

Using 

:

 we can navigate to a particular line in a file. At that time it also show you maximum number of lines in file.

You can also navigate to the previously accessed code window using Ctrl + P P

Windows / Linux : Ctrl + P 
Mac : Cmd + P

Format Document

This is an extremely helpful feature of VSCode.  We can format coding document using Format Document Command from Command Palette, Context Menu or using below Shortcut.

Windows / Linux : Altr + Shift + F

To format selected portion from document use below shortcut.

Windows / Linux : Ctrl+K Ctrl+F

Toggle Sidebar

Sidebar contains various panels, like Open Editors, File Tree Panel etc. We can toggle this sidebar based on requirement.

Windows / Linux : Ctrl + B
Mac : Cmd + B

Toggle Terminal

VSCode come with the inbuilt terminal, we can toggle this terminal window using below shortcut.

Windows / Linux : Ctrl + J
Mac : Cmd + J

Copy Line or Code Block Up / Down

We can copy a single line or code block above or below the selected line just easily.

Windows / Linux : Altr + Shift + Down 
Mac : Opt + Shift + Down

here you can use UP key if you want to copy the code above the selected line.

Move Line or Code Block Up / Down

We can move a single line or code block above or below the selected line just using shortcut.

Windows / Linux : Altr + Down 
Mac : Opt + Down

here you can use UP key if you want to move the code above the selected line.

Go To Definition

Select a symbol then press F12. Alternatively, you can use the context menu or Ctrl+click (cmd+click on macOS).

Peek Definition

Select a symbol then press Altr + F12. Alternatively, you can use the context menu.

Find All References

You can find all references of a particular symbol in a project using this feature.

To use this feature select a symbol then type Shift+F12. Alternatively, you can use the context menu.

Multi Cursor Selection or Column Selection

Multi Cursor selection is very helpful while we required to edit multiple rows at the same time.

Windows : Ctrl + Altr + Down 
Linux : Altr + Shift + Down 
Mac : Opt + Cmd + Down

here you can use UP key or Down key.

You can also add cursor in multiple line using Altr + Click.

For column selection you can use Middle mouse button click and move on multiple lines.

• Note

You can see all other shortcuts in File > Preferences > Keyboard Shortcuts. You can also update and customize the shortcuts here.

If you are using any other editor before like sublime or atom, and you want to use same shortcut in vscode then you can also change the default shortcut setting. refer VSCode Keybindingsfor more information.

Find here Visual Studio Code Shortcut Cheat Sheet for Windows, Linux and Mac

Emmet Notation

Visual Studio Code supports Emmet Notation right in the editor. No extension is required. It supports the majority of the Emmet Actions including expanding Emmet abbreviations and snippets

You can use most of the Emmet actions with multi-cursors as well.

Find here Visual Studio Code Emmet Cheat Sheet

JSON to TS Converter

Generally, Angular or Typescript application communicates to the web server using JSON web services, we write interface same as JSON api to map TypeScript object and JSON request & response. We can automate this Object conversion from JSON.

Instead of writing interfaces manually we can use very popular JSON to TS extension. 

Convert from clipboard (Ctrl + Alt + V)

Convert from selection (Ctrl + Alt + S)

• Note

If you want to paste JSON to the code of Go, C#, C++ or TS then you can use another extension called Paste JSON as Code.

Refer here Best Visual Studio Code Extensions.

Debugging

Debugging is the crucial part of any application development. VSCode supports inbuilt debugger. It also has Chrome debugger extension to debug an application running on chrome.

VSCode provides additional feature other than the normal debugger,

• Conditional Breakpoint
• Log points.

Conditional Breakpoint

You can add a condition and/or hit count either when creating the breakpoint with the Add Conditional Breakpoint action or with the Edit Breakpoint action for existing breakpoints. In both cases an inline text box with a drop-down menu opens where the expressions can be entered:

Log points

A Logpoint is a variant of a breakpoint that does not “break” into the debugger but instead logs a message to the console. Logpoints are especially useful for injecting logging while debugging production servers which cannot be stopped.

A Logpoint is represented by a “diamond” shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces (‘{}’).

Zen Mode

Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Sidebar and Panel) and going to full screen.

Zen mode can be toggled using the View menu, Command Palette or by the shortcut Ctrl+K Z. If you prefer not to transition to full screen, that can be disabled via 

window.fullScreenZenMode

.

Double Escape exits Zen Mode.

User Defined Snippets

VSCode has a large number of extensions which are very helpful to reduce boilerplate code writing.

For example Angular 6 snippets, Bootstrap & Font-awesome snippetsetc. 

The same way we can also write our own frequently used code snippets, refer here to see how to create user-defined snippets

Live Share

Live Share in VSCode code is recently released. 

Live Share enables your team to quickly collaborate on the same codebase without the need to synchronize code or to configure the same development tools, settings, or environment.

For more information refer VSCode Live Share article