Better JS console.log's VScode 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. Might be a me issue ?? I wanted to make my console message standout more visually in devtools and provide a quick way to jump back into my code from the browser.

How To Use It

In VScode

1. shift + command + p
2. Snippets: Configure Snippets
3. Click add new global snippet
4. Type whatever you want
5. Paste in code above
6. 🎉 Save, and you did it 🎉
7. Now in your ts/js file type clog, slog, dlog and feel the power 💪

Features

• clog will make a console.log from a copied variable/function in your current clipboard. Fills out message and variable automatically.
• slog will make a console.log with a curosor in both the message and variable name so they are created at the same time.
• dlog will make a console log with a cursor in the message automatically
• Each feature creates a clickable link in devtools to jump back into VScode from the console. 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.
• The code this snippet generates is thick and ugly, which helps you spot it when getting ready for a code review. Additiionally I added //temp.console to the end so you can do a find in VScode and see all of your consoles quickly for easy cleanup.