Wanna see something cool? Check out Angular Spotify 🎧

Use VSCode Like a PRO

VSCode is one of the most popular code editors, skilled use of VSCode can greatly improve our programming efficiency. This post consisted of some tips I found very helpful when working with VSCode, which I hope will help you too.

Multiple selections (multi-cursor)

We might want to type the same thing in different places at the same time.

Alt+Click to add the secondary cursor

VS Code supports multiple cursors for fast simultaneous edits. You can add secondary cursors (rendered thinner) with Alt+Click. Each cursor operates independently based on the context it sits in.

Use VSCode Like Pro

A common way to add more cursors is with Ctrl+Alt+Down or Ctrl+Alt+Up that insert cursors below or above.

Use VSCode Like Pro

Ctrl+D to select the next occurrence of the current selection

Ctrl+D selects the word at the cursor or the next occurrence of the current selection.
Ctrl+F2 to select all of the next occurrence of the current selection

Use VSCode Like Pro

Column (box) selection

Place the cursor in one corner and then hold Shift+Alt while dragging to the opposite corner:

Use VSCode Like Pro

Quick Open

Ctrl+P to quickly open files

It will open a contextual menu for you with the auto-suggestion to navigate between files. Remember, do Ctrl+F and search for the file usually won’t return any result.

Use VSCode Like Pro

Open multiple files from Quick Open

You can open multiple files from Quick Open by pressing the Right arrow key. This will open the currently selected file in the background and you can continue selecting files from Quick Open

Use VSCode Like Pro

Ctrl+Shift+T to reopen the most recent closed file

It is similar to the Chrome shortcut to reopen a tab after you have close it.

Use VSCode Like Pro

Also, when you do Ctrl+P as above, it will show the most recently open file on top of the list.

Go to Symbol

You can navigate symbols inside a file with Ctrl+Shift+O. By typing : the symbols will be grouped by category. Press Up or Down and navigate to the place you want.

You could also activate that by Ctrl+P and then type @. It will behave exactly as you type Ctrl+Shift+O

Use VSCode Like Pro

Rename symbol

Some languages support rename symbols across files. Press F2 and then type the new desired name and press Enter. All usages of the symbol will be renamed, across files.

Use VSCode Like Pro

It will update the name inside the same file as well.

Use VSCode Like Pro

Navigate back: Alt+Left

Navigate forward: Alt+Right

Use VSCode Like Pro

Shrink/expand selection

Quickly shrink or expand the current selection. Trigger it with Shift+Alt+Left and Shift+Alt+Right.

Here’s an example of expanding the selection with Shift+Alt+Right:

Use VSCode Like Pro

Move lines up and down

Sometimes we want to move some code or text as a whole up or down. Press Alt+Up to move the text up; Press Alt+Down to move the text down.

Use VSCode Like Pro

Some extensions that I am using

Extensions	Description
Import Cost	Display import/require package size in the editor
Debugger for Chrome	Debug your code in VSCode while running the web page
Angular Language Service	Editor services for Angular templates
Code Spell Checker	Help catch common spelling errors while keeping the number of false positives low
Indenticator	Highlights your current indent depth
C# To TypeScript	Quickly convert the class/interface from C# to TypeScript equivalent. Super helpful and save time for front end dev. Usually, we have to do it manually
ES7 React/Redux/GraphQL/React-Native snippets	Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
Angular Snippets (Version 9)	Angular version 9 snippets by John Papa
GitLens — Git supercharged	Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
Markdown All in One	All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Paste JSON as Code	Copy JSON, paste as Go, TypeScript, C#, C++ and more.
psioniq File Header	Configurable file header comment block and changes tracking.
Version Lens	Shows the latest version for each package using code lens
WakaTime	Metrics, insights, and time tracking automatically generated from your programming activity.