Mes nouvelles extensions préférées pour Brackets

Mes nouvelles extensions préférées pour Brackets

Il y a un an, je vous faisais part de ma liste d’extensions préférées pour Brackets. Depuis elle a eu le temps d’évoluer. Voici une mise à jour.

Déjà un an !

En un an, beaucoup de chose ont évoluées, notamment le fait que j’utilise Brackets comme éditeur pour mes projets de développement, front end et back end.
En clair : HTML/JavaScript/CSS ou PHP. Ou NodeJS. Ou Python. Ou Pascal. Ou pas…

Enfin bref, voilà la liste.

Front end et Web applications

AngularJS Code Hints

Cette extension est simple : elle ajoute la complétion du code pour AngularJS : elle propose des méthodes et des propriétés quand vous saisissez des noms d’objet, et affiche le nom et le type des paramètres des fonctions et des méthodes en info-bulle.

Autoprefixer

En éditant un fichier CSS (ou LESS ou SCSS), Autoprefixer préfixe automatiquement les propriétés qui le nécessitent, en suivant les recommandations de Can I Use, automatiquement au moment de la sauvegarde.

Ainsi, les vendor prefix (-moz-* ou -webkit-* par exemple) obsolètes sont retirés, et ceux qui sont nécessaires sont ajoutés. En clair : plus de prise de tête !

ColorHints

Encore une fonctionnalité qui concerne la complétion de code, CSS cette fois.

Cette extension permet de suggérer les couleurs déjà utilisées dans un document CSS, LESS ou SCSS dans la liste déroulante, quand vous commencez à saisir une couleur.

Emmet

Je vous avez déjà parlé de Emmet, qui simplifie l’écriture de vos pages HTML et feuilles de styles.

Par exemple, saisissez m0 puis pressez tab, Emmet ajoute margin: 0; ou encore div#header puis tab, il ajoute <div id="header"></div>.

JSHint

JSHint affiche les erreurs JavaScript directement dans Brackets, à chaque sauvegarde.

Ainsi, plus besoin de vérifier le résultat dans le navigateur pour s’apercevoir qu’un point-virgule ou qu’une accolade manque, ou même qu’un nom de variable est mal orthographié.

Cette extension me fait gagner beaucoup de temps.

Notez que JSHint doit être activée en ajoutant ces paramètres dans le fichier de configuration de Brackets (accessible par le menu Debug) :

"language": {
	"javascript": {
		"linting.prefer": "JSHint",
		"linting.usePreferredOnly": true
	}
}

LESS AutoCompile

J’avais déjà parlé de cette extension, en l’appliquant au développement de thèmes pour WordPress, LESS AutoCompile permet de générer les fichiers CSS à chaque modification/sauvegarde de fichier LESS.

QuickDocsJS

Cette extension ajoute l’aide rapide pour JavaScript : positionnez le curseur sur un mot-clef comme var, un objet comme Array ou une méthode comme "ma chaine".replace(), pressez ctrl+K (ou clic droit, Aide rapide), et une aide apparaît directement dans l’éditeur, pour continuer à travailler avec l’aide sous les yeux.

En plus elle supporte jQuery et NodeJS.

PHP

PHPLint for Brackets

La version pour PHP de JSHint : les erreurs de syntaxe sont affichées automatiquement dans l’éditeur à chaque sauvegarde.

QuickDocsPHP

Encore une fois, il s’agit de la version PHP d’une autre extension : l’aide rapide intégrée à l’éditeur.

WordHints

WordHints ajoute la complétion automatique pour PHP (et pour Python aussi).

Divers

Brackets bookmark

Cette extension permet de marquer les lignes avec ctrl+F4, puis d’y accéder rapidement avec F4 (ou shift+F4). Mais pas alt+F4 !

Brackets Git

Alors celle-ci est presque obligatoire, surtout si vous utilisez Git pour versionner vos sources.

Brackets Git permet bien sûr d’initialiser, cloner, puller, commiter, pusher, … mais il permet de repérer en un coup d’oeil quels fichiers ont été ajoutés ou modifiés dans l’explorateur de fichiers de Brackets, ou encore quelles lignes ont subi des changements avec les couleurs dans la gouttière de l’éditeur.

Et un clic sur cette couleur, et il est possible de voir la version précédente et de la récupérer.

Enfin, il propose de voir rapidement l’historique des commits ou du fichier en cours, ainsi que des flèches pour passer d’une modification à l’autre dans le fichier ouvert.

En bonus, il est même possible de configurer sa console préférée (cmder par exemple) pour la démarrer directement à la racine du projet, avec une icône dans la barre d’outils latérale.
Ce qui relègue au placard une autre extension que j’utilisais, et qui ne fait que ça : Open in Cmder.

Indentator

Comme son nom l’indique, cette extension indente tout le fichier en cours, avec ctrl+alt+I.

Accroc au ctrl+S pour sauvegarder fréquemment, j’ai changé mon habitude pour la séquence : ctrl+alt+I puis ctrl+S.

A éviter sur les fichiers Python !

Markdown Preview

Cette extension ajoute un bouton dans la barre d’outils latérale seulement quand un fichier Markdown est ouvert, qui permet d’afficher un nouveau panneau : le document en cours d’édition rendu en HTML.

Quick Search

Enfin Quick Search surligne toutes les occurrences du mot sélectionné, comme le fait Notepad++.

En plus les occurrences sont repérées dans la barre de défilement.

Le mot de la fin

Cette liste n’est pas exhaustive, j’utilise quelques autres extensions, j’en essaie d’autres comme Brackets Outline List mais il lui manque encore quelques fonctionnalités pour que je l’utilise vraiment.

En clair : peut-être à l’année prochaine, si ma liste évolue encore beaucoup.

L'illustration de cet article est une image sous licence CC BY-SA 2.0 FR par P.poschadel

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.