Tips to use VS Code

8
142
views
VS Code

VS code a widely accepted and used editor:

VS code is a widely accepted and used editor by 2.6 million monthly active users. It is up by over 160% in the last year. This statistics is based on the detail given by visual studio.

It’s one of my personal favorite editors to work with, for front-end development and also it is being vastly used by other front-end developers.

Its fascinating color combination of syntax and different colored themes make it quite interesting.

It has a varied range of extensions which helps to do your work faster in real time development by implementing code snippet, auto-import etc.

Your work becomes easier and faster when you know and understand your tool well. Therefore I thought to share some of the keyboard shortcuts and features which will enable you to use this powerful editor more effectively.

Let’s add VS Code in context menu:

Have VS Code added in context menu while installing it on windows is a feature, that you can see if you will go slow on installation and will not just hit the next button in haste.

So, have a look when the below screen pops-up and check the checkbox to have it added to the context menu when you open folder or file.

Add to context menu

If you have already installed the Code and not willing to uninstall and install it again then you can do the following, which I am referencing from This Davej.

The following code is going to make some changes in your registry. To do this first you need to create a file with extension .reg. Example: AddInContext.reg

Windows Registry Editor Version 5.00
; Open files
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code]
@="Edit with VS Code"
"Icon"="C:\\Program Files\\Microsoft VS Code\\Code.exe,0"
[HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click ON a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%1\""
; This will make it appear when you right click INSIDE a folder
; The "Icon" line can be removed if you don't want the icon to appear
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]
@="Open Folder as VS Code Project"
"Icon"="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\",0"
[HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]
@="\"C:\\Program Files\\Microsoft VS Code\\Code.exe\" \"%V\""

Save the above code in the file.

NOTE:  If you have installed the VS code somewhere else than the default location please change the path accordingly.

Now, you are all set and run this file and done.

Clean up the area if you see it noisy:

After installation of VS Code what I didn’t like, is minimap at the right side of the editor. It is a good feature provided by the editor to jump on the required code in a big file. However, personally, I don’t feel it is required for me so I removed that screen by adding a snippet to the overwrite section of settings.json.

{
   "editor.minimap.enabled": false,
}

Preview mode v/s Editable mode:

VS Code has a nice feature of opening a file in either preview or edit mode.

If you open a file with a single click it will open in preview mode and whenever you switch out of the file it will close automatically.

To open the file in edit mode or to have it opened, open it with double click and it will stay in the editor.

Some useful and mostly used keyboard shortcuts:

Below I am adding some of the keyboard shortcuts which I mostly use:

    • CTRL + E – Search file and open
    • CTRL + , – Open user setting
    • CTRL + W – Close current tab
    • CTRL + TAB – Switch among open files
    • CTRl + / – Toggle current line comment
    • SHIFT + ALT + A – Toggle block comment
    • ALT + Up/Down – Interchange the line
    • SHIFT + ALT + Down/Up – Duplicate the line
    • CTRL + K, CTRL + C – Comment the selected line/s
    • CTRL + K, CTRL + U – Uncomment the selected line/s
    • CTRL + SHIFT + F – Find text in folder
    • ALT + SHIFT + F – Format the indentation
    • CTRl + \ – Split the current screen
    • SHIFT + F12 – Find all references
    • F12 – Go into detail

Start terminal in VS Code:

Vs Code comes with an integrated terminal which is very useful for running command from the same place where you are writing code.

You can open terminal using the View in the menu or you can use Keyboard shortcut      CTRL + `.

Open Command Palette in VS Code:

If you are tired of remembering so many shortcuts and want to rest your mind. VS Code provides that feature also and you only need to remember one thing that is CTRL + SHIFT + P.

This will open the command palette and you just type the action you want to perform. You will get the related shortcut like below screen.

VS Code palette

If you want to see full keyboard shortcut you can go to File => Preferences => Keyboard Shortcuts or you can use the shortcut CTRL + K, CTRL + S.

You can also find the list of Keyboard shortcuts in this PDF.

Source control support in VS Code:

Visual Studio Code support integration of multiple Source control simultaneously, Which is really a helpful feature. It has a detailed documentation that will be very helpful, in case you want to get on.

VS Code for PHP Development:

If you are using this editor for PHP development, this would be the good place to check out some helpful information.

Concluding:

VS Code is a light weighted, fast editor which comes with a pack of features and extensions. It has a bright community of developers who are continuously working towards making our lives easy by developing the powerful extension.

I would like to thanks to all of them.

Visual studio documentation is a great place to get into the details of every feature provided by VS Code.

You can also have a look at VS code tutorials, John Papa has made a tutorial for that.

You may like to read, why should you think about having an online presence.

How to host your primary domain to its own folder.

Subscribe to the blog using your email and get my next article direct into your inbox.

 

8 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here