Console/Terminal Messages styling done right. Introducing CHALK

Did you face a situation where you wanted to show console messages with different colors ?

Yeah it can be done easily in the browser!

example,On Chrome & Firefox you can add CSS in console.log messages

like this

console.log('%c%s','background: #c7c7c7; color: #fdfd10; font-size: 24px;' , 'This could be you warning message with Gray background');

console.log('%c%s','background: #222; color: #13ff1c; font-size: 24px;' , 'This could be you Success Message with black background');

NICE....

You can wrap it as a function that takes the console message type and apply styling before logging that :-

const logMessage =(message, mType) =>{
  let color    = "black";
  let bgColor  = "white";
  let fontSize = "12px";
     switch (mType) {
         case "warning":  
              color = "yellow";
              bgColor = "Gray";
              fontSize ="30px";
              break;         
         case "info":     
               color = "gray";
               bgColor = "cyan";
               fontSize ="30px";
              break;
         case "error":   
              color = "red";
              bgColor = "blue";
              fontSize ="30px";
              break;
         case "success":  
              color = "green";
              bgColor = "pink";
              fontSize ="30px";
              break;
     }

     console.log(`%c${message}`, `color:${color}; background-color:${bgColor}; font-size:${fontSize};`)
}

logMessage('Test Warning Message:', 'warning')
logMessage('Test Info Message:', 'info')
logMessage('Test Error Message:', 'error')
logMessage('Test Message Success:', 'success')

Another nice way to console complex data is to use the console.table:-
Lets say that you have an object and you wanna check it in the console in an understandable nice way then the console table is the answer

const employee ={name:"Ahmed",age:"36",country:"Jordan"};
console.table(employee); 

OK ok... thats cool and nice but what about the terminal ?

Will Meet CHALK ,
https://www.npmjs.com/package/chalk

A very nice npm package that allow you to style the console messages
it support nested styling.

really easy to use: just import the package and call chalk.neededColor
inside your console.log() statement

const chalk = require('chalk');
console.log(chalk.blue('Hello world!'));

it allows for a lot of stuff

// Combine styled and normal strings

log(chalk.blue('Hello') + ' World' + chalk.red('!'));

// Compose multiple styles using the chainable API

log(chalk.blue.bgRed.bold('Hello world!'));

// Pass in multiple arguments

log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

// Nest styles

log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

Its Also allow you to define your own them , just like what did we do with our previous logMessage function

const chalk = require('chalk');
//define message type and reuse them whenever you want
const warning = chalk.bold.yellow;
const info = chalk.bold.blue;
const error = chalk.bold.red;
const success = chalk.bold.green;

console.log(warning('Warning!'));
console.log(info('Info!'));
console.log(error('Error!'));
console.log(success('Success!'));

here is an example of last message of my terminal today

I hope You Like it