DEV Community

Rajasekar Thangavel
Rajasekar Thangavel

Posted on

Colored console in VS code

Open VS Code
Press Ctrl + Shift + P
Type Preferences: Configure User Snippets
Choose:
javascript.json (for JS / Node)
or typescript.json (for TS)
or New Global Snippets file (recommended if you use both)

{
  "Chrome Colored Console Log With Variable": {
    "prefix": "clogvar",
    "body": [
      "console.log(",
      "  `%c ${1:LOCAL DEV ************} %c ${2:Message}: ${3:variable}`,",
      "  `background: ${4:#2196f3}; color: ${5:white}; padding: 2px 6px; border-radius: 4px; font-weight: bold;`,",
      "  `color: ${6:#2196f3}; font-weight: bold;`",
      ");"
    ],
    "description": "Chrome console log with background, message, and variable"
  }
}
Enter fullscreen mode Exit fullscreen mode

in vscode
clogvar and press in any file

Top comments (0)