What is the simpliest way to create custom shortcuts for methods I'm using everydays?
Like dd()
Log::info()
or console.log()
.
Let me explain exactly what behavior I want for my shortcut:
My shortcuts breaks, maybe because of an update, here's the new method to fix my shortcuts, but consider doing the old method explained bellow in the same post before.
Here's mine:
{
"multiCommand.commands": [
// (ctrl+2) Only prints methode, usefull if you want to write something
{
"command": "multiCommand.console.log.1",
"sequence": [
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "console.log(\"-> $0\")"
}
},
]
},
{
"command": "multiCommand.log.info.1",
"sequence": [
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "Log::info(\"-> $0\");"
}
},
]
},
// (ctrl+3) Select your variable before activating the shortcut, it will place the selection in the right spot automatically
{
"command": "multiCommand.console.log.2",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "console.log(\"$CLIPBOARD$0 : \", $CLIPBOARD$0)\n"
}
},
]
},
{
"command": "multiCommand.log.info.2",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "Log::info(\"$CLIPBOARD$0 : \" . $$CLIPBOARD$0);"
}
},
]
},
// (ctrl+4) PHP Log::info(array)
{
"command": "multiCommand.log.info.3",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "Log::info(\"$CLIPBOARD$0 : \" . json_encode($$CLIPBOARD$0));"
}
},
]
},
// (cltr+5) classic dd() with variable in php
{
"command": "multiCommand.dd.2",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "dd($$CLIPBOARD$0);"
}
},
]
},
],
"makefile.configureOnOpen": false
}
Open (windows) C:\Users\YourUsername\AppData\Roaming\Code\User\keybindings.json
and add your shortcuts keybinding with the targetting command name.
Notice that I'm using the option when
, this enables you to have the same shortcut key but binding with a different command depending on the file extension (if you do PHP or JS or ...).
Here's mine:
[
{
"key": "ctrl+2",
"command": "multiCommand.console.log.1",
"when": "editorLangId == javascript || editorLangId == vue"
},
{
"key": "ctrl+2",
"command": "multiCommand.log.info.1",
"when": "editorLangId == php"
},
{
"key": "ctrl+3",
"command": "multiCommand.console.log.2",
"when": "editorLangId == javascript || editorLangId == vue"
},
{
"key": "ctrl+3",
"command": "multiCommand.log.info.2",
"when": "editorLangId == php"
},
{
"key": "ctrl+4",
"command": "multiCommand.console.log.3",
"when": "editorLangId == javascript || editorLangId == vue"
},
{
"key": "ctrl+4",
"command": "multiCommand.log.info.3",
"when": "editorLangId == php"
},
{
"key": "ctrl+5",
"command": "multiCommand.dd.2",
"when": "editorLangId == php"
},
So now everytime I press ctrl + 2
I insert a Log::info()
for PHP files or console.log()
for Javascript and Vue. This really helps you to reduce the number of shortcut you have to remember!
PS: I think the old file I have C:\Users\YourUsername\AppData\Roaming\Code\User\settings.json
is not used anymore.
I came up with this solution, thanks to @Mark in comments, related to this thread : How can I insert a snippet on a new line with vscode?
Edit in settings.json
console.log()
) "multiCommand.commands": [
{
"command": "multiCommand.console.log",
"sequence": [
"editor.action.clipboardCopyAction",
"editor.action.insertLineAfter",
{
"command": "editor.action.insertSnippet",
"args": {
"snippet": "console.log(\"$CLIPBOARD: \", $$CLIPBOARD)\n$0"
}
},
]
},
Then in VSCode go to Preferences -> Keyboard Shortcuts, open keybindings.json
Add the path binding command
// (new version 2024)
{
"key": "ctrl+1",
"command": "multiCommand.console.log"
}
// (old version)
{
"key": "ctrl+1",
"command": "extension.multiCommand.execute",
"args": { "command": "multiCommand.console.log" }
}