Annonce d’intérêt public : Installez Web essentials

Vous êtes, tout comme moi, à faire du développement web avec Visual Studio sur une base quotidienne? Êtes-vous satisfaits des outils que vous utilisez?

Il est possible que vous utilisiez déjà ReSharper ou même CodeRush? Vous avez probablement une très ferme opinion sur le fait que Visual Studio a de sérieuses lacunes du côté des outils supportant le développement web? Vous avez déjà été frustré en tentant de faire un CSS dans votre projet? Vous trouvez dérisoires les fonctionnalités d’édition du Javascript?

Web Essentials 2012

Si cela est le cas, chose certaine, vous allez probablement avoir une opinion positive de Web Essentials 2012. Web Essentials 2012 est une extension à Visual Studio 2012 qui s’installe par NuGet. Un petit rappel : pour atteindre le gestionnaire d’extensions, il faut passer par Tools\Extensions and Updates.

L’extension est développée par Mads Kristensen. Dans le cas où vous ne le connaissez pas, il est un employé de Microsoft travaillant au sein de l’équipe Web Platforms and Tools. Pour faire simple, il est très bien placé pour développer ce genre d’outils.

Web Essentials offre des fonctionnalités, à différents niveaux dans Visual Studio, vous permettant d’être productif ou simplement de faire des choses qui n’étaient simplement pas possible dans le passé.

Des choses qui n’étaient pas possible? J’ai attiré votre attention n’est-ce pas? Il est question, par exemple, de pouvoir gérer vos fichiers CoffeeScript directement à partir de l’IDE. Le même support est aussi offert pour TypeScript et les fichiers LESS.

Les cinq fonctionnalités qui vont changer ma façon de travailler

Il serait vain de faire une liste détaillée des fonctionnalités offertes par Web Essentials. Alors, j’ai décidé de lister mon top 5 des fonctionnalités que, je crois, vont changer la façon que je travaille au quotidien.

Avant tout, sachez qu’en tout temps un menu « Web essentials » est accessible par un clic droit de votre souris. Cela va vous permettre d’accéder aux fonctionnalités que vous pouvez avoir accès selon le contexte.

Conversion aux DataURI

Il est maintenant possible, à partir de l’éditeur CSS, de convertir une image en un DataURI base64. Si vous avez plusieurs images statiques, vous pouvez économiser quelques requêtes HTTP de cette façon.

JSHint

L’outil de détection d’erreurs et de problèmes potentiels pour Javascript a été intégré directement à l’éditeur de Visual Studio. C’est à dire que vos erreurs et avertissements vont apparaître directement dans la fenêtre de notification d’erreurs.

Minification et Source Maps

La minification des fichiers Javascript et CSS est supportée de quelques façons différentes. La minification est possible à partir du menu « Build » et même dans vos fichiers source directement. J’ai même remarqué qu’il est possible de faire la minification d’une d’une partie de votre code source à partir d’une sélection.

Par le fait même, lorsque vous minifierez votre Javascript, le fichier .map permettant de faire le mappage entre votre version originale et la version minifiée est automatiquement généré.

Zen Coding et Lorem Ipsum generator

Qu’est-ce que Zen Coding? Il s’agit d’une syntaxe permettant l’écriture assez rapide du code HTML à l’aide d’une syntaxe minimale basée sur des conventions.

Par exemple, la ligne : div#page>div.logo+ul#navigation>li*5>a

Génère le code HTML suivant :

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

LESS

La cerise sur le sundae est l’ajout d’outils et de fonctionnalités permettant aux développeurs de pouvoir intégrer facilement des styles visuels conçu avec la syntaxe LESS.

Le support pour LESS est assez complet. Il y a notamment la prévisualisation côte à côte LESS/CSS et des aides contextuels dans l’éditeur comme l’extraction vers une variable.