How to never write console.log again

If you are a web developer and have worked with Javascript, you probably wrote console.log about a few hundred thousand times now (and I’m not exaggerating!)

What If I tell you there’s a trick for that so you’ll never have to write that again? That’s right, through the magic of snippets and keyboard binding, I will reveal to you how to do that in both Sublime Text and Visual Studio Code so you can increase your productivity by five fold!

Sublime

To do that in Sublime Text, go to Menu -> Preferences -> Key Bindings – User and then add the following to your user key definitions:

{ 
    "keys": ["super+k"],
    "command": "insert_snippet",
    "args": {
        "contents": "console.log(${1:}$SELECTION);${0}"
    }
}

Now you can wrap anything you highlighted to the console log statement by pressing Command + k, you can also insert an empty console.log if you don’t highlight anything. (credits to this gist)

Visual Studio Code

In order to do this in VSC, you need an extension, I suggest you use the Console Wrapper plugin, Simply highlight something and press CTRL + q and it will log for you. (If you don’t highlight anything, and press CTRL + q, then it will put whatever is on your clipboard as the arguments) This plugin does it a bit further, by making a string of the item you want to log concatenated with its value and indent it by a tabspace, so for example, if you highlight the word “myVariable“, the console output would be:

The only minor annoyance I have with it is that it’s dangerously close to the Command + q combo, which is QUIT, so I wish there’s a way to customize the key combo, but so far I enjoy this extension.

Edit: Turns out you can change the keyboard shortcut of your extensions if you go to Preferences -> Keyboard Shortcuts and change the preference for Console Wrapper:

    { "key": "cmd+k",          "command": "extension.consoleWrapper",
                                     "when": "editorTextFocus" }

With these tools at your disposal, you’ll never have to type Console.log again!

If you enjoyed this tutorial, make sure to subscribe to our Youtube Channel and follow us on Twitter @pentacodevids for latest updates!

Related Posts

Webdev News

Loading...
    More News