Skip to content
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 .
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
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:
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
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.
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
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:
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
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.
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.
go to → 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
Conclusion
So, these are the reasons why VSCode is an awesome code editor that you should not ignore.
We saw many aspects, from the writing feels to the features that it offers, and we can notice that it has some valid points in all the fields.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.