Jainal
The Conjuror
Jan 5, 2019 20 min read

How to use V.S Code like a pro?

How to use V.S Code like a pro?

This is a Kick Starter for all the newbies who would like to use V.S Code like a pro, also to all those experienced developers to increase their productivity.

So I will divide this post into what I call segments, continue reading down to get more info.

1. How to open vs code easily and managing efficient workflow?

As u can see the easiest way to open VS Code to your projects’ directory is via terminal.

Just go to the projects directory via* cd command* and type in** code .. **So this will open up the project folder inside V.S code.

$ code ..

Another ninja technique is for all the terminal lovers like me who like to open files via terminal. So there is a way to open files directly inside vs code all via terminal and here is how u do it!

$ code file_name.extension

By this, u can directly open files via command line.

Another hack is to compare the code of 2 files directly and all via command line.
Here is how u do it…..

This Compares the code of both files and shows u whats different in both of them.

$ code folder_name file1_name.extension file2_name.extension

So this was all about terminal hacks for vs code. Now let’s move on sailor!!

2. Extensions + VS Code = ❤️

So what are the extensions which u should start using now and boost your code workflow?

So here is a curated list of all the productive extension to boost your coding performance.

1. Code Snippets and Boilerplate

Angular 7 Snippets

There are snippets extensions for say for each Framework and language out there! Here are quite a few notables.

Angular 7 Snippets

Here is how it works -:

ext install Mikael.Angular-BeastCode

ES7 React/Redux/GraphQL/React-Native snippets

All the code snippets for React, Redux , GraphQL,React-Native

For the usage, u can get the details from their extension page.

ext install dsznajder.es7-react-js-snippets

3. React js Snippet

The demo is here.

ext install xabikos.ReactSnippets

4. Html Snippets

Easy code snippets for HTML.

The demo is here.

ext install abusaidm.html-snippets

5. C/C++ Code Snippets

ext install hars.CppSnippets

So those were some few notables code snippets but u can find snippets for any language or framework out there, JUST SEARCH IT ON!

2. Code Runner

Clicking here will compile your code and will run the program.

Or u can try to add a hotkey for the same but I will come to that part later in my hotkeys segment.

ext install formulahendry.code-runner

3. Firebase Explorer

So here is a quite handy extension to open your firebase projects right in V.S code.

Here is how it looks.

ext install jsayol.firebase-explorer

4. Markdown Preview Enhanced

Preview markdown right inside VS code.

ext install shd101wyy.markdown-preview-enhanced

5. Git Lens

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to 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

ext install eamodio.gitlens

6. Prettier — Code formatter

Prettier formats all JavaScript / TypeScript / CSS easily using Keyboard shortcuts which can be founded out on its extensions page.

ext install esbenp.prettier-vscode

7. ES LINT

How about making your JS code error-free and bug-free if u are using es lint in your java scripts components then you need this ES lint extension.

ext install dbaeumer.vscode-eslint

8. Debugger for Chrome

Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

The demo is here.

ext install msjsdiag.debugger-for-chrome

Live share is the best group project extension so far. Live share allows to edit anyone’s code remotely in real time. It’s the google docs of VS code.

ext install MS-vsliveshare.vsliveshare

You also would want to install the VS Live Share Extension Pack for enabling the integrated voice calling feature.

VS Live Share Extension Pack

ext install MS-vsliveshare.vsliveshare-pack

10. Bracket Pair Colorizers

Another cool and handy extension is Bracket Pair Colorizer. It allows us to colorize brackets to easily differentiate and identify the code blocks.

Here is how it looks.

ext install CoenraadS.bracket-pair-colorizer

11. Java Extension pack

If you are a Java developer like me then u are gonna love this extension.
This extension include -:
📦 Language Support for Java™ by Red Hat
📦 Debugger for Java
📦 Java Test Runner
📦 Maven Project Explorer
📦 Java Dependency Viewer

Which are the all u need for compiling and running java files.

ext install vscjava.vscode-java-pack

12. Auto Close Tag

This is a must-have web dev extension. It auto closes open tags of HTML,XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX languages.

Demo.

ext install formulahendry.auto-close-tag

13. Auto Rename Tag

Auto rename paired HTML/XML tags. Check demo for more info.

Demo.

ext install formulahendry.auto-rename-tag

14. Live Server

How about an extension which shows you the real-time output of your web projects on your favorite browser. Well, live server gives you the power to do that.

Demo.

ext install ritwickdey.LiveServer

15. Code Spell Checker

Real-Time Spell checker of your code for all the variable spell check and function spell checker.

The Demo is here.

ext install streetsidesoftware.code-spell-checker

16. Arduino

How about I tell you that there is an extension for coding, deploying and debugging all the Arduino programs right from vs code! Well here is such extension.

ext install vsciot-vscode.vscode-arduino

17. CMake Tools

Powerful extension for managing all builds for the c-make file and required
C-make tools.

ext install vector-of-bool.cmake-tools

18. Flutter

If you are in native app development and don’t want to leave VS code than these an extension you all are gonna love. Check out the demo for more info.

Demo.

ext install Dart-Code.flutter

You will also dart extension for this so here it is.

Dart

ext install Dart-Code.dart-code

19. vs code-pdf

This extension allows us to directly view pdf files in VS Code.

ext install tomoki1207.pdf

20. vscode-spotify

How about running Spotify right from VS code. Well, that’s what this extension does!

ext install shyykoserhiy.vscode-spotify

21. GitHub Pull Requests

This extension allows you to review and manage GitHub pull requests in Visual Studio Code. Easily create and deal all the pull requests from VS Code GUI!

The Demo is here.

ext install GitHub.vscode-pull-request-github

22. Settings Sync

Well if you are a distro hopper or have multiple machines to work upon but enabling the customizations and tweaks of vs code on all machines are a hassle? then there is extension known as Settings Sync which saves all the extensions you downloaded, all your settings, all your color themes also all your custom changed key bindings to the cloud so that u don’t need to do the process of applying all settings again on different machines. Just download ur settings from the cloud via this extension and you are done!

ext install Shan.code-settings-sync

23. Power Mode

This is an attractive, fun to use extension which will make your coding experience more pleasant and fancy.

This is how it looks.

There are also many variants to try in it.

ext install hoovercj.vscode-power-mode

How about slack discord and Live share conversation right into vs code. With this extension, u can!

ext install karigari.chat

25.Bookmarks

Mark lines and jumps to them.

ext install alefragnani.Bookmarks

26. Git History

View git log, file or line History.

The demo is here.

ext install donjayamanne.githistory

27. Kanban

If u have worked with making to-dos with kanban u know how awesome it is. But if u haven’t well kanban is a to-do creating website which creates awesome formatted to-do and much more. But how about I say kanban in vs code!

Check demo for more info.

ext install mkloubert.vscode-kanban

28. carbon-now-sh

How about showcasing segment of your code, what we do generally is screenshot the segment of the code and share them well that’s old school now try out carbon-now-sh, here is it how!

ext install ericadamski.carbon-now-sh

29. Polacode

If u still need to take a screenshot of your code then here is a modern approach!

ext install pnp.polacode

30. Intellisense

Lastly are all the intellisense extensions which will give you wide language support such as syntax highlighting, code autocomplete, snippet support and much more. Here are a few to consider.

These are the intellisense of all programing language. U can download for the one you needed by writing the programing language name and then intellisense.

31. Customization- Themes & Icon packs

Well first take a look at what VS code has to first offer by default in the name of customization and themes.

U can view them by opening command palette by:-

ctrl + shift + p      or  cmd + shift + p

By default, many themes are there which totally awesome!!

and then type in themes as shown in above.

But say you are tired of the built-in themes an want to try out something cool and more productive. So here are a few ones to try it out.

1. Themes

1. AndromedaThis particular theme is one hell of a gem. If you’re a sucker of dark themes, I’m sure you’ll love this one. A very subtle amount of colors, easy on eyes and supporting most languages. Definitely, check it out.

ext install EliverLara.andromeda

Shades of purple

⚡ A professional theme with hand-picked & bold shades of purple to go along with your VS Code. A custom VS Code theme with style

ext install ahmadawais.shades-of-purple

3. Material theme

The most awesome material theme for vs code .

ext install Equinusocio.vsc-material-theme

4. Dracula

Every dark theme list is incomplete without mentioning Darcula theme. Enough said! It’s THE best dark theme out there. Period. The fact that this theme is available not only for VS Code but for other editors as well makes it a goto theme for dark theme enthusiasts for their streamlined workflows.

ext install dracula-theme.theme-dracula

5. Atom one dark theme

If you migrated from atom to vs code but loved the looks of atom here is a theme for you.

ext install akamud.vscode-theme-onedark

6. Cobalt2 Theme Official by Wes Bos

ext install wesbos.theme-cobalt2

7. Night owl Theme

ext install sdras.night-owl

8. Nord by arcticicestudio

An arctic, north-bluish clean and elegant Visual Studio Code theme.

ext install arcticicestudio.nord-visual-studio-code

Mno by u29dcMinimal monochrome theme.

ext install u29dc.mno

10. Best light theme bluloco-light

ext install uloco.theme-bluloco-light

2. Icon Packs

City Lights Icons

ext install Yummygum.city-lights-icon-vsc

2. VS Code Icons

ext install robertohuertasm.vscode-icons

3.Seti Icons

ext install qinjia.seti-icons

4. Material Icons

ext install PKief.material-icon-theme

3. Shortcuts and Hot Keys.

So let’s see what we got here.
VS code is all about shortcuts here we have the shortcut to open files directly, u have direct access to open files and close, we have shortcuts open Command Palette, shortcut to go in zen mode etc

Command Palette

Access all available commands based on your current context.

Keyboard Shortcut: Ctrl+Shift+P

2. Default keyboard shortcuts

All of the commands are in the Command Palette with the associated key binding (if it exists). If you forget a keyboard shortcut, use the Command Palette to help you out.

3. Keyboard reference sheets

Download the keyboard shortcut reference sheet for your platform (macOS, Windows, Linux).

4. Quick Open

Keyboard Shortcut: Ctrl+P

5. Errors and warnings

Quickly jump to errors and warnings in the project.

Keyboard Shortcut: Ctrl+Shift+M

Cycle through errors with: F8 or Shift+F8

6. Split Views

If you have a very big code and you want to compare segments of same
code side by side well you can- Just press shortcut ctrl + \

7. Side bars

Press ctrl + bto open and close side bars

8. Zen mode

U can enter in zen mode by pressing ctrl + z

Sometimes its set to something else just search zen mode in key preferences and you will get the key binds.

9.** Type same lines with writing once!**

This a handy shortcut which might help us many times.

u can press shift + alt + up / down

10. Find in all files

Find in all files allows you to search the code in all files. And also you can always press ctrl + fto find in selected files.

u can press ctrl + shift + f

So that was all the required default keyboard shortcuts. But if you would additionally want your custom shortcuts created, you can and here is how?

This will open up a tab showing all the shortcuts with what action they perform and you can then either search for a specific action and then change it.

Like for example I have a shortcut for extension code runner and the shortcut is for compiling code by just pressing alt + shift + rand it compiles the code and displays the output.

As soon as I press Alt + shift + r the code gets compiled. [ Custom key binds ]

Moreover, I have also set up the following key binds u can download the keybinds.json file .

There are key binds for git commit +git push + git pull; also to create a new file ; new folder …

4. Using VS Code Functionalities

Rename All OccurrencesIf you select a variable/method and hit F2, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.

If you only want to change within the current file, use the Command + F2 (on Mac) or **Ctrl + F2 (on Windows) **keyboard shortcut and VS Code will spawn a cursor at every instance throughout the current file.

2. Go to Definition

You could spend several minutes searching for the right file, or you could press Command (on Mac) or Ctrl (on Windows) key and click the variable/method with your mouse. VS Code will take you to it’s definition right away.

Or you could just hover your cursor over the variable/method along with pressing the Command (on Mac) or Ctrl (on Windows) key, it will shows you the definition right in line where your cursor is.

3. Edit Multiple Lines at once

f you ever need to insert or delete multiple instances of text throughout a document, all you have to do is create multiple cursors. You can do this by holding down **Option (on Mac) or Alt (on Windows) **and clicking anywhere in the text. Every click creates a new cursor.

This is particularly useful for things like HTML, where you might want to add many instances of the same class or change the format of several hyperlinks.

4. Debugger

The debugger deserves a video all to iteself — thankfully, VS Code has already made one of those.

5. Peek Types and Show References

Not sure what some class or interface is all about? You can find the peek types option by highlighting and right-clicking an interface.

If you happen to be looking at an interface and want to know where it is being used, do the same thing, but click on show references. This will provide you with a list of all files using that code.

6. Multi cursor selection

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

Add more cursors to current selection.

7. Join line

Mac: ctrl+j

Windows / Linux: Not bound by default. Open Keyboard Shortcuts and bind 
 to a shortcut of your choice.

8. Navigate to a specific line

Mac: ctrl+g or cmd+p, :

Windows / Linux: ctrl+g

9. Move line up and down

Mac: opt+up or opt+down

Windows / Linux: alt+up or alt+down

10. Whole document format

Windows / Linux: shift+alt+f

11. Find All References

Select a symbol then type shift+f12. Alternatively, you can use the context menu.

12. Rename Symbol

Select a symbol then type f2. Alternatively, you can use the context menu.

5. Tweaking Vs Code — settings.json

Well, you can do multiple things via editing settings.json file but make sure what you are doing. You can set compiler paths for programming languages, you can edit workspace settings, you can also edit font family, font colors, lint settings and much more.

Here is how you can open settings.json file

Settings File Locations

Windows %APPDATA%\Code\User\settings.json
Mac $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

The menu command File > Preferences > Settings (Code > Preferences > Settings on Mac) provides entry to configure user and workspace settings. You are provided with a list of Default Settings. Copy any setting that you want to change to the appropriate settings.json file. The tabs on the right let you switch quickly between the user and workspace settings files.

You can also open the user and workspace settings from the Command Palette(kb(workbench.action.showCommands)) with Preferences: Open User Settings and Preferences: Open Workspace Settings or use the keyboard shortcut (kb(workbench.action.openGlobalSettings)).

In the example below, we disabled line numbers in the editor and configured line wrapping to wrap automatically based on the size of the editor.

Changes to settings are reloaded by VS Code after the modified settings.json file is saved.

This was some basic info about settings.json file, you can find detailed info here :-

Conclusion: Visual Studio Code can do that -:

Visual Studio Code is a good Editor, that can adapt to many languages and technologies out there, and discovering these little helpers can sometimes take time.
I hope my post can help you increase your productivity and help you boost your coding skills.

NOTE: If i had missed anything pls free to comment down below

Thanks for reading! If you find this helpful don’t forget to leave some claps

👏🏻 and don’t forget to share this with your friends and followers! If you have some tips regarding VS Code, feel free to comment or you can tweet to me at as well- jainal_gosaliya

Jainal Gosaliya

What is Function Overiding Problem in C++ and how to Solve? »

techmuses

How to use V.S Code like a pro?

How to use V.S Code like a pro?

1. How to open vs code easily and managing efficient workflow?

2. Extensions + VS Code = ❤️

1. Code Snippets and Boilerplate

2. Code Runner

3. Firebase Explorer

4. Markdown Preview Enhanced

5. Git Lens

6. Prettier — Code formatter

7. ES LINT

8. Debugger for Chrome

9. Live Share

10. Bracket Pair Colorizers

11. Java Extension pack

12. Auto Close Tag

13. Auto Rename Tag

14. Live Server

15. Code Spell Checker

16. Arduino

17. CMake Tools

18. Flutter

19. vs code-pdf

20. vscode-spotify

21. GitHub Pull Requests

22. Settings Sync

23. Power Mode

24. Team Chat: for Slack, Discord, Live Share

25.Bookmarks

26. Git History

27. Kanban

28. carbon-now-sh

29. Polacode

30. Intellisense

31. Customization- Themes & Icon packs

1. Themes

2. Icon Packs

3. Shortcuts and Hot Keys.

4. Using VS Code Functionalities

5. Tweaking Vs Code — settings.json

Conclusion: Visual Studio Code can do that -:

Thanks for reading! If you find this helpful don’t forget to leave some claps

Jainal Gosaliya