Blogs

Explore

Use Visual Studio Code like a pro!!!
Use Visual Studio Code like a pro!!!

Optimise your development workflow using VS Code’s most powerful features and extensions.

Optimise your development workflow using VS Code’s most powerful features and extensions.

Uday Chauhan

Backstory: Why VS Code?

If you are a Web Developer, you probably use Visual Studio Code for coding your projects.

The editor has rapidly gained popularity among developers, ranking as the most popular development environment overall in

Stack Overflow’s 2019 Developer Survey⁠

⁠

Its popularity is due to the growth of the web development field in these years and the need of the developers of having a lightweight well-done editor, with few features but less complex than the others available on the market.

It’s also free and it’s developed and maintained by Microsoft with a modern approach using Electron.

These are some characteristics that bring VSCode to the top of the coding editors but there are also others that because of its own features or characteristics like Open-source, Simplicity , Familiarity, Minimal Design, Extensions let’s check it one by one.

CTRL + SHIFT + F = find in files

⁠

CTRL + SHIFT + E = Open project explorer

⁠

CTRL + SHIFT + G = Open Source Control

⁠

CTRL + SHIFT + D = Open debugger

⁠

CTRL + SHIFT + X = Open Extension tab

⁠

CTRL + B = Toggle open/close the sidebar

CTRL+ SHIFT + P = Command pallet

⁠

CTRL + K, Z = Open ZEN mode same for exit from ZEN mode.

⁠

CTRL + W = Close the current file

CTRL + TAB = Toggle to next open tab

CTRL + SHIFT + TAB = Toggle to previous open tab.

CTRL + P = Search the files in open workspace

⁠

CTRL + Home : go to the start of the file

CTRL + END : go to the bottom of the file

CTRL + arrow key (← , → ) to navigate word by word

CTRL + D : select the word, press again to select next instance of word (Multi select)

Use boiler plate code by creating the index.html

and open into editor and type ! . In background it will use the emmet toolkit to generate boilerplate code.

⁠

and hit enter. You will get the generated boilerplate code of index.html

⁠

You can check all the shortcut cheet sheet

Here⁠

. It supports HTML, CSS and XLS.

Settings :

CTRL + ,(comma) = It will open the setting panel

⁠

theme > color theme > choose theem by scrolling one by one.

⁠

Code formatter for vs code

Go to the extentions using (CTRl + X ) and search for pre

pretty

⁠

After installing open setting and set the option for format on save.

⁠

Another extension is Advance-new-file

Go to the Extensions (CTRl + SHIFT+ X). Search for the extension “advanced-new-file” and install it.

⁠

No open comand pallet (CTRL + SHIFT + P) and open new file commnad

⁠

Choose the path where you want to create a file.

⁠

Enter the file name and hit enter. It will create a new file.

⁠

Another pluggin is better comments

⁠

Quokka : it enables the JavaScript and TypeScript playground in your editor.

⁠

How to use it??

Oen command pallet and type Quokka and choose New Javascript File.

⁠

It will open new Untitiled document it allows live scratchpad for javascript and typescript code and see the result in runtime.

⁠

Liver server :

this extension allows us to live code in html css and javaScript in real time.

Install the liver server as

Open the extension and search for live server.

⁠

Create a new file in workspace and use the emmet toolkit to generate boilerplate code.

After doing that open command pallet and types live server and choose the Live server: open with Live server

⁠

It will serve the code in browser with port 5500. you can see the code changes in the browser in real time.

⁠

Polacode :

⁠

Goto the code. Open command pallet and search for polacode and hit enter.

in the side window you will see the code snippet image.

⁠

Auto Rename Tag: Auto rename paired HTML/XML tag

⁠

It will automatically update the closing tag in html file.

⁠

Bracket Pair Colorizer

Description: A customizable extension for colorizing matching brackets

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer⁠

⁠

Bookmarks

Bookmarks helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between lines.

Description: Mark lines and jump to them

Publisher: Alessandro Fragnani

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks⁠

⁠

Name: CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

This was heavily inspired by a similar feature in

Brackets⁠

called CSS Inline Editors.

Description: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Version: 4.0.0

Publisher: Pranay Prakash

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek⁠

⁠

Name: DotENV

Id: mikestead.dotenv

Description: Support for dotenv file syntax

Version: 1.0.1

Publisher: mikestead

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv⁠

⁠

VSCode .env syntax highlighting

A port of

DotENV⁠

for vscode.

⁠

Name: ES7 React/Redux/GraphQL/React-Native snippets

Id: dsznajder.es7-react-js-snippets

Description: Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

Version: 3.0.0

Publisher: dsznajder

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets⁠

⁠

Now lets look into keyboard shortcut keys:

⁠

You can customize the keyboard shortcuts according to the need.

⁠

Do some research on keybinding to configure according to your need. Referance for the keybinding is

here⁠

⁠

Define your own code snippet in vscode

Open command pallet and search for snippet.

⁠

select language you want to write.

⁠

add the following code in json it will start suggesting the code in code vs.

"Print statement in java":{"prefix" : "sop","body": "System.out.println($1)","description": "Generate Boilorplate code for Sysout"}}

⁠

manage your settings and backup regularly using Setting sync

Name: Settings Sync

Description: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync⁠

⁠

Goto commnad pallet and search for Sync keyword

and choose update/Upload settins.

⁠

There are currently 2 option present to update config.

⁠

i will suggest to choose second one .i.e., edit configuration. I personally prefer to use token to access the gist. as we can control the access rights.

gist.githut.com⁠

create a access token for settings sync.

go to

www.github.com⁠

→ settings → Developer setttings → Generatte new Token. Provide the specific name to token so you can track very well in future.

⁠

Grant only access for create gists and copy the accesss token and paste in the configuration.

⁠

After updating the configuraitons again, Go to the command pallet and search for sync and hit the same Sunc: Update/Upload Settings

⁠

Next time onwords it will update the gist file on github with latest setting configuraitons.

Setup git into vs code

Name: GitLens — Git supercharged

Description: 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

VS Marketplace Link:

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens⁠

⁠