We are moving our hands between the keyboard and the mouse so often. The frequency is higher than you think.
If we could move our hands to the mouse less often and remain on the keyboard longer, we can increase our coding speed. By how many per cent faster depends on how familiar you with the keyboard shortcuts.
After learning these keyboard shortcuts, you will find that you less often use the mouse to move up and down, left and right, to click the function in the VS Code's graphic user interface (GUI).
Let's start learning keyboard shortcuts in VS Code to boost our coding speed.
Moving The Cursor With Keyboard
Move By Character
< or > arrow moves one character to the left/right.
⌃ or ⌄ arrow moves the cursor one line up/down. The cursor moves up or down a line but remain on the same column.
What do I mean?
Let's said you are in line 10 column 13. Pressing the ⌄ arrow will move your cursor to line 11 column 13.
Check your line and column number at the bottom sidebar
Move By Word
ctrl + < moves left to the beginning of a word.
ctrl + > moves right to the end of a word.
📝Note: Single or group of punctuation consider a word.
What do I mean?
Try ctrl + < or > arrow between one single period or six periods. You'll see that the movement pattern is the same.
Move By Line
home moves the cursor to the beginning of a line.
end moves the cursor to the end of a line.
Move & Insert
ctrl + enter insert a new line below and move your cursor down to the beginning of the new line.
ctrl + shift + enter to insert a new line above and move your cursor up to the beginning of the new line. It behaves like pushing your current line down.
📝 Note: No matter your cursor is at which column, the above 2 keyboard shortcut will always move your cursor to the beginning of the new line. E.g., In the middle of a statement.
Move To A Line
ctrl + g, then type the line number you want to go, and press enter to navigate to your desire line.
Move by Symbol
Use the symbol panel to move to classes, variables, functions and so on.
ctrl + shift + o to open symbol panel.
Press ⌃ or ⌄ arrow to navigate the symbols and hit enter to move your cursor to the selected symbol
Type : to group symbols by category.
Move By Page
No matter your cursor at which column and line.
Hit ctrl + home moves the cursor to the beginning of the page.
Hit ctrl + end moves the cursor to the end of the page.
page up moves the cursor to the first line of your current page.
page down moves the cursor to the last line of your current page.
Move By Position
alt + < or > go backward or forward to your previous action.
What do I mean?
Said you select a line, then press ctrl + home to the top of the page to check an import module. alt + < arrow will go back to "select a line" action.
It's also moved from file to file.
What do I mean?
Said you're in file 1, then you go to file 2 to check the props attribute. Press alt + < will go back to file 1
ctrl + u move your cursor to previous position within the same page
Move By Matching
ctrl + shift + \ go to matching bracket or parentheses.
About The File
Go To File
ctrl + p to open the "go to file" panel, then search for the file name you want to open and press enter
Alternate keyboard option: ctrl + e to open the "go to file" panel
Moving From File To File In The Tab
ctrl + page up to focus on the previous file
ctrl + page down to focus on the next file
Moving From File To File In The Breadcrumb
ctrl + shift + . to focus on your current folder in the breadcrumb.
📝Note: You can also move from symbols to symbols in the breadcrumb panel.
< or > to navigate between the parent and child folder.
⌃ or ⌄ to navigate the file within the folder.
enter to open a file
ctrl + w to close your current file
Close All Opening Files
ctrl + k ctrl + w to close all open file
Select A Character
shift + < select a character to the left from your current cursor, you can keep pressing < to select more character.
shift + > select a character to the right from your current cursor, you can keep pressing > to select more character.
Select a word
ctrl + shift + < to select a word to the left from your current cursor. You can keep pressing to select more words.
ctrl + shift + > to select a word to the right from your current cursor. You can keep pressing > to select more words.
📝 When your cursor is in front of a word, you can ctrl + d to select the word
Select A Line
ctrl + l (L) to select the a line
Select A Line Down
ctrl + shift + ⌄ to select from your cursor and down a line.
Select A Line Up
ctrl + shift + ⌃ to select from your cursor and up a line.
Select Part Of A Line
shift + home to select from cursor to the beginning of a line
shift + end to select from cursor to the end of a line
Select Part Of A Page
ctrl + shift + home to select from the cursor to the beginning of a page
ctrl + shift + end to select from the cursor to the end of a page
📝 Note: Emmet in Selection
Copy, Cut And Paste
ctrl + c or ctrl + insert
📝 If you not select a character or word, this shortcut will copy a line.
ctrl + x
📝 If you not select a character or word, this shortcut will cut a line.
Cut A Line
shift + delete to cut a line
After copy or cut then move the cursor to your correct position then ctrl + v to paste
📝Note: You can window + v to open clipboard and choose which to paste
Delete A Character
backspace delete a character to the left.
delete delete a character to the right.
Delete A Word
Move your cursor at the end of a word, then ctrl + backspace to delete the word.
Move your cursor in front of a word, then ctrl + delete to delete the word.
ctrl + d to select a word (no matter you are in front, back or within the word), press delete to delete the word.
Delete A Line
ctrl + shift + k to delete a line
ctrl + l (L) to select the a line and press delete
Move A Line
ctrl + l (L) to select the a line, ctrl + x to cut a line then ctrl + v to paste the line
shift + delete to cut a line, ctrl + v to paste the line
alt + ⌃ to move the current line up
alt + ⌄ to move the current line down
I seldom use the explorer this way. I share in case some people find this useful.
ctrl + shift + e to focus on the explorer in the sidebar, ctrl + shift + e to focus back to the editor.
ctrl + 0 (zero) to focus on the explorer. ctrl + 1 to focus on the editor
📌(Not working in the numpad)
📝Note: I set my sidebar on the right-hand side. If you're using the default layout then the sidebar should be on the left-hand side. Then method 2 should work the other way round.
Navigate in the explorer
⌃ or ⌄ to navigate up and down in the explorer.
< to collapse or move up a directory.
> to expand or move in a directory.
Press enter to open a file.
ctrl + ` (backtick) to open the integrated terminal
ctrl + shift + 5 to open another integrated terminal side by side
alt + < or > to switch between the terminals
📝 Note: If you want to avoid forgetting to close development server in the integrated terminal before existing VS Code.
Use ctrl + shift + c to open the terminal externally
Clear the terminal inside VS Code
Type "clear" and press enter
ctrl + l(L) in the terminal
I'll keep updating this content. Subscribe for more advance VS Code content,