Learning To Be A Mouse-Less Web Developer In VS Code (Updated: 22 July 2020)
Tags: vscode, webdev, productivity, beginners
Published: 2020-06-29 06:50:08

Updated: **22 July 2020**
- Add "Clear the terminal inside VS Code"
- Add "Backward and Forward" (Essential)
- Add "Move a line up or down"

Updated: **02 July 2020**
- Add "select a line" shortcut 
- Add "toggle the problem panel"
- Remove and organise the import modules
- Navigate between terminal

Note: Select the title inside the quote and use **_Ctrl + F_** to quickly find the newly added section

---

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 + . (Period)_** 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 a file.

### **--Navigate between editor and explorer--**
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.

### **--Navigate between the editor's tab--**

**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. 

### **--Select a line--**

- **_Ctrl + L_** to select the entire 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

### **--Move a line up or down--**

Instead of **_Ctrl + X_** to cut a line and **_Ctrl + V_** to paste a line, you could use **_Alt + Up/Down Arrow _** to move a line up or down

### **--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

### **--Navigate between terminal--**
- **_Alt + right/left arrow_** to navigate between the 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**

### **--Clear the terminal inside VS Code--**
- Type **_clear_** and press **_Enter_**
- **_Ctrl + L_** in the terminal

### **--Show All Command--**

**Method 1**

**_Ctrl + Shift + P_** to see all commands

**Method 2**

I prefer pressing **_F1_** to see all commands

### **--Toggle the problems panel--**

When you see your file become red colour, VS Code detects a problem in your file.

- **_Ctrl + Shirt + M_** to focus on the problems panel.

### **--Remove and organise the import modules--**

After you remove some components, usually, you need to remove the import module manually.

You can remove those un-used components or modules automatically by pressing Alt + Shift + O.

**The drawback**
VS Code organise all import statement in its preference way. I like to put react import statement at the top. But, after pressing Alt + Shift + O, En... maybe you try it see whether you like it or not. 

### **--Backward and Forward--**

Imagine you are in line 1034, and you want to import a module at the top of the editor. You Ctrl + Home to navigate to the top and import the module. How are you going back to line 1034?

You might need to remember the line number and use Ctrl + G option. What if you don't want to squeeze your memory muscle to remember the line number?

- You can use **_Alt + Left Arrow_** to backward (This does not change and undo anything, it just back to previous location or action)

Why did I say it also back to the previous action?

If your previous action is select a line, at this moment, you navigate to the top and then Alt + Left Arrow. It will back to select a line.

Please note that if you in file 1, and you go to file 2 and import a module. At this moment, you Alt + Left Arrow. You will go back to file 1.

**_Alt + Right Arrow_** to go forward


---

I want to continue writing, but dev.to fenced block syntax highlighting is not working. 

Below is the result I get:-

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

**I not sure how to fix it, could anyone give me some hint or guide me to fix it?**

(I end up putting 4 back-tick above and 3 back-tick below to make the fenced block syntax highlight work.

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

Dev.to's team, what is happening?

I'll continue...

### **--Emmet--**

````html
<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](https://dev-to-uploads.s3.amazonaws.com/i/kltt1kv3vp7oqvkzsgq1.png)


**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](https://dev-to-uploads.s3.amazonaws.com/i/8s5hup911otx77ux9o9c.png)
4. Type **"a"** and press **_Enter_**

Thank you for reading~

**Hi, Do you have any similar tips could share with me?**