VS Code Keyboard Shortcut on Windows

The VS code keyboard shortcut + Bash command can increase your coding speed and save you time.

VS Code Keyboard Shortcut on Windows

I like to keep my hand on the keyboard when I'm coding.

I learned the VIM emulator on VS Code. I like it a lot.

I'm not sure it is my PC problem or what, I can feel the lag and delay. This is obvious for an ex-gamer 😁

I disable VIM after learning and using it for a week then I start deep-diving VS Code shortcuts to find almost or similar keyboard magic.

Hope one day in the future, VS Code come with its native VIM emulator.

Below is the VS code keyboard shortcut + Bash command I'm using that save me time.


Create a file

ctrl + ` to open VS Code's terminal

Use bash command to create a file,

touch folder/file.extention

Example:

touch components/Header.jsx
touch lib/gtag.js
touch styles/globals.css

Open the file

ctrl + e to open the "go to file" panel,

Alternatively, you can also:

ctrl + p to open the "go to file" panel,

Then type the filename keywords,

Example:

Press enter to open the file.

If there are multiple files with almost the same filename, Β 

Press or to select the file you want to open.


Add A Parent HTML Tag Or Component

<a href="#" class="link">Link Text</a>

Let's said we want to add a div parent to the anchor tag as follow:

<div>
    <a href="#" className="link">
        Link Text
    </a>
</div>

How could we add it fast and easy on VS Code?

ctrl + k then ctrl + s to open VS Code setting,

Find "Emmet: Wrap with Abbreviation",

Double click it and set the keyboard shortcut to ctrl + alt + w,

πŸ“Œ You can set any keyboard shortcut to work best for you.

Move your cursor in front of the anchor tag:

ctrl + alt + w, type "div" in the command palette then press enter to insert the div tag

Alternatively, you can press F1 and search:

Then type "div" in the command palette and press enter to insert the div tag


Move Line Down

This method also can use to add a parent tag. I use it to move components to the position I want to be.

Add Parent Tag

Let's said we want to add an anchor tag to wrap the button:

First, we add an anchor tag above the button

After adding the "about.html" link then press the tab to move your cursor to the green vertical line and press enter to expand:

Afterwards, move your cursor to the anchor closing tag's line and press alt +

The closing anchor tag's line will move one line down:


Update & Change The Tag

Method 1

Said we want to update the following div tag to the main tag,

Put your cursor any slot inside the div tag,

ctrl + d two times to select the opening and closing div tag,

Type "main" to change the tag,

❗ Remember to press ESC to un-select the closing tag

Method 2

ctrl + k then ctrl + s to open VS Code setting

Find "Emmet: Update Tag"

Double click it and set the keyboard shortcut to ctrl + alt + u

πŸ“Œ You can set any keyboard shortcut to match your use case.

Put your cursor any slot inside the div tag,

ctrl + alt + w then type "main" in the command palette then press enter to change to the main tag

Move Cursor Faster on VS Code

Keep pressing < to move left or > to move right repeatedly.

Move The Cursor Faster

ctrl + < to move one word to the left. Keep pressing it to make the cursor move word by word to the left.

Same concept for ctrl + > .


Teleport Your Cursor To The Front Or Back Within The Line

Press home moves the cursor to the beginning of a line.

Press end moves the cursor to the end of a line.


Move To A New Line Below

Before I know this keyboard shortcut, I often press end moves the cursor to the end of a line then press enter to move the cursor down to a new line.

This keyboard shortcut saves me a lot of keystrokes.

ctrl + enter will always move my cursor to a new line below regardless of where is my cursor within the line.

Move To A New Line Above

ctrl + shift + enter work the opposite of the above keyboard shortcut.


Move Cursor To Top Page

Combine with the keyboard shortcut above, we can import React's component fast with the keystrokes only.

Said you initial a component:

const IndexPage = () => {
    return (  );
}
 
export default IndexPage;

Your cursor is inside the bracket of the return.

You want to import a < Container /> component.

ctrl + home to move your cursor to the top of the page.

Press ctrl + shift + enter twice, you'll see your cursor remain on top of the page and added 2 lines then:

import Container from "@component/Container"

This is a small example. Imagine you're working with a larger component and your cursor is at line 268. These 2 keyboard shortcuts save you time.

Back To The Return Bracket (Previous Cursor Position)

After import the container, you might press back to the bracket inside the return.

There is a faster keyboard shortcut,

Press alt + < will go back to the previous cursor position.

Let's take the example above, you'll go back to line 268 immediately.

This keyboard shortcut also works across the files.

Say you go to file B from file A to check a prop attribute (code),

Press alt + < will go back to file A's last cursor position.


Move To A Specific Line

ctrl + g to open:

This command palette shows your current line and available line to move.

Type the line number and press enter to move the cursor to the line number you type.

Yes, you've to remember which line you want to work on then only can move to the line.

Hence, I use it occasionally. I don't like to remember this line number that line number.

Some developers find it very useful. If you know how to use this keyboard shortcut professionally. Please share your article with me on Twitter.

I move my cursor with the following keyboard shortcut more often.


Move by Symbol

Use the symbol panel to move to title, classes, variables, functions and so on.

ctrl + shift + o to open symbol panel.

Below is one of the markdown files I open:

It shows all the heading, then I can decide which heading I want to go.

Press or to navigate within the symbols and press enter to move your cursor to the selected symbol

Below is one of the React Component I open:

It shows the variable and the CSS properties within the component.

Can I group them?

Type : to group symbols by category.


🎈 If you see this message, you going to be lucky soon. There are billion of websites. But you happen to visit this website at this time and see an under-construction section.

Below is the old content while I'm re-writing the blog. I'll delete it afterwards 🎈


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.

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

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

Close File

ctrl + w to close your current file

Close All Opening Files

ctrl + k ctrl + w to close all open file


Selection

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

Copy

ctrl + c or ctrl + insert

πŸ“ If you not select a character or word, this shortcut will copy a line.

Cut

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

Paste

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

Deletion

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

Method 1:-

ctrl + shift + k to delete a line

Method 2:-

ctrl + l (L) to select the a line and press delete

Move A Line

Method 1:-

ctrl + l (L) to select the a line, ctrl + x to cut a line then ctrl + v to paste the line

Method 2:-

shift + delete to cut a line, ctrl + v to paste the line

Method 3:-

alt + to move the current line up

Method 4:-

alt + to move the current line down

The Explorer

I seldom use the explorer this way. I share in case some people find this useful.

Method 1:-

ctrl + shift + e to focus on the explorer in the sidebar, ctrl + shift + e to focus back to the editor.

Method 2:-

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.

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.

The Terminal

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

Method 1:-

Type "clear" and press enter

Method 2:-

ctrl + l(L) in the terminal

I'll keep updating this content. Subscribe for more advance VS Code content,