Productivity with VS Code (Tips and Tricks)

6 min readAug 26, 2018

--

I’d like to share few words about me:

My names is Dimitar Danailov and I’m living at Bulgaria (Sofia / Varna). I’m a software developer since 2008 and have experience with different technologies like JavaScript, Nodejs, Android, Asp.Net, Cloud Technologies, iOS, Project and People Management and Vim :) . I’m a traveler, sport guy and freelancer.

Why I’m using VS Studio Code

I’m working on a Microservices Solution and my daily “helpers” are Nodejs and TypeScript. TypeScript is the main reason to choice VSCode to be my “partner” for this project. This article describes “hidden” secrets to be more productive with VS Code. I’m a Mac OS Lover and All Keyboard Shortcuts will be for this operation system.

Visual Studio Code Overview

Visual studio code is coming with simple but powerful layout and each developer can use:

Editor — The main area of daily life :) Here you can create or edit files. Editor area gives you an opportunity to work simultaneously of couple files.
Side bar — Contains different views like Explorer view, Search View, Source Control View, Debug view, Extensions.
Status bar —Contains information about current state of open file.
Activity bar — Located on the far left-hand side, this panel gives you an opportunity to switch between different Side bar views. Activity bar has a lot of visual indicators, like — How many git changes are added.
Panels are bellow editor region and can display about: errors and warnings, debugger or an integrated terminal

Visual studio code -> User Interface. Image source: code.visualstudio.com

Theme

I’m using Cobalt2. Cobalt2 has additional settings and configurations to “save” your eyes.

Keyboard Shortcuts

// Toggle the Side bar⌘B

// Navigate between different items of your source⌘P and @

Navigate between different items of your source

// Navigate to exact line of your source code⌘P and :

Navigate to exact line of your source code

// Display all possible navigation file opportunities⌘P and ?

Display all possible navigation file opportunities

// Switch between editors`⌘1`, `⌘2`, `⌘3`

// Toggle the Terminal viewcontrol(^) and tilde(`)

// Split Terminal View⌘\

// Toggle the Panel view⌘J

HTML Code Snippet

Let’s to create a simple div. Please type:

div#id.class and hit Tab

Ok let’s create a complex html structure

I’d like to generate this html structure:

Simple a html navbar

Type:

div.navbar>div.navbar-items+ul>li*3

Important note: Typescript, vuejs, angular and react templates are supporting this technique.

Update image size

Visual studio has a feature automatically to get image width and height and command for this is:

⌘ + Shift + P and type "Update Image Size" and hit Enter

Update image size is working for remote or local files

Important note: This technique is working on css file

Evaluate Math Expression

Visual studio code is great !!! Why ?

Because is not need any more to open an external program like Calculator for a math operation

Command / Shortcut is:

⌘ + Shift(⇧) + P and type "Evaluate Math Expression" and hit Enter

No more external programs for Math operations !!!

Find a file

“Find a file” is critical for daily productivity. Visual Studio Code could find a file by part of complex query. Let’s to say I’ve a file with name: service-manager.js
If you type: “sermana” and Boom visual studio has your file like a suggestion.

Command / Shortcut is:

⌘P and type <searching query> and your file will be their !!!

“Find a file” is an important for your velocity

Format a document

I’d like to start this paragraph with meme :)

The historical battle between developers: Spaces or Tabs. Image Source: fossbytes.com

If you a developer and If you didn’t watch a movie show: Silicon Valley. You must fix this issue, now :)

Formatting a document is important for each developer and shortcut for this:

Option (or Alt) ⌥ + Shift(⇧) + F

or:

⌘ + Shift(⇧) + P and type "Format Document"

I’d like to back again to Richard Hendricks and Silicon Valley. Richard breaks with his girlfriend because she likes “Spaces”. Formatting of document could “affect” your relationship.

Enjoy :)

Bonus Tip:

Prettier is a visual studio code extensions that helps you to format your Typescript, JavaScript or CSS source code. Prettier has 3+ millions downloads and grows very fast.

Auto save

This is configuration could be help for your next demo or workshop. Please open your “File menu” and Toggle “Auto Save”..

Visual studio has a configuration about timeout for this configuration.

Open a setting window:

⌘,

and type “auto save” and You will see configuration with name:

// Controls the delay in ms after which a dirty file is saved automatically. Only applies when `files.autoSave` is set to `afterDelay`."files.autoSaveDelay": 1000

IntelliSense

What’s IntelliSense

IntelliSense is a general term for a variety of code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as “code completion”, “content assist”, and “code hinting.” — https://code.visualstudio.com/docs/editor/intellisense

package.json

Visual studio code has an communication “bridge” with https://www.npmjs.com and has an info about all npm packages and version of each package.

Bonus tip:

Erich Gamma has a Visual Studio Extension: npm. This extension has 2.3+ million downloads.

What gives you “npm”

This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.Source: https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

How to use ?

You need to type:

⌘ + Shift(⇧) + P and type "npm"

Summary / Recommendations

I’d like to finish with quote. Steve Jobs says:

Visual Studio Code is a great tool and could be your Swiss knife. Each year I’m spending a lot of time to update my skills with different tools, shortcuts and profilers and that gives me better productivity and more time to spend with friends and family.

I recommend you to print image bellow “Mac OS X shortcuts” and with a lot of practices you will reach level -> Visual Studio Ninja.