Motivation

I have been writing TILs(short notes about what I learned each day) in Dendron for a few days now, for which I need to specify the date of each TIL. Since looking at the date in the top right corner and typing a few characters out was excruciatingly painful, I used to get this from the date shell command. This required me to open a terminal in VS Code (I usually don’t have one open when I am writing notes), enter the command, copy the output and paste it where I required it. As this too was proving to be an insane amount of effort, I had to automate it. Obviously.

But why not use keybindings directly?

Well, that’s what I thought.

Initially, I stuck to my approach of getting the date from the shell command and somehow transferring it to the text editor in focus. The next logical step was to get the output of the command into the clipboard. After that, it could be pasted into the editor automatically. The aim was to achieve all this with a single keystroke or key combination.

To transfer the output of the date command to the clipboard, I came across xclip and it worked pretty good.

 date | xclip -sel clip

This command pipes the output of date to the clipboard. Now, how to run this in the VS Code environment?

Apparently, keybindings can only call methods available in the VS Code API directly. To attach a keybinding to a shell command, I found that an extension has to be installed. Using this extension, I was able to attach the above command to a preferred key combination. This was done by adding an entry in the keybindings.json file as follows.

{
    "key": "ctrl+m d",
    "command": "terminalCommandKeys.run",
    "args": {
        "cmd": "date | xclip -sel clip",
        "newTerminal": false,
        "showTerminal": false
    }
 }

Now the task was to transfer the text from the clipboard to the position of the cursor. This had to be done using the VS Code API. This is where the problem started. Apparently, VS Code does not allow you to run multiple commands with a single key. It has been a long requested feature in VS Code and the only workarounds are awkward macros and tasks. There is really no straightforward way to combine the above shell command with a VS Code API call. You could argue that I could just do Ctrl+V after the xclip stage, but anything less than full automation is for peasants.

Big Brain Time

So I decided to write an VS Code extension. I had already found an one that already did exactly what I wanted. However, I was already too deeply invested in the idea of building an extension, so decided to go ahead anyways.

Honestly, it was much easier than expected. The first page of the official guide is really all you need to build an extension of this scope at least. The scaffolding generated by yeoman does half the job for you. All that was left to do is write some simple code in the extension.ts file, where I modified the activate function to insert the date at the current position of the cursor. As using the shell command no longer made sense, so I used the inbuilt Date class in TypeScript to format the date as required. I also threw in a function that returned the UTC date in addition to the normal date (because why not).

After this, I edited the package.json to add commands and the corresponding keybindings. That was all the programming needed :)

After testing it locally, I published it it on the VS Code marketplace. You can find it here or by searching for clipDate in the extension marketplace inside VS Code.

Final thoughts

The end result was pretty neat I thought. I finally could enter the date with a single key combination (Ctrl+Alt+D) :D. You can find the code here.

While the extension is pretty lame, I learned a little bit about the VS Code API and how to use it to build an extension. I also learned to test and publish the extension. Not a bad use of an empty Monday evening :)

Go to link →