Are you a console.log addict? Add this snippet to make it faster, easier, and clearer to use.

Our first debugging friend, the humble console.log

One of the first things you learn when programming javascript is how to print a value to the output window. Let's say you declare a variable called myVar, and your code has a statement like myVar = 1+1. When you want to make sure that your code is doing what you expect-- 1 + 1 = 2, so myVar should equal 2--you write console.log(myVar). When the interpreter reaches that line of code, you will miraculously see 2 appear in the output window.

...but it doesn't scale

The problem is, once you are peppering your code with console.log statements, it's hard to remember what all the values appearing in the output window refer to. The solution is to write a more verbose console.log statement, like

console.log(`myVar = $myVar`)

but that can be cumbersome after a while.

My solution

My solution was to create a snippet in VSCode so that when I type a shortcut--mine is consolel (like typing console.log without the period--I get the following statement:

console.log(`foo = `, foo)

I then double-click foo, type ⌘d to select the other foo, then type in myVar to replace both foos with myVar. The result is the following:

console.log(`myVar = `, myVar)

...and when you run the code, what you see in the output window is:

myVar = 2

...instead of just

2

Isn't that nice?

Here's how to create a snippet to quickly and easily add descriptive console.log statements

1. In VSCode, at the top menu, select Code > Preferences > User Snippets
2. The Command Palette will open. Select "New Global Snippets File" and type in the name you want to use. Mine was consolelog, so it created a file titled consolelog.code-snippets
3. Your new code-snippet file will have a bunch of commented-out text inside a set of curly braces explaining how to use it. At the bottom of the text, but inside the last curly brace, add the following code:

"consolelog":{
    "prefix": ["consolelog"],
    "body": ["console.log(`foo = `, foo)"],
    "description": ["Shortcut for a descriptive console.log statement"]

    },

When you're finished, the code should look like this:

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "consolelog":{
        "prefix": ["consolelog"],
        "body": ["console.log(`foo = `, foo)"],
                "description": ["Shortcut for a descriptive console.log statement"]

Here's what's going on in the code. As it says in the commented-out text, "Each snippet is defined under a snippet name and has a scope, prefix, body and description." In this case, they are:

• Snippet Name: consolelog
• Scope: (I skipped scope to make this global)
• Prefix: The shortcut you choose to summon this snippet, I chose consolelog
• Body: The text you want the snippet to create, wrapped in brackets and quotes
• Description: Whatever you think best explains your snippet. I wrote "Shortcut for a descriptive console.log statement"

I hope this helps!

Comments

[Vitor Acacio]

Awesome tip, Matty! Just implemented it here.

To add to it: if you replace both "foo" with "$1", when the code appears, your cursor is already in both places, just waiting for you to type the variable name! That way you skip the double-click and the cmd+d