Archives par mot-clé : Visual Studio

Astuces Web Essentials

24 février 2014Developpement WebDeveloppement Web, images, Visual StudioJulien

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.

SideWaffle : Des templates pour Visual Studio

14 janvier 2014.NET, Developpement Webplugins, Visual StudioJulien

SideWaffle Template Pack est une extension Visual Studio (lien vers la galerie) qui rajoute des :

Template de projects (extension Browser Link, extension chrome, thème chrome, …)
Templates de fichiers (robots.txt, fichiers angulars (directive, controllers, …), fichier de configuration grunt, JSHint Ignore File, Package.json pour NodeJS, plugins jQuery, …)
Snippets (Angular Controller, Angular Directive, Angular Service, …)

Cela permet de gagner en productivité avec des fichiers prêt à l’emploi.

Cette extension est open source et il est donc possible de contribuer pour ajouter des templates.

La vidéo de présentation :

EditorConfig : Partager les conventions de codage

9 janvier 2014Developpement Webconvention, Visual StudioJulien

Afin d’avoir un code cohérent et homogène, un projet doit définir des conventions de codage (type d’indentations, taille de l’indentations, fin de lignes, …) . Celles-ci peuvent être différentes d’un projet à un autre et il peut être chronophage de reconfigurer son éditeur à chaque changement de projet. Le projet EditorConfig permet de définir ces conventions dans un fichier .editorconfig à inclure dans votre projet et fournit un ensemble de plugins qui permettent de mettre à jour votre éditeur automatiquement en fonction de ce fichier. Ainsi, les personnes impliquées dans le projet (développeurs, intégrateurs, …) pourront utiliser facilement les même règles tout en utilisant leur éditeur préféré.

Il existe des extensions/plugins pour la plupart des éditeurs dont :

De nombreux projets l’utilisent tel que jquery, modernizr, ruby, … pour ne citer que les plus connus. A vous maintenant …

Mes Addins/Extensions Visual Studio 2013

2 janvier 2014.NETplugins, Visual StudioJulien

Cet article est la mise à jour de mon précédent article concernant mes addins Visual Studio que j’avais fait pour la Version 2010 de Visual Studio.

Voici une petite sélection des extensions que j’utilise :

Mes indispensables

Productivity Power Tools 2013 : Addin Microsoft qui permet de rajouter pas mal de petit outils pratique. A tester !!
Web Essentials 2013 : Ajout de fonctionnalités liées au développement web. Un MUST HAVE pour les développeurs web !!. (Cette extension inclus Emmet (ex-Zen Coding) et JsHint. Je n’utilise donc plus les extensions dédiées)
NuGet Package Manager : NuGet est un addin indispensable pour tout développeur .Net qui se respecte (il est inclus par défaut dans Visual Studio). Il s’agit d’un gestionnaire de paquet comme on peut en trouver sur Linux par exemple. Vous sélectionnez une librairie à installer (Log4net par exemple) et NuGet se charge de tout (installation / dépendances / configuration de base). Il permet également de faire des mises à jour facilement.
Indent Guides : permet d’afficher les lignes d’indentations dans votre code.

Utilitaires

CodeMaid : Une extension qui rajoute pas mal de fonctionnalités permettant d’avoir un code plus propre (Nettoyage de code, Réorganisation, Formatage, …). Je vous invite a regarder la doc pour voir ce qu’il est possible de faire avec.
SideWaffle Template Pack : des templates de projets, fichiers et snippets (la présentation de l’extension)
File nesting : permet de regrouper automatiquement les fichiers selon leur noms (par exemple : un fichier toto.min.js sera mis sous le fichier toto.js)
Trailing Whitespace Visualizer : permet de repérer facilement les espaces inutiles en fin de lignes
Outils de génération automatique de documentation
- GhostDoc : Existe en version Pro payante et en version gratuite. Téléchargement sur le site en laissant son @ mail. J’utilise cette extension à mon boulot.
- Atomineer Pro Documentation : Je viens de découvrir cette extension qui est très configurable (trop ?) et permet de générer de la documentation dans différents formats : XML, Doxygen (Qt ou Java)
Unit Test Generator : Permet de retrouver l’entrée de menu, au clic sur une méthode, permettant la génération d’une classe de test unitaire liée à cette méthode.
JScript Editor Extension : Améliore le support du JavaScript dans Visual Studio en ajoutant la fermeture automatiques des parenthèses, accolades, la surbrillance du mot courant, possibilité de réduire une partie du code en créant des régions,…)
MultiEdit : Une extension qui permet de faire de l’édition à plusieurs endroits en même temps
Pretty Paste : Permet de coller proprement du code dans Visual Studio (mon article de présentation)
Regex Editor : Éditeur d’expression régulière.
Image Optimizer : optimisez vos images sans perte
Entity Framework Power Tools Beta 4 : Outils liés à Entity Framework. Pratique notamment pour générer les entités d’une base existante pour partir sur une approche Code First
node.js Tools for Visual Studio : Toutes la puissance de NodeJs sans quitter Visual Studio
AutoT4MVC : Une extension qui permet de compiler automatiquement vos fichiers T4 à la compilation
Mexedge Stylesheet Extension : améliore la gestion des CSS (affichage des différents style dans un treeview, recherche, …)
GruntLauncher : Lancer des taches Grunt sans quitter Visual Studio
Chutzpah : Lancer de test JavaScript (gère les principaux framework de test JavaScript comme Mocha, Jasmine, QUnit)

Et vous, quelles extensions utilisez-vous ?

Pretty Paste : Coller du code proprement dans Visual Studio

1 août 2013.NETVisual StudioJulien

Un petit post rapide pour vous présenter un addin Visual Studio (compatible avec la version 2012) qui peut s’avérer pratique lors qu’on colle du code trouvé sur internet. La plupart du temps, le code collé contient les numéros de lignes et d’autres caractères indésirables. Pretty Paste permet lors d’un copier coller de d’analyser le texte à coller et de supprimer ces caractères indésirables. Très pratique. A noter qu’un Undo permet de retrouver le texte initial sans retouche.

Le post d’introduction du plugin sur le site de Mads Kristensen, qui travaille dans l’équipe web de Microsoft et qui développe notamment l’extension Web Essentials, que vous pouvez retrouver dans ma liste d’extension.

Visual Studio / Javascript : Commentaire d’API dans l’IntelliSense

23 avril 2013JavaScriptJavaScript, Visual StudioJulien

L’éditeur JavaScript de Visual Studio est un de mes préférés notamment grâce à l’IntelliSense dont j’avais parlé dans un précédent article. Nous allons voir dans ce post comment améliorer l’intelliSense afin de pouvoir voir les paramètres attendu par une fonction JavaScript, sa description, ….

Visual Studio utilise pour JavaScript les commentaires XML comme en C# à la différence que ceux-ci doivent se trouver au début du corps de la fonction et non au dessus.

var exampleFunction = function (a, b, c) {
    /// <summary>Exemple de description d'un fonction</summary>;
    /// <param name="a" type="String">description d'un paramètre de type string</param>
    /// <param name="b" type="int">description d'un paramètre de type int</param>
    /// <param name="c" type="Object">description d'un paramètre de type Objet</param>
    ... ici le code de la fonction
}

Sans et avec commentaires de fonction :

Par défaut, malheureusement, Visual Studio ne génère pas automatiquement le squelette des commentaires lors de l’insertion de ///. Il existe cependant des extensions qui permettent de le faire :

Web Essentials 2012, une extension indispensable pour les développeurs web dont j’avais parlé dans un article pour effectuer le débogage de scripts minifiés
JScript vsdoc Stub Generator pour Visual Studio 2010.

L’IntelliSense peut afficher les commentaires dans les scénarios suivants :

1 fichier .js référence un auter fichier .js .
1 fichier .js référence 1 fichier .aspx ou cshtml.
1 fichier .aspx ou .cshtml qui référence 1 fichier .js.

L’IntelliSense n’est pas disponible quand un fichier .aspx (ou .cshtml) référence un autre fichier.aspx (ou .cshtml).

Il existe une version de JQuery avec les commentaires compatible avec VS dont j’avais parlé dans un précédent article concernant les astuces JQuery.

Il faut savoir qu’il existe une autre norme pour les commentaires API en JavaScript JsDoc et que Web Essentials 2012 permet de gérer.

Références

L’article sur la création de commentaires de code XML pour JavaScript sur MSDN
Pour en savoir plus sur le formatage des commentaire JavaScript : The format for JavaScript doc comments (en)

Bon codage !!

Astuces Visual Studio

18 mars 2013.NETVisual StudioJulien

Visual Studio est un IDE puissant notamment grâce à ses nombreux raccourcis et fonctionnalités. En voici quelques uns qui peuvent vous faire gagner en productivité.

Poster

Microsoft met à disposition des « Posters » (cheatsheets), une feuille regroupant l’ensemble des raccourcis claviers pour Visual Studio. (Attention, les raccourcis peuvent être différents suivant le langage). Voici le lien pour Visual Studio 2010. (Je n’ai pas trouvé celui pour VS2012, donc si vous savez où le trouver …)

Coller avec l’historique

Vous avez surement déjà connu cette situation : Vous avez fait un copier et et plus tard lors de votre coller, vous vous rendez compte que vous avez copié autre chose entre-temps. La plupart des gens l’ignorent mais Visual Studio garde un historique des « copier » (Ctrl + C). Ainsi il est possible d’accéder à vos derniers copier lors d’un coller. Pour cela, il suffit de faire Ctrl + Maj + V au lieu de faire Ctrl + V. Lors de l’appui sur V vous accéderez à l’historique des copier.

Édition en mode colonne

Tout le monde connait la sélection par ligne mais il peut s’avérer pratique de faire une sélection en colonne pour une modification rapide. La sélection en mode colonne est possible dans Visual Studio et se fait via Alt + Maj + Fléche ou Alt + Souris. A noter que l’édition s’effectue sur toutes les lignes sélectionnées.

Visualisation d’un fichier en double

ll est possible de visualiser 2 parties d’un même fichier. Pour cela, il faut cliquer sur l’encoche en haut de la scroll bar du fichier et la déplacer vers le bas.

Et voila le résultat.

Points d’arrêts

Une des taches du développeur consiste à debugger son code et savoir bien utiliser les points d’arrêts est quelque chose qui peut vous faire gagner du temps. Visual Studio possède pas mal d’options pratiques comme l’arrêt conditionnel. On va ainsi pouvoir définir quand le debuggeur doit s’arrêter (et non pas à chaque accès au code). Pour cela , il faut faire un clic droit sur le point d’arrêt et cliquer sur Conditions …

Une pop up s’affiche et permet de définir une condition ou une expression qui engendrera l’arrêt au point d’arrêt. Cela est très pratique dans une boucle par exemple.

On peut également filtrer suivant le processus ou la machine via Filtrer … sur le clic droit du point d’arrêt.

ScrollBar Améliorée

Cette astuce nécessite l’extension Productivity Power Tools (VS 2010, VS2012) et apportant diverse amélioration sur la scrollbar d’édition d’un fichier.

Sans configuration cette extension apporte déjà quelques améliorations comme la coloration de la scrollbar (configurable dans les options) :

en vert : les modifications effectuées sur le fichier
en bleu : la position actuelle du curseur
en rouge : les points d’arrêts définis dans votre fichier
en violet : les occurrences de la variable sélectionnée
en jaune : les parties de code matchant une recherche
en gris foncé : le code réduit (avec le petit + / -)
…

Mais il est également possible de modifier l’apparence de la scrollbar. Il a 3 états disponibles :

Scroll Bar Mode : le mode normal
Map Mode : La scroll bar avec un aperçu du code au sruvol de la barre
Full Mode : Le full mode est le Map Mode dont le contenu de la scrollbar représente votre code.

La configuration se fait via :

Tools Options > Productivity Power Tools > Source Map
un clic droit sur la scroll bar

Un aperçu de la scrollbar en Full Mode :

Et vous, quelles sont les astuces VS qui vous font gagner du temps ?

Visual Studio : Astuces JSLint

5 janvier 2013JavaScriptJavaScript, JsLint, Visual StudioJulien

J’ai déjà évoqué JSLint dans un précédent article, un validateur de code JavaScript et l’extension pour Visual Studio associée (VS2010, VS2012).

Voici quelques astuces afin d’améliorer l’utilisation de JSLint avec Visual Studio.

Analyser une portion de code

Il est possible de lancer la validation sur une partie de code. Pour cela, il suffit de sélectionner le code à analyser, clic droit puis cliquer sur JS Lint.

Exclure des fichiers

Par défaut, JSLint validera tout vos fichiers JavaScript. Vous pouvez ainsi avoir des erreurs concernant des librairies externes (type jQuery, Modernizr, …) qui viendront polluer les erreurs concernant vos fichiers. Il est possible d’exclure des fichiers de la validation effectuée par JSLint. Pour cela, il suffit de faire un clic droit sur le fichier puis cliquer sur Skip on build (item)

De la même façon, il est possible d’exclure des dossiers.

Ajouter jQuery

Si vous utiliser jQuery, il est possible que vous ayez des erreurs de type :

Problem at line 1 character 1: '$' was used before it was defined.

Afin de supprimer ses erreurs, il faut ajouter des variables prédéfinies dans la configuration de JSLint. La configuration se fait en cliquant sur JS Lint Options… dans le menu Outils de Visual Studio.

Il faut ensuite rajouter $ et jquery comme variables prédéfinies comme ci-dessous :
Vous pouvez procéder de la même façon pour d’autres librairies ou vos propres variables.

Ignorer une partie de code

Si vous avez besoin d’ignorer une partie de code, il est possible de l’exclure de la validation via un système de commentaire. Il suffit de mettre le code à ignorer entre les commentaires /*ignore jslint start*/ et /*ignore jslint end*/ ou d’ajouter en fin de ligne //ignore jslint. Ces commentaires sont configurables dans les options de JsLint.

Zen Coding : Améliorez votre productivité

24 octobre 2012Developpement WebDeveloppement Web, HTML, Visual StudioJulien

Je me suis récemment intéressé à AngularJS, un framework JavaScript créé par Google. J’ai suivi des vidéos d’introduction/présentation de ce framework qui a l’air très prometteur. Dans ces vidéos, j’ai pu découvrir une technique permettant de coder très rapidement en HTML. Après quelques recherches, j’ai découvert qu’il s’agit de ce qu’on appelle le Zen Coding.

Présentation

Il s’agit de décrire les éléments HTML avec une syntaxe proche du CSS qui permet de générer le code HTML.

Ainsi

div#page>div.logo+ul#navigation>li*5>a

…sera transformé en :

<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>

Il s’intègre dans la plupart des IDE sous la forme d’un plugin ou est intégré directement. Une extension pour Visual Studio est disponible dans la galerie des extensions par exemple.

Syntaxe

Attribut id et classe

div#page.section.main

devient

<div id="page" class="section main"> </div>

A noter que si le type d’élément n’est pas précisé avec un « # » ou « . », l’élément généré sera de type div. On aurait obtenu le même résultat avec

#page.section.main

Autres attributs

Il est possible de générer les autres attributs en les spécifiant entre crochets.

td[colspan=2]

devient

<td colspan="2"></td>

Multiplication d’éléments

Il est possible de multiplier la génération d’éléments via *

li*5

devient

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Numérotation avec $

li.item$*3 générera 3 tags <li>, remplaçant $ par le l’index du tag.

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Nœuds Enfants et Frères

Il est possible de générer une arborescence complète via les opérateurs suivants :

> permet d’indiquer que l’élément suivant est un enfant
+ permet d’indiquer que l’élément suivant est un frère
( ) permet d’indiquer un groupe

Ainsi

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

devient

<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>

Support du texte (depuis la version 0.7)

Il est maintenant possible de renseigner du texte entre { }

p>{Click }+a{here}+{ to continue}.

devient

<p>Click 
	<a href="">here</a> to continue
</p>

Ressource

Pour en savoir plus, je vous invite à consulter les ressources suivantes :

Une vidéo de présentation sur Vimeo [en]
L’article de présentation sur Smashing Magazine [en]

Conclusion

Cette technique permet de gagner en rapidité lors de l’écriture de code HTML (compatible également XML et XSL). L’essayer c’est l’adopter. De plus il existe des extensions pour la plupart des éditeurs. Pourquoi s’en priver !!

Installation et Utilisation de Source Code Pro

28 septembre 2012.NETPolice, Visual StudioJulien

Adobe vient de sortir une police de caractère Source Code Pro dédiée au développement, cette police permet d’avoir une meilleure visibilité lors du développement notamment permettant de distinguer facilement un l d’un I (i majuscule) et d’un 1, qui peuvent se ressembler avec certaines polices.

Voyons comment installer cette police et l’utiliser sous Visual Studio.

La première chose à faire est de télécharger le zip de Source Code Pro à cette adresse sous forme de fichier zip.

Dézipper le fichier. Cette police est composé de 12 fichiers qui faut installer. Sous Windows, ouvrez le dossier C:\WINDOWS\Fonts. Il s’agit du dossier contenant les polices sous Windows.

L’installation de Source Code Pro se fait simplement en faisant un glisser-déposer des 10 fichiers dans le dossier C:\WINDOWS\Fonts.

Une fenêtre indique l’installation des fichiers.

Voyons maintenant comment utiliser cette police dans Visual Studio (Si votre Visual Studio était ouvert pendant l’installation des fichier, Il est nécessaire de le redémarrer). Il faut afficher la fenêtre de configuration via Outils > Options. La configuration des polices se trouve dans Environnement > Polices et couleurs. Il suffit de sélectionner Source Code Pro dans la liste des polices.

Voici un petit exemple d’un fichier utilisant la police :

Pour information, la police est déjà disponible sur Google Web Fonts