Keyboard Bindings and Easy Navigation In VS CODE

If it is quite frustrating to find yourself using a mouse wanting to select a portion of a line , take a pieces of code snippets up or down the line or navigating through file in VS code.Well, you have come to the right please. Here I will show some useful keyboard shortcuts and commands. Let’s dive in.

Select All The Codes

These one is probably even kids know about it, but nonetheless i decided to bring it. ctrl+a these will select all of the code in your working file.

Select All to the Up

You can select from where your cursor is blinding to the beginning in your text-editor by doing some key-combinations ctrl+shift+home

Select All to the Bottom

You can select from where your cursor is blinding to the ending in your text-editor by doing some key-combinations ctrl+shift+end

Select An Entire Line

In a VS Code is been divided in lines and they are numbered. With these you can triple click on with your mouse on a particular line, and entire line will get selected no matter where your cursor is place, but much more easier with key bindings using ctrl+l

Select Where Your Cursor is Place to Beginning or End

Imagine you want to select from your cursor position to the beginning and to the end of a line. shift+home will select highlight from your cursor position to to beginning(right), and shift+end will select and highlight from your cursor position to end or left

Highlight A Single oR Multiple And Replace

Imagine you want to change a name of a variable, or class name that appears many places in your code. You can change it one place, copy and paste it in all of the instances. These is an over-kill! You can do a lot better than that.

ctrl+d will select and highlight a single word(variable or class name), and you can also highlight more than 1 variables or class name the same time by clicking and holding on ctrl key and press on the d key on your keyboard multiple time. These will look and highlight all repeated word, doing so it will jump to where ever in searching and it couldn’t find any matching will come to the starting place. You can just type any desired variable or class name and will be place all of that you have selected.

Get to the Beginning and Starting of a word

Imagine you write a long variable name with camel casing style and your cursor is at the center or half-way to start or the end. ctrl+< will get to the beginning, and ctrl+> will get you to the end.

Delete a Single Word

within your code you want to delete a variable name you would try out hitting on the delete button 100x which is boring and annoying. ctrl+delete will delete all the characters from the cursor position to the right, your cursor need to be at the beginning ctrl+< will get you there and ctrl+delete will delete the entire word(variable or class name).

Jumping From Word to Word

You can jumping up from word to word and fast as you can imagine. ctrl+< continuously to the beginning and ctrl+> continuously to the end of the line.

Take a Word Up and Down

These could save your life when you found yourself refactoring. You are most likely to be moving a line or a code-block from one position to another. alt+arrowup will take the entire line to the line above, and atl+arrowdown will take an entire line to the line below. You select a code-block and alt+arrowup or atl+arrowdown will also move it up and down.

Multiple Cursor

Place the cursor at multiple places within your file. First place the cursor on where you want to start, holing on alt, use the mouse to move to any position, place cursor blinking by just a single click with mouse(you can do these many times you wish). You can write once at all these places.

Multiple window

At time is necessary to have multiple tags open in VS code. Lets say you are working HTML file and it’s time to add some style and you haven’t opened you css file, you can just click and hold on alt and click on the css file it will open a new tag(at the right hand side).

Navigate From One To Another

You can be working on a really large project and you have many file opened at the time, sometime you don’t even know which file you last opened. ctrl+tag is your solution, these will show you the list of the opened files(starting from your currently last open).

Toggle Sidebar

When the sidebar is open it can take some space(we need to close it), and we may also need it open. is boring having yourself clicking on the toggle button every time so you can use ctrl+b to toggle it.

Lookup for Files

Working on a large code base is not easy to location files even you know the file name sometime is hard to find. ctrl+p will open a search input at the top with list of your recent opened files, you can search files by their name in your project.

Search for name

You want to find out the styles you have applied on a particular element. Pick(copy) any element class or id name from your HTML, go to your stylesheet ctrl+f will open a search input, simply add a . and paste it. VS Code will do a automatic lookup for and show how many times a particular name repeated, and provide you with arrows to navigate(up and down). and, you do these lookup in any file. The example is not limited to only HTML and CSS file and kind of file in general.

Search for name and replace

VS Code offers us lots of cool handy stuffs, but these one is one of my favorite. If you click on ctrl+h a input(two inputs) will popup, in the first one you can type a word you want to lookup. It has some control like match case, match whole word, use regex if you hover on it. By default is going lookup for entire word for example if you type there in the first search it will highlight all there - There within your file. You can change it to Match case by clicking on the control Aa now instance ot matching all it will only match there, and also show you the word count.

Now let’s shift our attention to the last and most interesting one it also has some other amazing controls like Preserve word(to preserve the case of the replace word), Replace enter(these will replace only the first matching word), Replace all(these will replace all of the matching words in your file). Enter the word to replace for example we want to replace there - There with they, we need to type they, and click on the AB these preserve the case. We type they and we want to replace it with there & There it will replace there with they and also There will be They.

Search in the Entire Workspace and Replace

You can also look for the name of variable or class name in your entire project and their file(s) and folder will be shown by clicking ctrl+shift+f or click the search icon on the sidebar and type in the name of a variable or class name. It has the same features as mentioned above it just it will search for the entire project and replace rather than just within a file.

You find for variables, class names in multiple files and replace all of them just in one place. isn’t cool?

Open Terminal

VS Code provide an integrated terminal which useful to us. ctrl+~ will open a new terminal window. If you have your React application running or your node.js server and you want to stop it is easy with ctrl+~, these command will take your cursor in to the terminal.

I haven’t listed all the commands and keyboard shortcuts in VS Code. I just trying to share out some of them

Thanks for reading so far. I hope these helps?

You can following me on my Social-media for any feature post.