Hossam Mourad

How I remapped Mac's Eject button to format and lint code in VSCode

May 20, 2020


I have something exciting today, at least for me!

I have been using Apple’s Magic Keyboard for about 5 years now, I have tried to switch to mechanical keyboards but I couldn’t be as fast as I can get on Apple’s keyboard, I think I’m one of those who prefer low profile/short travel type of keyboards. What crossed my mind minutes before writing this post is that I never use the Eject key on the keyboard, like never in 5 years have I ever used it, there are some shortcuts built-in with it but I have never used them so I have decided to remap this key to do 3 commands in VSCode:

  1. Format code
  2. Automatically lint code using ESLint
  3. Copy the relative path of the current file

These are the most commands I use daily and I’ve been using a separate shortcut for each one of them but now I only use the Eject button to do all of them. Here is how I did it.

You need to install:

Steps:

1- Use KarabinerElements to remap the Eject key to be any other key that usually you don’t use, this is what I’ve remapped it to:

screenshot

I guess it is important to remap to a key that you don’t use so it doesn’t conflict with the actual usage of that key

2- Go to the settings.json file of VSCode and add the following to it:

"macros": {
  "formatCodeUsingEject": [
    "editor.action.formatDocument",
    {
      "command": "editor.action.codeAction",
      "args": { "kind": "source.fixAll.eslint", "apply": "first" }
    }
  ]
}

Basically here you’re using the macros extension to define a new macro called formatCodeUsingEject that will execute two commands, the first is running the format document command and the second is ESLint fixAll command

3- Open the keybindings.json file of VSCode and add the following to it:

{
  "key": "[IntlBackslash]",
  "command": "macros.formatCodeUsingEject"
},

Here you’re telling VSCode to run the macro that we created when the remapped Eject key (which is IntlBackslash now) is pressed

4- I also added the following key binding so I can copy the relative path of a file when Command+Eject is pressed:

{
  "key": "cmd+[IntlBackslash]",
  "command": "copyRelativeFilePath"
}

Why doing all of this?

Command Before After
Format code press Command+Shift+F press Eject
Fix ESLint errors press Command+P then I type eslint fix press Eject again
Copy the relative path press Command+P and then type copy relative Command+Eject

and because I love using keyboard shortcuts for everything specially when I’m inside VSCode.


👨‍💻 If you think there is a mistake in this post or you want to discuss, you can follow me on Twitter or send me an email. Have a nice day!

Written by Hossam Mourad.
A software developer specializing in front-end development with a passion for software development as a craftsmanship not only writing working code.
Resume / Email / LinkedIn / GitHub / Twitter