CODEWITHSUNDEEP
javascriptvisual-studio-codevscode-extensions
squidy06
squidy06

Reputation: 201

VS Code snippet to console.log selection beneath current line

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.

Upvotes: 10

Views: 4507

Answers (4)

user23641866
user23641866

Reputation: 1

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

Upvotes: 0

rofrol
rofrol

Reputation: 15236

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

Upvotes: 0

aamarks
aamarks

Reputation: 1018

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.

Upvotes: 0

Alex
Alex

Reputation: 67591

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.

Upvotes: 9

Related Questions