Are you a console.log addict? Add this snippet to make it faster, easier, and clearer to use.
Tags: vscode, beginners, javascript
Published: 2021-06-21 19:04:53

### 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 

```javascript
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:

```javascript
console.log(`foo = `, foo)
```

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

```javascript
console.log(`myVar = `, myVar)
```

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

```javascript
myVar = 2
```
...instead of just

```javascript
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:

```javascript
"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:

```javascript
{
	// 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!