Learning To Be A Mouse-Less Web Developer
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.
--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.
--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
I want to continue writing, but dev.to fenced block syntax highlighting is not working.
Below is the result I get:-
`html
`
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.
`
<div> <article> <a>I'm a button</a> </article></div>
Dev.to's team, what is happening?
I'll continue...
--Emmet--
<div> <article> <a>I'm a button</a> </article></div>
Remove Tag
I want to remove the article tag.
- Place the cursor inside the tag until the beginning and the ending tag is glowing.
- Press F1
- Type remove tag
- Press Enter
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>
- Put the cursor in front the word "link"
- Ctrl + D to select the word
- Press F1 and type wrap
- Type "a" and press Enter
Hi, Do you have any similar tips could share with me?
Original Link: https://dev.to/ansonlowzf/learning-to-be-a-mouse-less-web-developer-7em
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To