How I Wrote My First VSCode Extension to Bring Emacs Keybindings to My Workflow

Why Emacs Keybindings?

I've always preferred Emacs-style editing, especially the way it handles cursor movement and text manipulation. Even though I have switched to using VSCode for most of my development work, I often found myself missing the intuitive keybindings from Emacs.

Initially, I tried manually configuring my keybindings in VSCode, but this became tedious. Every time I reinstalled VSCode or set up a new machine, I had to manually copy over my settings or sync them using vscode settings sync feature. This led me to think: what if I packaged my keybindings into a VSCode extension?

The Idea: Automating My Keybinding Setup

Rather than relying on syncing my settings, I decided to create a self-contained VSCode extension that would automatically apply my preferred Emacs-like shortcuts. This way, I could install it on any machine with a single command, and it would just work.

Building the Extension

Setting Up the Project

To create a VSCode extension, I used the official Yeoman generator:

npx yo code

This guided me through setting up a basic extension. Since my extension was just about keybindings, I didn’t need to write any actual JavaScript or TypeScript code—just modifying the package.json file was enough.

Defining Keybindings

In package.json, I added my custom keybindings under the contributes.keybindings section. Here’s an example of what it looked like:

"contributes": {
  "keybindings": [
    {
      "key": "ctrl+a",
      "command": "cursorHome",
      "when": "editorTextFocus"
    },
    {
      "key": "ctrl+e",
      "command": "cursorEnd",
      "when": "editorTextFocus"
    }
  ]
}

This mapped Ctrl+A to cursorHome (move cursor to the beginning of a line) and Ctrl+E to cursorEnd (move cursor to the end of a line), mimicking Emacs behavior.

Why This Was Worth It

Now, instead of manually managing keybindings across machines, I can just search for my extension on VSCode and install it.

This has saved me time and made my VSCode setup much more portable. Plus, since it’s on the marketplace, other Emacs users can benefit from it too!

What’s Next?

Publishing my first VSCode extension was easier than I expected, despite the initial hurdles. Now, I’m thinking about:

• Exploring more about VSCode extension development and seeing what other customizations I can make.

• Exploring the possibility of building different extensions to further customize my VSCode workflow.

If you're interested in customizing your VSCode experience, I highly recommend trying to write your own extension—it's simpler than you might think!

Get the Extension

You can find my extension on the VSCode Marketplace. Let me know if you find it useful!

https://marketplace.visualstudio.com/items?itemName=bhanuka.bmax-emacs