Différencier des messages informatifs, de chargements et d'erreurs peut être utile dans des projets JavaScript lorsque l'on utilise la console avec la commande console.log().
Vous verrez ci-dessous toutes les changements de style d'écriture possibles et comment les appliquer.
Comment ça marche ?
Pour changer le style de notre texte nous allons utiliser les séquences d'échappement ANSI.
Avant notre texte on spécifiera une séquence comme \x1b[36m où 36 correspond à la couleur cyan.
De plus, après le texte on peut ajouter la séquence \x1b[0m pour remettre la couleur par défaut.
Voici un exemple possible de code :
console.log('\x1b[36m%s\x1b[0m', 'Hello World');
console.log('\x1b[36mThis is cyan, \x1b[4mbut this is underlined\x1b[0m');
Quand vous changez le style de tout un texte vous pouvez faire comme le premier console.log(), séparer les séquences et le texte : le %s est l'endroit où le texte sera injecté.
Dans le deuxième console.log() vous pouvez voir un exemple avec deux styles dans une seule ligne.
Références des couleurs
1. Styles
Certains styles peuvent ne pas fonctionner en fonction d'où vous l'utilisez.
Reset : "\x1b[0m"
Bold : "\x1b[1m"
Dim : "\x1b[2m"
Italic : "\x1b[3m"
Underline : "\x1b[4m"
Blink : "\x1b[5m"
Reverse : "\x1b[7m"
Hide : "\x1b[8m"
Strike : "\x1b[9m"
2. Couleurs de police
Black : "\x1b[30m"
Red : "\x1b[31m"
Green : "\x1b[32m"
Yellow : "\x1b[33m"
Blue : "\x1b[34m"
Magenta : "\x1b[35m"
Cyan : "\x1b[36m"
White : "\x1b[37m"
Gray : "\x1b[90m"
3. Couleurs de fonds
Black Bg : "\x1b[40m"
Red Bg : "\x1b[41m"
Green Bg : "\x1b[42m"
Yellow Bg : "\x1b[43m"
Blue Bg : "\x1b[44m"
Magenta Bg : "\x1b[45m"
Cyan Bg : "\x1b[46m"
White Bg : "\x1b[47m"
Gray Bg : "\x1b[100m"
Ca y est, vous savez maintenant changer vos logs, il est temps de vous faire plaisir.
Si vous souhaitez, vous pouvez retrouvez d'autres astuces ici ! 😜