A VSCode snippet for logging a variable out with its name prefixed.

example.md

📦 How To Install

1. Bring up the Command Palette with ⌘+⇧+P
2. Type "Configure User Snippets".
3. Select "New Global Snippets file".
4. Name it whatever you want.
5. Paste in the contents of the .code-snippets file in this gist.

📑 How To Use

1. Bring up the Command Palette with ⌘+⇧+P
2. Type "Insert Snippet".
3. Type "logvar" (or whatever you named the snippet you created), and select it.

Ex:

console.log(`someVar:`, someVar);

logVar.code-snippets

{
	"Log variable": {
		"scope": "javascript, typescript, javascriptreact, typescriptreact, vue",
		"prefix": "logvar",
		"description": "Log a variable with its name to the console.",
		"body": [
			"console.log(`$1:`, $1);",
			"$2"
		]
	}
}

Is it possible to escape backticks in the thing to be logged?

Hey @imedadel — I'm not exactly sure what you're asking! I put backticks in there so it puts the name of the variable in a string at first, and then repeats it to log its value. I think you could use \" to use quotation marks in there, etc.

Sorry for not being clear @xdesro, I was in a hurry ^^
Suppose I wanna log this code:

object[`prop`]

In this case, I would like the console.log to be console.log(`object[\`prop\`]`: object[`prop`])

No worries! I think you can totally escape them — or if you don't want to deal with the hassle of escaping, you can convert the backticks to quotes in the snippet:

"body": [
  "console.log(\"$1:\", $1);",
  "$2"
]