DEV Community

Cover image for Learning To Be A Mouse-Less Web Developer In VS Code (Updated: 22 July 2020)

Learning To Be A Mouse-Less Web Developer In VS Code (Updated: 22 July 2020)

Anson Low Z.F on June 29, 2020

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 J...
Collapse
 
mitchartemis profile image
Mitch Stanley

If you really want to go fully mouseless I would suggest learning Vim or perhaps emacs.

There is a VS Code extension for Vim keybinds which is fairly good and will get you moving/editing text fairly quickly. I'll mention it's not quite as good as the real thing, though. Terminal vim gives your other benefits like cycling through multiple terminal windows with ⌘[ and ⌘], vim plugins, etc.

There's also browser plugins that let you bring vim keybinds over to the browser as well which can be handy.

That said, vim takes a long time to learn (I'm still learning new things after 5+ years with it). It's not for everyone, but definitely worth checking out.

Collapse
 
jakehamiltondev profile image
Jake Hamilton

Absolutely this. Learning vim bindings can give you a big productivity boost in your editor and enable the same movement in the browser. If you really want to dive in the deep end, you can try using a tiling window manager like Sway. Once you've done that, you won't need to touch your mouse again unless you're playing a game!

Collapse
 
sabz72608404 profile image
Sabz

Yeah VIM plugin helps with most of this

Collapse
 
nans profile image
Nans Dumortier
<div>hello world</div>

You can achieve with 3 back quotes (`) followed by the language you're using (here, html)

Collapse
 
habereder profile image
Raphael Habereder

3 are for multi-line. Single back quote is for single-line/in-line code blocks, be sure to remove new lines and it should work.

Collapse
 
ansonlowzf profile image
Anson Low Z.F
<div>
  <article>
    <a>I'm a button</a>
  </article>
</div>

It's working, when I copy and paste the code in this comment.

Weird huh?

Thread Thread
 
nans profile image
Nans Dumortier

Maybe this resource could help?

Thread Thread
 
nans profile image
Nans Dumortier

😧Weird yeah!

Thread Thread
 
hemant profile image
Hemant Joshi
<div> Thank You</div>
Collapse
 
ansonlowzf profile image
Anson Low Z.F

Hi, Nans. Thank you for guide. This is what I'm doing. But it's output something weird like above. I not sure why.

Collapse
 
pachowstudios profile image
Ryan Shea • Edited

I use my keyboard nearly 100% of the time. Over several years I've made custom keyboard shortcuts using mnemonics to make them easy to remember. Find references: alt-r, go to definition: alt-d. All "tab" related actions start with ctrl-t. All "view" related actions use alt-v. Most of them can be executed with one hand.

This allows me to be extremely fast once I know what I'm trying to do.

Reply if you'd be interested in me sharing the whole list.

Note: I'm using vscode

Collapse
 
ansonlowzf profile image
Anson Low Z.F

Ryan, thank you for offer to help and willing to share your shortcut list. I'm looking for native VS Code shortcut.

I forget to add "VS Code" in the title.

Btw, Thanks again.

Collapse
 
pachowstudios profile image
Ryan Shea

You only want to use the default shortcuts? IMHO you're gonna have a hard time with that. I think they're far from optimized for 100% keyboard use.

Thread Thread
 
ansonlowzf profile image
Anson Low Z.F

Yes, Ryan. The list I share in the article is all native VS Code keyboard shortcut. My title and some content might be misleading. I just realised after reading the comment. I want to thank and apology to you for the misleading.

I encourage you to write an article about the shortcut list you made. Or you already write on some platform? Please share with me if you do.

Collapse
 
natriumdev profile image
NatriumDev

I don't get it. Working mouseless seems like the holy grail to become the perfect developer.

What do you gain from it? Speed? I am not a believer. This might be the case when working solely with keyboard, even in your OS, like Taylor Beeston mentions in his comment dev.to/taylorbeeston/comment/1163a

If working mouselessly is your thing, good you. If not, also good. But don't make it seem more important than it really is.

Collapse
 
ezracode profile image
Esdras Salazar

I don't understand why we must develop as we live in the 70s, using black themes or using keyboard only,. In the 70s developers don't have more options, but we are in 2020, we have rich IDEs, we have more memory available, we don't have to use dumb terminals, we have touch devices. Please, don't get me wrong, is just that as I see we have more options now and we must use all of the then accordly ti the situations.

Collapse
 
ansonlowzf profile image
Anson Low Z.F

Thank you for your opinion. You're right. I still find GUI work faster in VS Code.

i.e. the source control panel.
Git - add a file, commit, and push a lot faster—no need to type a long filename.

I'm thinking to write an article about how VS Code make coding fast.
(Meanwhile, I still experimenting whether using mouse-less can increase productivity or not)

Collapse
 
ajkerrigan profile image
AJ Kerrigan • Edited

Nice post Anson! Articles like this always teach me a keyboard shortcut I've either forgotten or never knew. In this case, that Ctrl/Cmd + Shift + period to bring up breadcrumbs is a nice touch :). Thanks!

I get a lot of benefit from having common keyboard reflexes across multiple applications. For me this means tweaking some of VS Code's keyboard shortcuts to match my tmux+vim muscle memory, which I wrote a bit about here.

I think the more important piece is to experiment a bit when you can, but fall back to whatever's most comfortable when you really need to get something done. No mouse-shaming required! :)

Collapse
 
anthonybrown profile image
Tony Brown

Because it's efficient and fast. If I don't need an IDE, I'm not going to use one thank you.

Collapse
 
thomazmoura profile image
Thomaz Moura

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

Man, don't go down that route, unless you actually feel that need yourself. If you start to focus your learning on what other people are fighting over the internet you're likely to waste way too much time on meaningless things that many zealots don't understand well themselves. And miss the oportunity to focus on actually important things.

But having made that switch a few years ago, though, I'd say that working "mouselessly" can be pretty handy and useful if you are the kind of person who loves to use the keyboard... And will probably be more of a headache than a "performance boost" if you're not.

Point is: if you're the type of person who has to actually look at the keyboard to remember where a key is, or usually types with only one finger, you most likely won't gain anything from that switch.

Now that that's taken out of the way, I agree on what the others said - to be able to use nearly everything from the keyboard, VIM (or it's derivatives) is the way to go.

The biggest argument for this, IMHO is that if you learn the "VIM-way" you can use it nearly anywhere. From the command line (with VIM or NeoVim), to the modern editors and IDE's that mostly all have VIM plugins (VS Code, Sublime, Atom... heck, even Visual Studio has one) all the way to the browsers (with the Vimium ou VimiumC plugins) you can find a way to use the knowledge you acquired with VIM.

If you focus on your current editor, though, you most likely will have two major drawbacks: even an amazing and productive editor as VS Code isn't as effective with the keyboard without a VIM plugin and the more productive you get with it, the harder it will be to transfer that muscle memory you got to another editor.

Another thing that helped me a lot is to get a programmable mechanical keyboard, that way you can map distant keys (such as the arrow keys) to easier to reach keys (such as FN+HJKL to mimic VIM).

Collapse
 
tkainrad profile image
Thomas Kainrad

I wouldn't say you have to ditch your mouse completely, but using the keyboard is definitely faster in many cases.

I have recently published a blog post where I list all keyboard shortcuts that I use frequently:
tkainrad.dev/posts/a-collection-of...
Might provide some inspiration.

Also recently, I published a free web application that helps to learn and train keyboard shortcuts: keycombiner.com/
The app has pre-made collections for popular software, such as VSCode, which can be filtered and searched easily: keycombiner.com/collecting/collect...

Collapse
 
ansonlowzf profile image
Anson Low Z.F

Thanks for sharing your keyboard shortcut list. I learn some new keyboard shortcut today.

Collapse
 
amanjagdev profile image
Aman Kumar Jagdev

Awesome article, it really helped a lot

Btw I guess you are getting that block syntax problem because in heading ---Open the vscode terminal --- you have explicitly used a backtick which might be conflicting with further blocks.. try removing that

Collapse
 
ansonlowzf profile image
Anson Low Z.F

Aman, Thank you for telling me.

The ---Heading--- I add it later.

I can't solve block syntax highlight until today.

Collapse
 
saramon profile image
saramon

You really like hurting yourself :)

Collapse
 
ansonlowzf profile image
Anson Low Z.F

I don't feel hurt when I try something new. But you're right, and I feel a bit uncomfortable when I just started to use more on keyboard. Now, I get used to it.

Collapse
 
taylorbeeston profile image
Taylor Beeston

As someone who pretty much never touches the mouse anymore, I feel like I should offer some suggestions that make my life easier.

The first thing to really help deep dive into letting go of the mouse is to use a tiling window manager such as i3. Not only will this allow you to become extremely comfortable using your operating system with your keyboard, but it will actually make it kind of annoying to use the mouse anyways, which I find important when making the switch.

The second big tip (which was already mentioned) is to switch to an editor like vim. I personally use neovim, but both are pretty good these days. Switching from VSC to vim can be pretty daunting though because you have to learn about things like configuration,
handling plug-ins, code completion, and (Tim Pope](github.com/tpope). However, the reward is very worth it if you do decide to go full (n)vim, and I'd highly recommend it if you're already trying to ditch the mouse.

My last two suggestions are really only relevant if you do decide to go the vim route, which i would be happy to help you learn if you'd like.

First, if you're going to use vim, please try and relearn how to type with your right hand on HJKL instead of JKL;

This used to be home row way back when Bill Joy wrote vi, so the program is written sort of expecting you to type that way, and I can 100% guarantee you that typing this way will make you infinitely more comfortable in vim.

My final suggestion (as was already suggested by someone else) is to look into the browser extension Vimium. This extension will remove about 95% of your reliance on your mouse on the web. To click something, simply type F and a bunch of letters will appear over clickable elements. Type the letters of the element you'd like to click and boom, you have clicked it!

Collapse
 
quinten1333 profile image
Quinten Coltof

You should try the window manager i3 or the wayland variant sway if you want to go fully mouseless. A vriend recommended it to me and havent booted into the standard ubuntu window manager ever since.

This is cause I have 100 virtual desktops now (which will be 100 virtual desktops per monitor soon). Why so many? Cause I have a section of 10 virtual desktops for each project I'm working on. Studying is section 1 til 3, own project is 4, work is 5 and 10 is pure unproductive fun and music.
Changing from my editor to chrome to test the application is 1 keybind away(super+ shift + page up), going to the dev server to look at the errors as well(super + shift + page down or super + right when using stacked mode), changing my music is so as well etc. And except for work everything is always open so I can just press the keybind to go to section 2 (ctrl+shift+super+ 2) and get going. (which is also why I hibernate my laptop instead of shutting it down)

The only reason I use my mouse on my laptop is to test the application I'm building since that has a gui or browse the web.

The downside (and sometimes upside) is that literally no one can use my laptop as doing something as simple as starting google chrome is done using type "google chrome" util you see it and can navigate to it using arrow keys . (It works way more efficient than it sounds: github.com/davatorium/rofi)

Oh andehh its also extremely configurable as you probably already noticed, for example: I set the F9 and F10 keys to control the volume of my raspberry pi which plays my music.

Collapse
 
anonimoconiglio profile image
Santiago • Edited

Thank you, I'm always looking to some new ways to stop using the mouse!
PS: you can navigate throught the editor with a "vim flavour":
j (down) - k (up) | h (collapse) - l (expand)

Collapse
 
asifm profile image
A M

I want to respectfully state that the article has absolutely nothing to do with the concerns you mentioned.

Collapse
 
rabbiticol profile image
Ahmad Shahzad

when you try learn to be as mouse-less as possible because going from the keyboard to the touchpad on your laptop is a massive pain and your goldfish concentration can't afford the sudden halt

Collapse
 
webstackdev profile image
Kevin Brown

Ctrl + Shift + . (full stop) what does "full stop" mean?

Collapse
 
ansonlowzf profile image
Anson Low Z.F

Glad that you ask, It's should be called period. Thank you for rising this issue.

Collapse
 
spiritupbro profile image
spiritupbro

cray