Comme vous le savez peut être, je suis un fan de l’extension Web Essentials dans Visual Studio.

Je vais vous présenter ici quelques fonctionnalités méconnues de cette indispensable extension.

Ajout d’une image par copier coller

Prenons un exemple classique concernant la gestion d’image. Vous trouvez une image sur le net comme par exemple une icône (libre de droit bien entendu) et vous voulez l’intégrer dans votre projet. Il vous faut télécharger l’image, la copier dans votre arborescence projet, l’intégrer dans votre projet web et inclure la balise img dans votre code HTML.

WE vous simplifie la tache. Copier l’image dans le presse papier et coller celle-ci dans votre code HTML. l’extension va reconnaitre que vous tentez de coller une image et vous ouvre une fenêtre vous permettant de sélectionner le dossier où enregistrer l’image. Une fois cela fait, la balise img est générer dans votre code.

Gestion de Sprites

L’utilisation des sprites est une des bonnes pratiques qui permettent un gain en terme de chargement de votre site. Le principe est de générer un fichier image qui contient plusieurs images. Chaque partie du fichier correspondant à une image sera affichée via CSS. Cela permet de ne télécharger qu’un fichier au lieu d’une multitude de fichier. Voyons comment Web Essential permet de gérer ces sprites.

Sélectionner les images à utiliser pour la génération du sprite puis faire clic droit et cliquer sur Web Essentials > create image sprite….

Donner un nom à votre sprite, sélectionner l’emplacement du sprite et cliquer sur OK. Le sprite est généré et inclus une images au format sprite qui est un fichier xml qui décrit votre sprites (liste des fichiers, orientation, format, ….), un fichier image du format spécifié (png par défaut) et du code css, less, scss et map qu’il ne vous reste plus qu’a utiliser !!!

Aperçu d’image

Web Essentials vous permet de visualiser un aperçu de vos images directement depuis l’éditeur de code (avec affichage de la taille de l’image)

ou dans l’explorateur de solution

Traitement d’image

L’extension permet également de faire des actions sur vos images :

• Encoder l’image en base64 : l’attribut src contiendra votre image en base64. Cela évite d’effectuer une requête serveur.

• Insertion des attributs width et height
• Optimisation de la taille de l’image (disponiblé également au clic droit sur l’image dans l’explorateur de solution)

Ajout/Suppression de parent

Sélectionner du code html qui vous souhaitez englober dans un tag. Cliquer dans le nenu Web Essentials > Surround with tag… ou via le raccourci clavier Shift+Alt+W. Votre code est maintenant inclut dans une balise div qu’il vous est très simple de modifier.

De la même façon, vous pouvez supprimer un nœud parent et garder les éléments enfants. Pour cela, au survol d’un nœud, un menu apparait et il faut cliquer sur Remove and Keep children.

JSCS

JSCS (JavaScript Style Checker) est un outil permettant de valider le style de votre code JavaScript et il est un bon complément à JsHint. Les erreurs sont visibles dans la fenêtre des erreurs. WebEssentials inclut la validation via JSCS. Vous pouvez le configurer via un fichier .jscs.json dans votre projet ou de manière globale via Web Essentials > Edit Global JSCS Settings

Voici un exemple ci dessous :

Extraire du JavaScript vers un fichier

Mettre du code JavaScript dans du code HTML n’est pas une bonne pratique. Web Essentials simplifie l’externalisation vers un fichier .js. Il suffit de cliquer sur le menu de la balise script et cliquer sur Extract To File.

Browser Link

Browser Link est une nouveauté apparue dans Visual Studio 2013 qui permet la communication entre Visual Studio et vos navigateurs. Cela permet par exemple de recharger les navigateurs automatiquement suite à une modification d’un fichier.

Web Essentials permet de rajouter des fonctionnalités à Browser Link comme :

• Inpect mode : Sélectionner un élément dans votre code HTML et Visual Studio vous affichera le code qui a générer ce code.
• Enregistrer les modifications effectués depuis les consoles web des navigateurs dans Visual Studio (ne fonctionne que pour les CSS pour le moment).
• Validation de votre code
• Trouvez les règles CSS non utilisées
• …

Pour cela, il rajouter une barre de menu dans votre site afin d’accéder à ces différentes fonctionnalités

CSS

Web Essentials apporte un nombre impressionnnant d’améliorations concernant CSS. En voici quelques unes.

Ajout des préfixes vendeurs manquant

Affichage de la compatibilité des propriétés

Indication des préfixes obsolètes

Amélioration de l’intellisense

Tri des propriétés et Hack pour IE

Liens

Une vidéo de présentation de l’extension par son créateur Mads Kristensen sur Channel 9

Conclusion

Web Essentials est une extension indispensable pour le développement web sous Visual Studio. Cet article contient seulement quelques fonctionnalités et je vous encourage à aller consulter la liste complète de celles ci afin de profiter au maximum des possibilités de cette extension.

Tweet