A more helpful console.log snippet for vscode

slog.code-snippets

/*
Why did I make this?
I work in large codebase with lots of errors and warnings in the console that do not actually matter. 
I also don't like filtering my console messages to info only because I will forget to switch it back to verbose. 
I wanted to make my console message standout more visually and a 
quick way to jump back into my code from the browser.

Install
1. shift + command + p
2. Snippets: Configure Snippets
2. Click add new global snippet
3. type whatever you want
4. paste in code above
5. 🎉 You did it 🎉

Additional Items
- Snippet was made for a mac. Vscode adds `~` when using `TM_FILEPATH` for the username 
which doesn't work for full file paths so I added a little regex to remove it. 
Different OS's may need to do some additional changes to the file paths to get them to work. 
If you get it working on Linux/Windows feel free to share what you did so others can profit from your work.
- The css I added was very basic. I added green as a positive reinforcement color. 
- I know the code this snippet generates is ugly. Which is why you would never want something 
like this living in your code long term hence the trailing comment at the end.
Plus when you remove it, you will feel much better deleting this chunky monkey when you no longer need it.
- If you like it great! Enjoy. If you have other ideas of how to make this better leave a comment. Let's make consoles logs
more powerful together.
*/
{
	"clog": {
		"scope": "javascript,typescript, typescriptreact",
		"prefix": "clog",
		"body": ["console.log('%c ${1}$CLIPBOARD:', 'color:#fff;background-color:#2a8712;', $CLIPBOARD, 'vscode://file/Users/username${TM_FILEPATH/[\\~]//}:$TM_LINE_NUMBER'); //temp.console","$0"],
		"description": "console.log from clipboard"
	},
	"slog": {
		"scope": "javascript,typescript, typescriptreact",
		"prefix": "slog",
		"body": ["console.log('%c ${1}: ', 'color:#fff;background-color:#2a8712;', ${1}, 'vscode://file/Users/username${TM_FILEPATH/[\\~]//}:$TM_LINE_NUMBER'); //temp.console","$0"],
		"description": "console.log message and variable at the same time"
	},
	"dlog": {
		"scope": "javascript,typescript, typescriptreact",
		"prefix": "dlog",
		"body": ["console.log('%c ${1}: ', 'color:#fff;background-color:#2a8712;', 'vscode://file/Users/username${TM_FILEPATH/[\\~]//}:$TM_LINE_NUMBER'); //temp.console", "$0"],
		"description": "fancy default console.log"
	}
}