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

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

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 .
Image for post
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
Image for post
CTRL + SHIFT + E = Open project explorer
Image for post
CTRL + SHIFT + G = Open Source Control
Image for post
CTRL + SHIFT + D = Open debugger
Image for post
CTRL + SHIFT + X = Open Extension tab
Image for post
CTRL + B = Toggle open/close the sidebar
CTRL+ SHIFT + P = Command pallet
Image for post
CTRL + K, Z = Open ZEN mode same for exit from ZEN mode.
Image for post
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
Image for post
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.
Image for post
and hit enter. You will get the generated boilerplate code of index.html
Image for post
You can check all the shortcut cheet sheet
. It supports HTML, CSS and XLS.
Settings :
CTRL + ,(comma) = It will open the setting panel
Image for post
theme > color theme > choose theem by scrolling one by one.
Image for post
Code formatter for vs code
Go to the extentions using (CTRl + X ) and search for pre
pretty
Image for post
After installing open setting and set the option for format on save.
Image for post
Another extension is Advance-new-file
Go to the Extensions (CTRl + SHIFT+ X). Search for the extension “advanced-new-file” and install it.
Image for post
No open comand pallet (CTRL + SHIFT + P) and open new file commnad
Image for post
Choose the path where you want to create a file.
Image for post
Enter the file name and hit enter. It will create a new file.
Image for post
Another pluggin is better comments
Image for post
Quokka : it enables the JavaScript and TypeScript playground in your editor.
Image for post
How to use it??
Oen command pallet and type Quokka and choose New Javascript File.
Image for post
It will open new Untitiled document it allows live scratchpad for javascript and typescript code and see the result in runtime.
Image for post
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.
Image for post
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
Image for post
It will serve the code in browser with port 5500. you can see the code changes in the browser in real time.
Image for post
Polacode :
Image for post
Goto the code. Open command pallet and search for polacode and hit enter.
in the side window you will see the code snippet image.
Image for post
Auto Rename Tag: Auto rename paired HTML/XML tag
Image for post
It will automatically update the closing tag in html file.
Image for post
Bracket Pair Colorizer
Description: A customizable extension for colorizing matching brackets
Image for post
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
Image for post
Image for post
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 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
Name: DotENV
Id: mikestead.dotenv
Description: Support for dotenv file syntax
Version: 1.0.1
Publisher: mikestead

VSCode .env syntax highlighting

A port of for vscode.
Image for post
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
Now lets look into keyboard shortcut keys:
Image for post
You can customize the keyboard shortcuts according to the need.
Image for post
Do some research on keybinding to configure according to your need. Referance for the keybinding is
Define your own code snippet in vscode
Open command pallet and search for snippet.
Image for post
select language you want to write.
Image for post
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"}}
Image for post
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.
Goto commnad pallet and search for Sync keyword
and choose update/Upload settins.
Image for post
There are currently 2 option present to update config.
Image for post
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.
on create a access token for settings sync.
go to → settings → Developer setttings → Generatte new Token. Provide the specific name to token so you can track very well in future.
Image for post
Grant only access for create gists and copy the accesss token and paste in the configuration.
Image for post
After updating the configuraitons again, Go to the command pallet and search for sync and hit the same Sunc: Update/Upload Settings
Image for post
Next time onwords it will update the gist file on github with latest setting configuraitons.
Setup git into vs code
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.