Multi-cursor code editing: An animated introduction

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

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.

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.

My 2 cents for those who prefer cli editors, vim [0] and emacs [1] have plugins that allow the multiedit. In micro it's already embedded.

[0] https://github.com/hlissner/vim-multiedit [1] https://github.com/magnars/multiple-cursors.el

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

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.

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.

Nice post. Obligatory Helix plug: For anyone interested in taking this further, there are whole editors designed around multi-cursor editing.

https://helix-editor.com/ http://kakoune.org/

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

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.