Skip to content

Instantly share code, notes, and snippets.

@aidev13
Last active July 19, 2024 14:06
Show Gist options
  • Save aidev13/8279ae78924da02797eb1f64c28de40a to your computer and use it in GitHub Desktop.
Save aidev13/8279ae78924da02797eb1f64c28de40a to your computer and use it in GitHub Desktop.
console.log() shortcut in VS code.

Hello Everyone!

Typing console.log() can feel like an extra step and can make you feel like you're tripping over code.

Lets put an end to this with these short, easy steps:

In VScode, go to file > preferences > Configure User Snippets , select 'New Global Snippets File' and give your new snippet a file name, something like "console-log-snippet", hit enter and you should see the following:

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

If you see this, you have done all the right steps! If not, retrace those steps.

Enter the following snippet below the comments, but keep it inside the } bracket. You can delete the comments if you want, I just keep them for reference.

   	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "cl",
		"body": [
			"console.log();"
		],
		"description": "Log output to console"
	}

Notice the scope is where you scope which language you are using, in this case JavaScript.

All you have to do from here on out is edit the prefix to your liking - the prefix is what you will type into the editor then hit tab to get the snippet.

You can also edit the body to fit your needs - the body is what prints on the screen.

I personally have my body set to console.log($0) , this places the cursor inside the () by using $0 .

That's it!

Happy Coding!

@Programming-Idealism
Copy link

Thank you very much for this detailed and helpful guide! Much obliged!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment