javascriptphpvisual-studio-codeshortcutcode-snippets

VS Code how to create custom shortcut / snippet?


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

Solution

  • 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.

    1. (Precondition) Install Multi-command VSCode extension.
    2. 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
            }
    
    
    1. 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 enter image description here
    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"
                    }
                    },
                ]
            },
    
    1. Then in VSCode go to Preferences -> Keyboard Shortcuts, open keybindings.json keybindings.json location

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