Better console logs in JS

Why make this tool?

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.

javascript

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

Features

  1. clog will make a console.log from a copied variable/function in your current clipboard. Fills out message and variable automatically.
  2. slog will make a console.log with a curosor in both the message and variable name so they are created at the same time.
  3. dlog will make a console log with a cursor in the message automatically
  4. 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.
  5. The css I added was very basic. I added green as a positive reinforcement color.
  6. 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.

How To Use It

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