Share
Utvecklare är en picky gäng, nästan till övertygelse och voodoo magi, när det gäller deras verktyg. Om du tar hänsyn till det otaliga antalet saker vi använder för att bygga appar (Node, Grunt, Fiddler, LESS, EC2 etc.), är det inte konstigt varför, när vi väl hittar en fin kombinationsruta, skyddar vi den som en ekorre med hans sista nöt. Och det är vettigt, eftersom din utvecklingsmiljö är ganska darn viktig för din framgång.
Vad jag tycker gör Visual Studio ett bra IDE för webbutveckling är en förlängning som heter Web Essentials.
Det enda verktyget som enligt min mening alltid varit en vansinnigt personlig och uppenbar preferens är din IDE eller redaktör. Allting handlar om allt från tangenttryckningar och språkstöd till plugins och teman. Allt måste flöda snyggt i din utvecklingsstil och viktigast av allt behöver den hjälpa dig att lösa de problem du står inför utan att du hoppar genom hoops.
Visual Studio är en av de bästa IDE-erna, som enkelt innehåller en mängd funktioner som gör utvecklarna mycket framgångsrika. Men det har inte riktigt tittats på som en "webutvecklarens" redaktör eftersom det traditionellt riktade sig mot Microsoft-plattformen med många funktioner som gjorde kodningen för den plattformen oerhört lätt. Och ja, många av de här funktionerna gäller inte riktigt för utvecklare som inte riktar sig mot en Microsoft-plattform.
Med Microsoft som helhjärtat omfattar HTML5, CSS3 och JavaScript för både webb- och Windows 8-apputveckling, har det skett en hel del förändringar med Visual Studio 2012 som gör det till ett fantastiskt verktyg för att bygga upp för webben. Detta är vad jag planerar att täcka nästa, och förhoppningsvis ser du det i ett helt annat ljus.
En av de bästa funktionerna i Solution Explorer är att jag kan söka efter en specifik tillgång i hela lösningen.
Jag kommer ihåg att titta på Visual Studio själv för många år sedan och inte verkligen ta det på allvar. Det var inte för att det inte var en kraftfull IDE. Det kände sig helt och hållet riktad mot att bygga. NET-applikationer och webbplatser - och det var faktiskt. Det är inte dåligt, för om du frågar någon. NET-utvecklare, är Visual Studio biet knän för deras behov, vilket ger en rik miljöredaktion med integrerade funktioner som andra redaktörer helt enkelt inte har som standard. Och för de funktioner som saknades är extensionsekosystemet så omfattande som du hittar. Så jag kunde helt få varför. NET-utvecklare älskar Visual Studio.
När det kom till webben var tekniker som HTML, CSS och JavaScript en eftertanke, i grunden andraklassiga medborgare. Och jQuery-support, vilket var särskilt viktigt för mig, var en annan sak som Visual Studio inte stödde. Att ha integrerat stöd för grundläggande, men kritiska, teknik och ramar på webben var ett viktigt krav och utan dem var Visual Studio för mig DOA.
Lyckligtvis gjorde Microsoft det klart att dessa tekniker var otroligt viktiga för deras riktning, och det startade massor av uppdateringar som började forma Visual Studios sökväg mot bättre stöd för webbutvecklare, speciellt front-end-utvecklare. Detta inkluderade stöd för HTML5, CSS3 och JavaScript samt leverans jQuery med Visual Studio, alla viktiga uppdateringar som fick mig att ompröva IDE för webbutveckling när jag gick med i Microsoft.
En av de första sakerna jag gjorde när jag började använda Visual Studio i 2010 var att skapa en mall baserad av HTML5 Boilerplate. Jag gjorde det eftersom jag kände att Visual Studio standardmallar inte överensstämde med vad jag ville ha, och Boilerplate är ganska mycket till goto-mallen för de flesta nya filer. Detta fungerade bra för mig eftersom jag tenderar att behöva skapa en massa enstaka proof-of-concept-sidor och att behöva skapa ett fullblåst projekt skulle inte vara idealiskt.
Visual Studio 2012 adresserar nu detta genom att låta dig skapa ett mycket enkelt HTML-skelett som ligger närmare vad de flesta webbutvecklare skulle vilja ha:
Detta görs via en enkel "File-> New File" och väljer "HTML Page" från mallalternativen. Detsamma kan göras för stylesheets eller JavaScript-filer, även om mallarna är barebones.
Den här mallen är mycket mindre omfattande än HTML5 Boilerplate, men det viktiga att komma ihåg är att det är en startpunkt från Microsoft (vilket är viktigt för min webbutveckling).
Och som jag beskrivit i mitt blogginlägg kan du skapa egna mallar med utökade funktioner.
Jag vet vad du säger: "Ja det är söt Rey, men visa oss något mer än ett HTML-skelett."Jag kommer dit. Tålamod, gräshoppa.
Att hantera en stor mängd webbplatskod är där jag tycker att Visual Studio verkligen lyser. Jag hämtade Addy Osmani och Sindre Sorhus 'TodoMVC ramprojekt eftersom det är en ganska stor uppsättning filer att arbeta med. Att suga på webbplatsen är lika enkelt som att göra "File-> Open Website ..." och välja en katalog:
Detta ger mig vad som kallas en "lösning" som hjälper till att organisera alla tillgångar till min webbplats och visar dem i en träningsvy stil:
En av de bästa funktionerna i Solution Explorer är att jag kan söka efter en specifik tillgång i hela lösningen. Så om jag ville hitta var jQuery är, kan jag bara skriva in termen "jquery" och det kommer att returnera en lista över alla kataloger och filer som matchar den:
Redaktören själv har de funktioner som jag förväntar mig av en IDE, med saker som så grundläggande som radnummer och kodkollaps till förmågan att faktiskt arbeta i ett designläge och enkelt sätta dina filer i delat skärmläge. En sak som är ett måste för mig är bra kodinsikt, så att när jag skapar koden kan jag få de attribut som presenteras för mig. Det är svårt att komma ihåg alla programmeringsspråkens syntax, så lite hjälpare för att berätta att attributen är en Godsend. VS erbjuder detta via Intellisense som nu stöder HTML5, CSS3 och JavaScript.
Så jag ser inte bara de attribut som är tillgängliga för ett element, men det visar mig också de metoder som jag kan använda. Observera att i det här exemplet får jag Intellisense för HTML5-videoelementet. Jag är inte en förespråkare för inline-kod, men det faktum att det är där är fortfarande mycket användbart.
För CSS, får du fortfarande Intellisense som innehåller en fullständig lista över egenskaper utöver en beskrivning av vad varje gör:
Och när du har valt en egendom, innehåller den kodhints som hjälper dig att komma ihåg hur du formaterar dina uttalanden:
Naturligtvis, tillsammans med dessa funktioner, har VS smarta funktioner för att göra uppgifter som att plocka färger trivialt:
JavaScript och DOM fick också kärlek i Visual Studio, eftersom det var ett förstklassigt språk i IDE; inga fler plugins för att göra den användbar. Återigen, med fokus på Intellisense, erbjuder VS fullt stöd för JavaScript och DOM-objekt, metoder och egenskaper:
jQuery-support har tagits med på den här tiden, och Intellisense stöd till andra populära ramar finns på Internet. Och Visual Studio 2012 skickas nu med jQuery Mobile för att tillåta utvecklare att bygga mobila webbplatser.
Här är något du kanske inte vet. Visual Studio låter dig inte bara testa mot alla större webbläsare du har installerat på ditt system men det ger också ett verktyg som kallas Sidinspektör, vilket liknar de webbfelsökningsverktyg som finns i de flesta webbläsare. Med sidinspektören kan du se din sida i realtid och göra liveändringar till CSS och DOM. När du är nöjd med dessa ändringar kan du spara dem tillbaka till dina källfiler. Lägg till exempel hur jag har ändrat texten på tweeten i följande skärmdump genom att uppdatera den i markeringen:
Den uppenbara fördelen med detta är att du inte behöver släppa ut din redaktör för att testa din sida och göra ändringar. Och eftersom förändringarna händer live är det enkelt att ta den drabbade koden och klistra in i källkoden. Det här är möjligt eftersom Visual Studio utnyttjar Internet Explorers Trident-återgivningsmotor och en inbyggd version av Internet Information Server (IIS), så att du kan köra din webbplats dynamiskt. Det är rättvis, Visual Studio skickar med en webbserver (och det har en tid).
Det är utan tvekan användbara funktioner, men en webbutvecklarens arbetsflöde är mer komplicerat än bara att redigera ett par sidor eller CSS-stilar. Och ärligt talat är många av funktionerna tillgängliga för kodredigerare, om än via community plugins.
Visual Studio har gjort JavaScript till ett förstklassigt språk.
Vad jag tycker gör Visual Studio ett bra IDE för webbutveckling är en förlängning som heter Web Essentials. Det är den saknade delen av en annars solid kodande miljö eftersom den lägger till ett antal funktioner som är nödvändiga. Denna förlängning utvidgar Visual Studio genom att stödja funktioner som:
Och det finns så mycket mer. Mads Kristensen, skaparen av Web Essentials, har gjort ett fantastiskt jobb för att destillera vad webbutvecklare använder och föra in det i tillägget.
Att se till att webbläsarkompatibilitet är en viktig del av våra jobb är att, men med så många egenskaper där ute för att komma ihåg, kan det vara lite skrämmande att komma ihåg vad som fungerar där. Web Essentials hjälper dig genom att låta dig se nivån på webbläsarstöd för CSS-egenskaper:
Och för att ta det ett steg längre så kommer det även att berätta när du saknar leverantörs prefix, vilket är viktigt för att säkerställa att din webbplats fungerar över alla större webbläsare:
Förutom att du kan infoga leverantörs prefix på grundval av egna inställningar för webbläsarens webbläsare:
Medan detta bara kommer att lägga till de försvunna leverantörs prefixen för den här specifika egenskapen, innehåller Web Essentials möjligheten att göra det bredvid sidan och kan även lägga till i den saknade icke-prefixade versionen av egenskapen för att hjälpa framtidsskyddad din kod.
Eftersom vi pratar om webbläsarstöd, är det lite av ett drag att stödja äldre versioner av IE, och det är omöjligt att komma ihåg alla de hack som behövs för att göra en sida bra. Yep, Web Essentials erbjuder möjligheten att lägga in specifika hackar för att dina sidor ska fungera rätt:
Skallen och korsbenen är ganska lämpliga.
CSS preprocessorer är alla raseri och med rätta det. Möjligheten att göra variabla deklarationer och skapa mixins i CSS är en stor fördel, särskilt när man hanterar stora stylesheets. MINDER är en av de mest populära lösningarna. Faktum är att jag gjorde en undersökning där MINDRE var en av de mest populära ramarna i bruk. Web Essentials ger mindre till Visual Studio så att du, som du skriver, kan visa CSS-utsignalen i realtid via ett förhandsgranskningsfönster:
Förhandsgranskningsfönstret, tillsammans med fullt redigeringsstöd och möjligheten att ställa in kompilatoralternativ, är en välsignelse för utvecklare som vill använda Visual Studio och behöver LÄGRE support.
Jag har bara repat ytan på Web Essentials CSS-funktioner. Det finns bara så mycket rikedom där för den här artikeln.
Visual Studio är en av de bästa IDE: erna.
Som jag nämnde har Visual Studio gjort JavaScript ett förstklassigt språk. Några viktiga arbetsflödesbehov saknas emellertid, och Web Essentials fyller dem. Till exempel ska varje utvecklare linta sin JavaScript-kod. Det är bara bra praxis och hjälper till att förhindra vanliga språkfel. JSHint är en mycket populär gaffel av JSLint skapad av Anton Kovalyov och används i stor utsträckning av utvecklare för att analysera sin kod för potentiella problem. Web Essentials innehåller JSHint, så att du kan lina din kod när som helst. Det kan också konfigureras att fästa all din kod vid byggtiden.
Eftersom jag nämnde byggtiden innehåller Web Essentials även möjligheten att när som helst minska dina filer. Men det tar det ett steg längre genom att uppdatera minifilerade filer när den ursprungliga källfilen uppdateras, och det skapar också en källkarta som hjälper till med debugging senare.
Många utvecklare gillar att använda domänsspecifika språk som CoffeeScript och TypeScript. För vissa, det uttalade språket i CoffeeScript gör det extremt attraktivt jämfört med kodning i plain ole JavaScript. Tja, de utvecklare kan vara uppfattade i VS tack vare Web Essentials. Mads har lagt till stöd för båda DSL-enheterna, och lägger till liknande förhandsgranskningsstöd som jag tidigare nämnde om MINDRE. När du skriver på din TypeScript- eller CoffeeScript-kod kan du se den resulterande JavaScript i realtid. Och när du är klar kan Web Essentials minska koden för dig:
Mads tillade också snygga HTML-funktioner. Om du är in i Zen Coding (jag har alltid funnit det lite konstigt), så har du fått Web Essentials. Om jag skriver detta in i VS och trycker på Tab-knappen:
div # contentRegion.address
Jag får följande kod:
Det är väldigt coolt. Inte min kopp te men cool ändå.
Och medan han var där, lade han till stöd för templerande klientsidor som Handlebars & JSRender, Markdown och en Lorem Ipsum generator.
Jag börjar verkligen undra om Mads sover.
Jag hoppas jag har visat att Visual Studio på egen hand har riktigt bra stöd för HTML, CSS och JavaScript. Teamet hos Microsoft har arbetat hårt för att göra det till en världsklass IDE för webbutvecklare. För mig är den väsentliga delen som gör det till mitt val för webbutveckling Web Extensions. Det ger mig den extra lite funktionalitet som jag behöver hantera mitt arbetsflöde. Visst, varje utvecklare har olika behov och jag beklagar inte att ha tagit upp alla dina. Jag hoppas dock att jag har skisserat och visat tillräckligt bra funktioner för att visa att VS är mer än kapabel för webbutveckling.
Accentsconagua