Comment faire pour que Visual Studio jouent mieux avec HTML5, CSS3, Javascript, jQuery, en d'autres termes plus de ces produits WebDev front-end?

Visual Studio 2010 , que ce soit l'Ultimate, (gratuit) Web Developer Express ou une autre version, n'est pas entièrement optimisé pour le développement web front-end hors de la boîte. Mais ne laissez pas le VS2010 d'installation par défaut vous tromper. Il ya une combinaison de l'effort communautaire et les améliorations d'outillage par Microsoft qui font VS2010 jouent plus agréable à webdevs.

Dans ce post, vous trouverez une collection de mes extensions préférées et des outils pour rendre Visual Studio pratique pour développeurs web. Je me concentre sur les outils que j'ai utilisé et installé moi-même, sachant qu'il ya d'autres là-bas. Avez-vous des ajouts à la liste? S'il vous plaît faites le moi savoir afin que je puisse les ajouter ici!

La plupart des extensions je discute peut être installé en utilisant le gestionnaire d'extensions (Extension Manager Tools>). Vous pouvez également télécharger des extensions à travers la Galerie Visual Studio .

Web Standards Mise à jour pour Visual Studio

Télécharger Web Standards Mise à jour pour Microsoft Visual Studio 2010 SP1

Ceci est le premier outil que je recommande pour introduire des améliorations HTML5, CSS3 et JavaScript pour l'éditeur. Libéré par l'équipe de Visual Web Developer chez Microsoft on inclut le support du schéma HTML5, CSS3 et JavaScript améliorés IntelliSense . 
Bien que Visual Studio Service Pack 1 n'a apporter un peu de soutien schéma HTML5 je conseille d'installer cette extension pour un meilleur soutien.

Plus d'info sur le blog de ​​Mads Kristensen: Web Standards Update - les coulisses

Extensions éditeur JScript

Télécharger des extensions éditeur JScript

Vous pourriez avoir vu mon précédent astuce sur ces extensions. Extensions éditeur JScript sont une addition bienvenue à l'IDE. 
Si vous êtes habitué à avoir pleinement part entière IDE optimisé pour développement C #, des choses comme soulignant mot, décrivant et accolade correspondante sont une donnée. Pas si avec JavaScript, jusqu'à ce que vous installez cette extension.

 
(Décrivant par exemple dans certaines fonctions jQuery)

Après l'installation des extensions éditeur JScript vous aurez l'option pour activer / désactiver quatre extensions différentes: Matching Brace, JScript IntelliSense <para>, décrivant et surligneur Word. Sachant que parfois l'installation d'une extension spécifique des conflits avec l'un d'eux, il s'agit d'une option intéressante.

Assurez-vous de consulter la vidéo Channel9 pour une démonstration en direct des extensions.

Workbench Web Mindscape

Téléchargez le Workbench Web Mindscape .

Scott Hanselman a une grande (comme toujours) post sur ​​ce nouveau «Web Workbench Mindscape" extensionpour Visual Studio, ajoutant le support pour CoffeeScript, SAAS et moins. 
Trop nouvelles extensions pour vous? Ne vous inquiétez pas si vous n'avez pas fait dev web front-end récemment, il est normal qu'ils paraître fou.

• Coffeescript : CoffeeScript est un langage peu compile en JavaScript.
• SAAS : Sass est une extension du CSS3, l'ajout de variables, mixins, l'héritage de sélection, et plus encore.C'est traduit bien formatés, CSS standard. Avec la conversion de Visual Studio extension dans la norme CSS est automatisé.
• MOINS : MOINS est similaire à SASS en ce qu'elle ajoute également le support pour les variables, mixins et plus, mais au lieu d'avoir un côté serveur ou plugin de traduire ce code dans le standard CSS il fonctionne via une bibliothèque JavaScript sur ​​le client.

JSLint.VS2010

Télécharger JSLint.VS2010

Ceci est une extension de JSLint pour Visual Studio, comme je suis sûr que vous êtes conscient de la lecture du titre de l'outil. Vous ne pourrez probablement pas échapper à fait web front-end sans utiliser JavaScript. Mais qu'en appliquant les modèles et validation du code? JSLint, un outil de qualité du code est une solution pour cela.

Il va blesser vos sentiments, c'est la promesse de JSLint. Non, sérieusement, c'est leur slogan, mais il s'agit plus d'un avertissement sur ​​la façon dont sera JSLint blesser vos sentiments au début mais à la fin font de vous un bien meilleur développeur JavaScript. Rédaction JavaScript sans appliquer les modèles et les meilleures pratiques laisse votre ingérable code. 
JSLint appliquera un ensemble de règles pour valider votre code et les questions du rapport. Il vous aide à imposer l'utilisation de motifs et de la structure du code général.

 
(/ / Notez qu'il ya beaucoup de mal à ce petit script, même si elle ne s'exécute c'est juste pour la démo)

Vous pouvez aussi essayer la version en ligne à http://jslint.com

IntelliSense jQuery

Obtenir de l'aide d'IntelliSense pour jQuery dans votre ASP.NET MVC 3 projets est déjà arriver. Le modèle par défaut contient les fichiers -. vsdoc.js qui ont été commentés pour IntelliSense de Visual Studio. Si vous souhaitez ajouter ce support à un autre projet qui vient d'installer le package NuGet "jQuery.vsdoc", cependant les fichiers vsdoc sont maintenant inclus dans le package jQuery défaut donc vous devriez les obtenir par défaut (la version 1.6 de jQuery et plus).

Image Optimizer (par Mads Kristensen)

Télécharger Image Optimizer

Une extension joli petit studio intégré Vial, qui utilise SmushIt et PunyPNG pour l'optimisation des images. Lancez-le sur un dossier d'images dans Visual Studio pour avoir toutes les images optimisées. Les gains de 15% à 40% ne sont pas inhabituelles avec certains fichiers que j'ai essayé.

D'autres outils, non testés

• JSEnhancements : Semblable à des extensions éditeur JSscript, il offre décrivant et l'appariement des accolades soulignant pour JavaScript et éditeur CSS.
• Schéma CSS 3 intellisense
• Chirpy : VS Ajouter Dans Manipulation Pour JS, CSS, et des fichiers sans point
• ReSharper 6 , déjà utilisé par beaucoup de développeurs a aussi un support pour JavaScript et CSS (note ci n'est pas gratuit)

ASP.NET MVC et modèles HTML5

Comme je travaillais sur ce post par un tweet @ maartenballiauw a attiré mon attention:

Donc ce que j'ai fait dans l'environnement Visual Studio (NuGet) console de gestionnaire de paquets pour un projet ASP.NET MVC3. Ce package ajoute le support d'EditorTemplates MVC pour de nouveaux types d'entrée HTML5 tels que E-mail, tél et l'URL. Techniquement pas un outil de ma liste, mais intéressant de mentionner ici de toute façon. 

Alors que c'est tout pour ma liste actuelle. N'oubliez pas, ajoutez vos outils favoris à la liste en laissant un commentaire.

Francisation de : http://blogs.msdn.com/b/belux/archive/2011/09/12/my-favorite-tools-to-optimize-visual-studio-for-webdev.aspx

Aujourd'hui je souhaite exposer un problème soulevé via nos rapports SEO.

Sur un site conçu en ASP.Net, les erreurs non gérées sont redirigées via une page spécifique, et de la même faon les erreurs HTTP 404,500 etc. en utilisant le fichier de configuration web.config

<customErrors mode="On" defaultRedirect="~/errors/GeneralError.aspx">
     <error statusCode="404" redirect="~/errors/PageNotFound.aspx" />
</customErrors>

Or, après vérification via l'outil fiddler, on s'aperçoit, qu'il n y a jamais de remontée du code d erreur HTTP 404, mais une redirection Temporaire (Code Http 302) vers la page "PageNotFound.aspx".

En conséquence, cette page est indexée dans les moteurs de recherche.

Qu'avons nous fait pour corriger celà ?

Le site, sur lequel je travaille est sur une architecture MVC 3 - ASP.Net 4

Nous avons etabli toutes nos routes dans le "Global.asax" et terminé par la route suivante :

// Show a 404 error page for anything else.
routes.MapRoute("Error", // Route name
    "{*url}",  // Toutes Urls qui ne matchent pas
          new { controller = "Error", action = "Index" }
    );

Puis dans le controller "ErrorController" :

public ActionResult Index()
{
  throw new HttpException(404, "Page not found");
}

Notre controller dérive d'une classe parente nommée "ControllerBase", cette derniere dérivant de "Controller"

ControllerBase nous permet de redéfinir la gestion des Exceptions et gerer comme nous le voulons le renvoi de l erreur Http (En renvoyant la vue souhaitée)

protected override void OnException(ExceptionContext filterContext)
{
   //...
   if (filterContext.Exception is HttpException)
   {
         HttpException httpException = (HttpException)filterContext.Exception;
         if (httpException.GetHttpCode() == (int)HttpStatusCode.NotFound)
         {
             InitResponseOnHttpException(filterContext, httpException);
             View("Error404", null).ExecuteResult(ControllerContext);
         }
   }
  //...

De cette facon code Http renvoyé est bien le code 404.