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

Time:04-13

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 ?

CodePudding user response:

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.

CodePudding user response:

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

(sorry embedded code didn't work)

  • Related