Les extensions à avoir pour Atom, Sublime Text et Visual Studio Code

Dans cet article, vous trouverez les extensions à installer avec les editeurs de texte comme Atom, Sublime Text ou Visual Studio Code pour le développement.

Ces extensions vous permettront d'être plus productif donc n'hésitez pas à les installer et les essayer.

Emmet

L'extension la plus importante. Emmet va vous permettre de créer plus rapidement du code HTML ou CSS grâce à des abréviations.

Par exemple, vous voulez trois paragraphes, vous pouvez écrire p*3 et appuyer sur tab.

Si vous voulez un bloc div avec la classe toast vous pouvez écrire .toast et appuyer sur tab.

Vous pouvez consulter la cheat sheet d'Emmet pour obtenir plus d'abréviations de ce genre.

Live server & preview

C'est la meilleure manière de voir rapidement le rendu de l'application web que vous développez. Juste en sauvegardant votre fichier vous aurez le rendu dans votre / vos navigateurs.

Vous pouvez les télécharger dans les gestionnaires de paquets des éditeurs de texte.

Atom : Atom Live Server

Sublime Text : Browser Sync

VS Code : Live Server

Color Picker

Cette extension est très pratique pour trouver une couleur rapidement.

VS Code n'a pas besoin d'une extension puisque l'outil est déjà inclus.

Atom : Color Picker

Sublime Text : ColorPicker

Color Highlighter

On reste dans les couleurs ! Ce package permet de visualiser une couleur quand vous écrivez un code couleur.

Il existe deux color highlighters pour VS Code. A vous de vous faire une idée !

Atom : Pigments

Sublime Text : Color Highlighter

VS Code : Colorize

VS Code : Color Highlight

Linter

Cette extension permet de voir les erreurs de syntaxe dans un script.

Vous aurez besoin de télécharger un deuxième paquet selon les languages que vous utilisez.

Pour JavaScript vous pouvez utiliser ESLint.

Pour les autres langages vous pouvez rechercher <LE NOM DU LANGUAGE> linter.

Atom : ESLint

Sublime Text : ESLint

VS Code : ESLint