VS Code creating custom shortcuts for common methods with line break (e.g. dd($var) or console.log($var))

Question

First, I have a shortcut on VSCode to Wrap a text with the thing I'm typing.

<div>
    Hello World
</div>

If I select "World" and use the Emmet: Wrap with Abbreviation shortcut and type span I can make this:

<div>
    Hello <span>World</span>
</div>

But here's the thing : I know we can create custom wrapping that are not the same on each side of the word we selected (source: VS Code : create custom snippet/shortcut)

{
  "key": "ctrl+i",
  "command": "editor.action.insertSnippet",
  "args": {
    "snippet": "{something}$TM_SELECTED_TEXT{/some other thing}"
  },
  "when": "editorTextFocus && editorHasSelection"
}

What I would like is to select my variable, then use the shortcut, and it will print what I need UNDER the selected line, and whitout breaking the current line where I come from.

For this example, I'm selecting the var $user_id, press shortcut, and then boom it will add the second line.

$user_id = User::where('user_name', $user_name)->get()->first()->id;
dd($user_id);

Here's a start:

{
  "key": "ctrl+alt+c",
  "command": "editor.action.insertSnippet",
  "args": {
    "snippet": "   ==> here we need to find how to line break without spliting the code and then: <==
                             {console.log(}$TM_SELECTED_TEXT{)}"
  },
  "when": "editorTextFocus && editorHasSelection"
}

Do you think it is possible ? Maybe the solution is to use Keyboard Macro separately from VSCode ?

Answer 1

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 file of the extension (settings.json)

3. Implement your code (here's mine with console.log() and dd() )

    "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"
                }
                },
            ]
        },
   
   
        {
            "command": "multiCommand.dd",
   
            "sequence": [
              "editor.action.clipboardCopyAction",
              "editor.action.insertLineAfter",
              {
                "command": "editor.action.insertSnippet",
                "args": {
                  "snippet": "dd($$CLIPBOARD);"
                }
              },
            ]
        }
   

4. Implement the shortcut in your VSCode settings (keybindings.json)

   {
       "key": "ctrl+1",
       "command": "extension.multiCommand.execute",
       "args": { "command": "multiCommand.console.log" }
   },
   {
       "key": "ctrl+2",
       "command": "extension.multiCommand.execute",
       "args": { "command": "multiCommand.dd" }
   }
   

Answer 2

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.