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:
- Format code
- Automatically lint code using ESLint
- 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:
- Karabiner-Elements
- The macros VSCode extension
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:
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.