4 ms·

Multi-cursor code editing: An animated introduction

21 points by liamswayne 3y ago

AYBABTME 3y 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 3y ago
  Yep. Nothing better than wowing other devs.
  - AYBABTME 3y 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 3y ago
      Wow then teach. If you don’t wow them, they won’t want to learn.
      - AYBABTME 3y ago
        I think I misread the previous comment as a snarky jab. My bad!
franciscop 3y 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).
donatj 3y ago
I want an OS where every text area has multiple cursors already.
jasonjmcghee 3y 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
dcre 3y ago
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/ https://helix-editor.com/ http://kakoune.org/ http://kakoune.org/
plonq 3y 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.
sublinear 3y 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.
deleted 3y ago
[deleted]
spense 3y 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.
cdrini 3y 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.
az09mugen 3y ago
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 https://github.com/hlissner/vim-multiedit [1] https://github.com/magnars/multiple-cursors.el https://github.com/magnars/multiple-cursors.el

21 points by liamswayne 3y 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 3y ago
Yep. Nothing better than wowing other devs.
- AYBABTME 3y 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 3y ago
    Wow then teach. If you don’t wow them, they won’t want to learn.
    - AYBABTME 3y ago
      I think I misread the previous comment as a snarky jab. My bad!

franciscop 3y 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).

donatj 3y ago

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

jasonjmcghee 3y 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

dcre 3y ago

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/ https://helix-editor.com/ http://kakoune.org/ http://kakoune.org/

plonq 3y 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.

sublinear 3y 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.

deleted 3y ago

[deleted]

spense 3y 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.

cdrini 3y 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.

az09mugen 3y ago

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 https://github.com/hlissner/vim-multiedit [1] https://github.com/magnars/multiple-cursors.el https://github.com/magnars/multiple-cursors.el