VS Code snippet to console.log selection beneath current line

Question

This is what I'd like to achieve (t is selected in editor):

Before snippet:

var t = 'Foobar';

After snippet:

var t = 'Foobar';
console.log('t', t);

How can I do that? Here is what I tried to do:

"log_selection": {
    "prefix": "cls",
    "body": [
        "console.log('$TM_SELECTED_TEXT', $TM_SELECTED_TEXT);"
    ],
    "description": "Logs selected text"
}

But this just replace selected text with snippet. I think that I could use TM_CURRENT_LINE here but I have no idea what to do with remaining text in the line.

Do you have any idea for this? Maybe it's impossible with snippet? If so, how can I achieve desired effect?

Thank you.

Bonds

Answer 1

Extension macros (executing multiple commands in 1 keybinding).

settings.json:

"macros": {
    "snippetWithDescription": [
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
            "command": "editor.action.insertSnippet",
                "when": "editorTextFocus",
                "args": {
                    "snippet": "console.log('$CLIPBOARD', $CLIPBOARD)$0"
                }
        }
    ]
}

keybindings.json:

{
    "key": "ctrl+shift+;",
    "command": "macros.snippetWithDescription"
}

P.S. you can even omit the selection part if you add another command at the beginning of snippetWithDescription: "editor.action.addSelectionToNextFindMatch",. Just place cursor beside the word and hit hotkey.

Gizmo

Thank you very much Alex! :) – Bonds

It may have been added after this answer but now you can simplify the macro ala my answer here: #53599750 If you use $CLIPBOARD in the snippet you don't need the clipboardPaste and cursorHomeSelect commands. – Irreverence

Answer 2

I came to this question looking for a solution other than installing a macro extension. Yours can be done with a snippet though as long as the cursor is at the end of your var declaration line. The snippet would use regex:

"log_selection": {
    "prefix": "cls",
    "body": [
        "",
        "console.log('${TM_CURRENT_LINE/var (.+?) =.*$/$1', $1/});"
    ],
    "description": "Logs selected text"
}

The capturing group (.+?) holds your variable name and is placed in $1. I've tested it (and a good thing, because it took a lot of edits to get a working regex). You'd probably want to set up a key binding in your settings to trigger the snippet (but it also works typing the snippet prefix):

    "key": "alt+c alt+l",   // some key combo
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && !editorHasSelection",
    "args": {
        "langId": "js",   // ?? optional?
        "name": "log_selection"  // your snippet name
    }

Unfortunately, in my case I'm trying to alter the current line so it seems I may need a macro to select the line so that it is replaced.

Endurable

Does not work for me. For editor it inserts new line with console.log(' editor); – Monkshood

Answer 3

this worked for me:

"macros": {
        "logCurrentVariable": [
          "editor.action.addSelectionToNextFindMatch",
          "problems.action.copy",
          "editor.action.clipboardCopyAction",
          {
            "command": "editor.action.insertSnippet",
                "when": "editorTextFocus",
                "args": {
                    "snippet": "console.log('$CLIPBOARD', $CLIPBOARD)$0"
                }
        }
    ]
},

from https://medium.com/@copperfox777/how-to-console-log-variable-under-the-cursor-in-visual-studio-code-ba25feadb00a

Monkshood

That sequence of commands, including "problems.action.copy", makes no sense for the problem. And there is no command for getting to the next line? The macro just inserts in the middle of the line not below it. – Irreverence

I should add that this worked me when it comes to clipboard. You can modify it for next line. – Monkshood

Answer 4

Building off of Alex's excellent answer I was able to get the job done without using a VS Code extension by adding the following to keybindings.json:

{
    "key": "ctrl+shift+l",
    "command": "runCommands",
    "when": "editorTextFocus",
    "args": {
        "commands": [
            "editor.action.clipboardCopyAction",
            "editor.action.insertLineAfter",
            {
                "command": "editor.action.insertSnippet",
                "when": "editorTextFocus",
                "args": {
                    "snippet": "console.log(\"$CLIPBOARD\", $CLIPBOARD)$0"
                }
            }
        ]
    }
}

Paulettapaulette