VS 代码片段到当前行下方的 console.log 选择

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.

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

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

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.

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