VS Code how to create custom shortcut / snippet?

Question

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:

1. I want to select my variable
2. Press keyboard shorcut
3. Break a line
4. Passt the code I want with the selected variable

Answer 1

Edit 2024:

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.

0. (Precondition) Install Multi-command VSCode extension.
1. Create "/.vscode/settings.json" at the root of your project. It will contain your commands.

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
        }

2. Now you have to bind those commands to VSCode shortcuts.

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.

Old Method

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?

1. Install Multi-command VSCode extension
2. Open the settings of the extension and click on Edit in settings.json
3. Implement your shortcut code (e.g 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"
                }
                },
            ]
        },

4. Then in VSCode go to Preferences -> Keyboard Shortcuts, open keybindings.json

5. 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" }
}

Answer 2

In order to ease file manipulation here is the file location path on Linux settings.json and keybindings.json are in /home/Username/.config/Code/User

I've used "ctrl+alt+p" for print() and "ctrl+alt+l" for LOG.debug() with LOG declared as LOG = logging.getLogger(__name__) as described here

settings.json content

{
    "workbench.colorTheme": "Visual Studio Light",
    "git.enableSmartCommit": true,
    "git.autofetch": true,
    "git.confirmSync": false,
    "diffEditor.ignoreTrimWhitespace": true,
    "files.trimTrailingWhitespace": true,
    "editor.minimap.enabled": false,
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "terminal.integrated.defaultProfile.osx": "bash",
    "terminal.integrated.profiles.osx": {
      "bash": {
        "path": "bash",
        "args": ["--login"]
      }
    },
    "git.openRepositoryInParentFolders": "never",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.tree.enableStickyScroll": false,
    "editor.stickyScroll.scrollWithEditor": false,
    "editor.stickyScroll.enabled": false,
    "diffEditor.hideUnchangedRegions.enabled": true,
    "multiCommand.commands": [
      {
        "command": "multiCommand.printVariable",

        "sequence": [
          "editor.action.clipboardCopyAction",
          "editor.action.insertLineAfter",
          {
            "command": "type",
            "args": {
              "text": "print(f'"
            }
          },
          "editor.action.clipboardPasteAction",
          {
            "command": "type",
            "args": {
              "text": ": {"
            }
          },
          "editor.action.clipboardPasteAction",
          {
            "command": "type",
            "args": {
              "text": "}')"
            }
          },
        ]
      },
      {
        "command": "multiCommand.logVariable",

        "sequence": [
          "editor.action.clipboardCopyAction",
          "editor.action.insertLineAfter",
          {
            "command": "type",
            "args": {
              "text": "LOG.debug(f'"
            }
          },
          "editor.action.clipboardPasteAction",
          {
            "command": "type",
            "args": {
              "text": ": {"
            }
          },
          "editor.action.clipboardPasteAction",
          {
            "command": "type",
            "args": {
              "text": "}')"
            }
          },
        ]
      }
    ]
}

keybindings.json content

// Place your key bindings in this file to override the defaults
[
    {
        "key": "ctrl+alt+p",
        "command": "multiCommand.printVariable",
    },
    {
        "key": "ctrl+alt+l",
        "command": "multiCommand.logVariable",
    }
]

Answer 3

If I'm understanding your question correctly, you can probably just use $0 to show where your cursor will end and use \n to insert a line break.

However, I'm not entirely sure if this works when creating a snippet from the Keyboard Shortcut file, but it works from the snippet file so I'm assuming it'll work here.