franciscop 13 days ago

Nice one! While I knew all of these except [cmd]+[k], but this is a very well explained resource to share with more junior devs! Some of those are really useful when refactoring. The only small change for me is that I normally let Prettier do the final formatting, which not only saves time but also serves as a visual clue that the code is semantically correct (since prettier won't format incorrect code).

Next one in this list should def be about using the "Replace" box effectively, where you can use Regex and $1 and other advanced stuff (you can even do it across files if you are brave enough).

cdrini 12 days ago

Very well written, very well explained, and visually interesting! Going to share this with a few of my colleagues, and maybe add this to our projects' documentation page!

Only changes I'd make:

1) You've already got a lot of JS here, it would be nice if you auto-detected the operating system and showed the right shortcuts for windows users! People on windows generally don't use "^" for ctrl, so that will confuse new folks I think. They tend to write it out; eg "ctrl-left".

2) In the demos, it would be cool if you had the keyboard shortcut appear as the action is happening. That'll really help drive home what's happening. The "view steps" thing is a little confusing/disjointed from the action.

3) The scroll-in appear animation is pretty, but a little annoying when I'm just scrolling back up through the doc looking for something. I'd make it only apply once if possible when the codeblock first comes into view. And then keep it constant.

Also TIL about selecting newlines with ctrl-d! That's a common usecase for me, but I use the vs code shortcut "shift-alt-i" which selects all lines in the current selection.

plonq 13 days ago

Vim makes multi-cursor even more powerful. You usually don’t need to find the right pattern in cases where the lengths differ as this post describes, because each vim movement applies to each cursor independently. So ‘go to comma’ and ‘change in parentheses’ work as expected on each line.

A common action for me is to use (the equivalent of) cmd+d to select the most obvious repeated symbol then use vim movements from there.

donatj 13 days ago

I want an OS where every text area has multiple cursors already.

sublinear 13 days ago

Very nice examples! I discovered multiple cursors about a decade ago when I switched to sublime text. These are the moves that kept me using it (and the great plugin ecosystem).

If I recall correctly it took a little while for vscode to fully implement what's shown here and the shortcut keys were also not initially the same. I didn't switch to vscode until that was sorted out.

AYBABTME 13 days ago

Great demo. I've grown to do all of these things instinctively, but quite often I pair with folks who get surprised with all I can do with multi-cursors and asking me how I do this. I don't have a great answer because I just kind of have these mental reflexes, I never made a list of all the techniques I use. This demo will be on my list next time.

  • spense 12 days ago

    Yep. Nothing better than wowing other devs.

    • AYBABTME 12 days ago

      I mean no? The point is to share our craft and learn from each other's best techniques? The wowing part is irrelevant.

      • tehnub 12 days ago

        Wow then teach. If you don’t wow them, they won’t want to learn.

        • AYBABTME 12 days ago

          I think I misread the previous comment as a snarky jab. My bad!

jasonjmcghee 13 days ago

For Jetbrains users, you can find these in Actions by searching "occurrences"

For Mac specific shortcuts...

Ctrl + G adds the next occurrence to the selection

Ctrl + Command + G adds all occurrences in the current file to the selection

spense 12 days ago

Love these!

I'd add filling out boilerplate (e.g., impl trait defintions).

An extension can also increment selected numbers together or turn selected 0s into a sequence.