Vscode macros

Jordi Pastor |

How I wasted 30 min to create a shortcut in vscode

You can find the process I followed below

Some context

The other day I was using Rstudio because I found few functions I needed already written in R. At some point I realized that some widely used operators are EXTREMELY ANNOYING to type. Specifically, I mean assignment "<-" and pipe "%>%" operators. Perhaps I have this feeling because their python counterparts are as simple as "=" and ".". Luckily, someone thought about this before, and there are plenty of already written shortcuts to type such combination of symbols. Alt + - and Ctrl + Shift + M, respectively.

Vscode shortcuts

In the long run you may end up saving quite a lot of time. Then I wondered why I am not exploiting all the vscode shortcuts (vscode is my IDE of choice most of the times). Afterwards, I opened shortcuts tab and I remembered. There are so many of them that in such list-like presentation they can be quite overwhelming. While scrolling down, I refreshed some of them that could be useful that I am not using simply because I don't have the habit or I do not remember the key combination. Recently, those that involve creating multiple cursors caught my attention

multiple cursors are cool

There are few shortcuts that create cursors and that can come in handy but I missed the following. Wouldn't it be cool to have a key bind that types an equal sign = with a cursor in each side? It would be quite useful when updating a column value in pandas such as here 

df["ugly colname that can't be .attr autocompleted"] = \
    df["ugly colname that can't be .attr autocompleted"].whatever_method(...)

and after escaping the 2nd cursor, just keep appending methods.

Unfortunately, this does not exist natively at the time I am writing this. In other words, there's not such a command in vscode, so to execute it, I had to chain several commands.

How to create a macro and binding it to a key

A couple of google searches and SO entries revealed that I could accomplish my goal making a macro and binding it to a key.

So then, these are the steps I followed:

1. Download macros extension

I just tried the most downloaded vscode macro extension I found, and it worked. It was this one, wisely named macros, by geddski. The documentation is quite succinct (perhaps too much)

2. Create a keyboard shortcut

Edit Keyboard Shortcuts as geddski states in readme. I had to edit directly keybindings.json. If you do not know where it is located, the fastest way to reach it is opening the Keyboard Shortcuts tab (Ctrl + k, Ctrl + s) and clicking in the file icon located on the top-right corner. Append your desired combination of keys and the name of the command!. Here's mine as an example: 

[ // I am omitting other shortcuts
    {
        "key": "ctrl+shift+=",
        "command": "macros.equalCursors"
    }
]

Vscode might complain until it finds a macro named equalCursors using macros extension.

3. Write the macro

You must edit settings.json (Ctrl+Shift+P and select Preferences: Open Settings (JSON)). This step is the tricky one, particularly if the macro is complex. In my case it was quite simple because it did not require any variable nor many steps. Despite this, it was the step that took longer because I did not find any detailed list/documentation on vscode's programmable actions. Here's a gist of them, which are named with a quite clear name. I wish I had found it before crawling vscode's documentation... After a short trial and error, I got it working using the following:

{
    "macros": {
        "equalCursors": [ // same name as previous step
            {"command": "type", "args": {"text": "@ = @"}},
            "cursorLeftSelect",
            "editor.action.addSelectionToPreviousFindMatch",
            "deleteLeft"
        ]
    }
}

How long will it take to be worth investing 30 min on that (+ a blog entry)

I do not know. Probably >2000? I am happier now, though.

  • Quick and Simple Text Selection allows selecting content between tags, quotes, parenthesis, etc.
  • WakaTime is an open source VS Code plugin for metrics, insights, and time tracking automatically generated from your programming activity.
  • GitHub Copilot??? I do not know because I am still in the waiting list.
  • Markdown All in One. Among other stuff, it allows exporting markdown (with Math) to html (I disabled its annoying shortcuts, though).
  • TODO tree. Shows todo's scattered around.
  • Any GitHub extension on steroids to visualize git-blame live. git blame meme: where I find out that spaghetti code was written by me

I stole the meme from here

Cheers!

edit: bonus macro

This one replaces selected(highlighted) variable with a list comprehension iterating over original variable. Remember to add editorHasSelection && editorTextFocus as "When" clause when setting the binding. Perhaps this one could be achieved with snippets, idk.

        "listComprehension_selection": [ 
            {"command": "type", "args": {"text": "["}},
            "cursorLeft",
            {"command": "type", "args": {"text": "x for x in "}},
            "editor.action.selectToBracket",
            "cursorRight",
            "cursorLeft",
            {"command": "type", "args": {"text": " if x"}}
        ]
Show Comments