Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

Learning To Be A Mouse-less Web Developer In VS Code

May 29, 2020 #Resources

After using PC for so many years with a mouse or trackpad, we so used to point and click everything we want on the screen so fast and concise. Drag and drop, left-click, right-click, scroll the web page up and down with mouse wheel.

There are some arguments in the web development community mention that writing code without a mouse could be faster.

I’m curious to try it out. My target is to focus 90% on using the keyboard. I don’t think we can 100% avoid using a mouse in a graphic user interface (GUI) environment, especially when we want to check the navigation link, button and form.

I will try my best to use the keyboard shortcut, terminal and command line in VS Code. Then document my learning to be a mouse free developer (Ops, it’s should be a mouse-less developer).

I not sure I can get used to it or not. What I pretty sure is my coding speed will decrease dramatically.

If you could also share how you code without using a mouse would be much appreciated. Let’s learn together.

Below are the keyboard shortcut and navigation I learned so far, I’ll continuously update this article when I learn something new.

First Few Days

I use mouse unconsciously, and I always have to remind myself not to use it.

Change Cursor Colour

I change my cursor colour to yellow. So, I can see it easily.

Open a file

Method 1: Use Go To File

I often toggle the sidebar off with Ctrl + B. I navigate from file to file with Ctrl + E (you can also use Ctrl + P) then search the keyword of the filename and press Enter to open a file.

Example:- Your filename is how-to-build-a-website-with-gatsbyjs.md, you can type gatsbyjs or build a website, VS Code will filter and show you every file match your search.

Method 2: Use Breadcrumbs

Ctrl + Shift + . (full stop) to focus your current breadcrumbs folder. Use Ctrl + right/left arrow to navigate between folder. Use up/down arrow to navigate between the file. Press Enter to open the file.

I seldom navigate folder and file this way. I share this method with people who might find it useful.

Method 1

Ctrl + Shift + E to focus on the explorer and Ctrl + Shift + E again to focus back to the editor.

  • Use the up/down arrow to navigate between the file or folder.
  • Use the left arrow to go up one directory, and right arrow to go inside a directory.
  • Press Enter to open a file.

Method 2

Ctrl + 0 (Zero) (not working in number pad) to focus on explorer, Ctrl + 1 (not working in number pad) to focus back to the editor

  • Use the up/down arrow to navigate between the file or folder.
  • Use the left arrow to go up one directory, and right arrow to go inside a directory.
  • Press Enter to open a file.

Method 1

  • I use Ctrl + PgUp to focus on the previous tab and Ctrl + PgDn to focus on the next tab.

Method 2

  • You can use Ctrl + Tab to focus on the next tab or Ctrl + Shift + Tab to focus on the previous tab.

Close a tab

  • Ctrl + W to close the current tab

Delete entire line

Method 1

  • Press Backspace deletes one character to the left

Method 2

  • Press Delete on the keyboard delete one character to the right

Delete a word

  • Ctrl + D to select a word (whether you are in front, back or within the word), press Delete in the keyboard to remove the word.
  • Place your cursor at the end of the word you want to delete, then Ctrl + Backspace to delete the word.
  • Place your cursor in front of the word, and then Ctrl + Delete to delete the word.

Insert a new line

  • Ctrl + Enter to move my cursor to a new line (go down 1 line).
  • Ctrl + Shift + Enter to push existing line down and add a new line.

Moving cursor in the editor

(Sorry for including this basic)

  • The right arrow moves one character to the right
  • The left arrow moves one character to the left
  • The up arrow moves the cursor up one line
  • The down arrow moves the cursor down one line

Moving cursor by word

  • Ctrl + right arrow moves the cursor to the end of a word
  • Ctrl + left arrow move the cursor to the beginning of a word

Moving cursor by section

  • Home in the keyboard move cursor to the beginning of a line
  • End in the keyboard move cursor to the end of a line
  • Ctrl + Home move the cursor to the beginning of the page
  • Ctrl + End move the cursor to the end of the page
  • PgUp moves the cursor to the top of the editor.
  • PgDn moves the cursor to the bottom of the editor.

I use it to scroll editor sometime.

Select a word

Method 1

  • Ctrl + D to select a word

Method 2

  • Ctrl + Shift + Right Arrow to select a word toward the right
  • Ctrl + Shift + Left Arrow to select a word toward the left

Move and select a word

  • Ctrl + Shift + right arrow move the cursor and select the word toward the right.
  • Ctrl + Shift + left arrow move the cursor and select the word toward left.

Scroll the editor

  • Ctrl + up arrow to scroll one line up.
  • Ctrl + down arrow to scroll one line down.

I use it to adjust the editor view.

Open the Terminal inside VS Code

  • Ctrl + `(backtick) toggle terminal panel on & off

Open Terminal side by side

Ctrl + shift + 5 to open second terminal

Open an external Terminal

If you always forget to stop the development server before closing the VS Code.

Use Ctrl + Shift + C to open an external terminal

if you want to change external terminal, Open VS Code setting and search External: Windows Exec

Show All Command

Method 1

  • Ctrl + Shift + P to see all commands

Method 2

I prefer pressing F1 to see all commands

<div>
<article>
<a>I'm a button</a>
</article>
</div>

Remove Tag

I want to remove the article tag.

  1. Place the cursor inside the tag until the beginning and the ending tag is glowing.
  2. Press F1
  3. Type remove tag 4. Press Enter

Alt Text

Update Tag

Same concept above Wrap with Abbreviation I want to wrap the word “link” with an anchor tag.

<p>Please check out this link</p>
  1. Put the cursor in front the word “link”

  2. Ctrl + D to select the word

  3. Press F1 and type wrap

    Alt Text

  4. Type “a” and press Enter Hi, Do you have any similar tips could share with me?


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me