Share
Ontwikkelaars zijn een kieskeurig stel, bijna tot het punt van bijgeloof en voodoo-magie, als het gaat om hun gereedschap. Als je rekening houdt met het ontelbare aantal dingen dat we gebruiken om apps te bouwen (Node, Grunt, Fiddler, LESS, EC2 etc.), is het geen wonder dat, als we eenmaal een mooie combo vinden, we hem als een eekhoorn bewaken met zijn laatste moer. En het is logisch, want je ontwikkelomgeving is behoorlijk belangrijk voor je succes.
Wat ik denk dat Visual Studio een geweldige IDE voor webontwikkeling maakt, is de extensie Web Essentials.
De enige tool die naar mijn mening altijd een waanzinnig persoonlijke en eigenzinnige voorkeur is geweest, is je IDE of redacteur. Alles daarover is van belang, van toetsaanslagen en taalondersteuning tot plug-ins en thema's. Het moet allemaal mooi meegaan in je ontwikkelingsstijl, en het allerbelangrijkste is dat het je moet helpen de problemen op te lossen waarmee je geconfronteerd wordt zonder dat je door hoepels heen springt.
Visual Studio is een van de beste IDE's die beschikbaar is en biedt eenvoudig een schat aan functies die ontwikkelaars zeer succesvol maken. Maar het is niet echt gezien als een editor van een "webontwikkelaar", omdat het traditioneel het Microsoft-platform aangaf met vele functies die codering voor dat platform ongelofelijk eenvoudig maakten. En ja, veel van die functies waren niet echt van toepassing op ontwikkelaars die niet op een Microsoft-platform waren gericht.
Met Microsoft volledig omarmd HTML5, CSS3 en JavaScript voor zowel web- als Windows 8-app-ontwikkeling, zijn er een hoop veranderingen geweest met Visual Studio 2012 die het een geweldige tool maken voor het bouwen voor het web. Dit is wat ik van plan ben om het volgende te behandelen, en hopelijk zie je het in een heel ander licht.
Een van de beste functies van de Solution Explorer is dat ik naar een specifiek item in de hele oplossing kan zoeken.
Ik herinner me dat ik jaren geleden naar Visual Studio heb gekeken en het niet serieus heb genomen. Het was niet omdat het geen krachtige IDE was. Het voelde gewoon vierkant gericht op het bouwen van .NET-applicaties en -sites - en in feite was het dat ook. Dat is geen slechte zaak, want als je het aan een .NET developer vraagt, is Visual Studio de bijenkorf voor hun behoeften en biedt het een rijke bewerkingsomgeving met geïntegreerde mogelijkheden die andere editors gewoon niet standaard hebben. En voor die functies die ontbraken, is het uitbreidingsecosysteem zo volledig als u kunt vinden. Dus ik kon volledig begrijpen waarom .NET-ontwikkelaars gek zijn op Visual Studio.
Toen het echter om het web ging, waren technologieën zoals HTML, CSS en JavaScript een bijzaak, eigenlijk tweederangsburgers. En ondersteuning voor jQuery, wat vooral belangrijk voor me was, was iets dat Visual Studio niet ondersteunde. Geïntegreerde ondersteuning hebben voor de basis, maar essentiële, technologieën en frameworks van het web was een eerste vereiste en zonder hen was Visual Studio voor mij DOA.
Gelukkig maakte Microsoft duidelijk dat deze technologieën ongelooflijk belangrijk waren voor hun richting, en dat zorgde voor een hoop updates die vorm begonnen te geven aan Visual Studio's weg naar betere ondersteuning voor webontwikkelaars, met name front-end ontwikkelaars. Dit omvatte ondersteuning voor HTML5, CSS3 en JavaScript evenals verzending van jQuery met Visual Studio, alle belangrijke updates die me de IDE voor webontwikkeling deden heroverwegen toen ik bij Microsoft kwam.
Een van de eerste dingen die ik deed toen ik Visual Studio in 2010 begon te gebruiken, was om een sjabloon te maken op basis van HTML5 Boilerplate. Ik deed het omdat ik vond dat de standaardsjablonen van Visual Studio niet overeenkwamen met wat ik wilde, en Boilerplate is vrijwel de goto-sjabloon voor de meeste nieuwe bestanden. Dit werkte prima voor mij omdat ik vaak heel veel off-of-concept-pagina's moet maken en een volledig project moet maken zou niet ideaal zijn.
Visual Studio 2012 lost dit nu op door u in staat te stellen een zeer eenvoudig HTML-skelet te maken dat dichter bij de meeste webontwikkelaars ligt:
Dit gebeurt via een eenvoudig "Bestand-> Nieuw Bestand" en kies "HTML-pagina" uit de sjabloonopties. Hetzelfde kan worden gedaan voor stylesheets of JavaScript-bestanden, hoewel de sjablonen barebones zijn.
Deze sjabloon is veel minder uitgebreid dan HTML5 Boilerplate, maar het belangrijkste om te onthouden is dat het een niet-Microsoft startpunt is (wat belangrijk is voor mijn webontwikkeling).
En zoals ik in mijn blogpost heb beschreven, kunt u uw eigen sjablonen met uitgebreide functies maken.
Ik weet wat je zegt: "Ja, dat is schattig Rey, maar laat ons meer zien dan een HTML-skelet."Ik kom er aan. Geduld, sprinkhaan.
Het beheren van een grote hoeveelheid websitecode is waar ik denk dat Visual Studio echt schittert. Ik heb Addy Osmani en Sindre Sorhus 'TodoMVC framework-project gedownload omdat het een behoorlijk grote set bestanden is om mee te werken. Om de site op te zuigen, is het net zo eenvoudig als "Bestand-> Website openen ..." en een map kiezen:
Dit geeft me een zogenoemde "Oplossing" die helpt bij het organiseren van alle items voor mijn website en deze weergeeft in een treeview-stijl:
Een van de beste functies van de Solution Explorer is dat ik naar een specifiek item in de hele oplossing kan zoeken. Dus als ik wilde weten waar jQuery is, kan ik gewoon de term "jQuery" invoeren en het zal een lijst teruggeven van alle mappen en bestanden die erbij horen:
De editor zelf heeft de functies die ik van een IDE verwacht, met dingen die zo eenvoudig zijn als regelnummers en samenvouwen van code tot de mogelijkheid om daadwerkelijk in een ontwerpmodus te werken en eenvoudig uw bestanden in gesplitste schermmodus te zetten. Een ding dat voor mij een must-have is, is een goed inzicht in de code, zodat ik bij het maken van de code de kenmerken kan hebben die aan mij worden gepresenteerd. Het is moeilijk genoeg om de syntaxis van alle programmeertalen te onthouden, dus een klein hulpje om je de attributen te vertellen is een godsgeschenk. VS biedt dit aan via Intellisense die nu HTML5, CSS3 en JavaScript ondersteunt.
Dus ik zie niet alleen de attributen die beschikbaar zijn voor een element, maar het laat me ook de methoden zien die ik kan gebruiken. Merk op dat ik in dit voorbeeld Intellisense krijg voor het HTML5-video-element. Ik ben geen voorstander van inline-code, maar het feit dat het er is, is nog steeds erg nuttig.
Voor CSS krijgt u nog steeds de Intellisense die de volledige lijst met eigenschappen bevat, naast een beschrijving van wat elk doet:
En als u eenmaal een eigenschap hebt geselecteerd, biedt deze code-hints om u te helpen herinneren aan het formatteren van uw uitspraken:
Uiteraard heeft VS, samen met deze functies, slimme functies om taken zoals het kiezen van kleuren triviaal te maken:
JavaScript en de DOM hebben ook liefde ontvangen in Visual Studio, omdat het een eersteklas taal is in de IDE; geen plug-ins meer om het bruikbaar te maken. Nogmaals, focus op Intellisense, VS biedt volledige ondersteuning voor JavaScript en DOM-objecten, -methoden en -eigenschappen:
jQuery-ondersteuning is al geruime tijd opgenomen en Intellisense-ondersteuning voor andere populaire frameworks is overal op internet te vinden. En Visual Studio 2012 wordt nu geleverd met jQuery Mobile zodat ontwikkelaars mobiele sites kunnen bouwen.
Dit is iets dat je misschien niet hebt geweten. Visual Studio stelt u niet alleen in staat om te testen tegen elke belangrijke browser die u op uw systeem hebt geïnstalleerd, maar biedt ook een tool genaamd Page Inspector die vergelijkbaar is met de hulpprogramma's voor het opsporen van fouten in de meeste browsers. Met Page Inspector kunt u uw pagina in realtime bekijken en live wijzigingen aanbrengen in CSS en de DOM. Als u tevreden bent met deze wijzigingen, kunt u ze opslaan in uw bronbestanden. Merk bijvoorbeeld op hoe ik de tekst van de tweet in de volgende screenshot heb veranderd door deze binnen de opmaak bij te werken:
Het voor de hand liggende voordeel hiervan is dat u niet uit uw editor hoeft te komen om uw pagina te testen en wijzigingen aan te brengen. En aangezien de wijzigingen live plaatsvinden, is het een kwestie van de betreffende code overnemen en in uw broncode plakken. Dit is mogelijk omdat Visual Studio gebruikmaakt van de Trident-renderingengine van Internet Explorer en een ingebouwde versie van Internet Information Server (IIS) zodat u uw site dynamisch kunt uitvoeren. Inderdaad, Visual Studio wordt geleverd met een webserver (en dat is al een tijdje).
Dat zijn ongetwijfeld handige functies, maar de workflow van een webontwikkelaar is complexer dan alleen het bewerken van een paar pagina's of CSS-stijlen. En eerlijk gezegd, veel van de functies zijn beschikbaar voor code-editors, zij het via community-plug-ins.
Visual Studio heeft JavaScript tot een eersteklas taal gemaakt.
Wat ik denk dat Visual Studio een geweldige IDE voor webontwikkeling maakt, is de extensie Web Essentials. Het is het ontbrekende onderdeel van een anderszins solide codeeromgeving omdat het een aantal functies toevoegt die essentieel zijn. Deze uitbreiding breidt Visual Studio uit door ondersteuning van functies zoals:
En er is zoveel meer. Mads Kristensen, de maker van Web Essentials, heeft fantastisch werk gedaan door te destilleren wat webontwikkelaars gebruiken en dat in de extensie te brengen.
Het zorgen voor browsercompatibiliteit is bijvoorbeeld een cruciaal onderdeel van ons werk, maar met zoveel eigenschappen om te onthouden, kan het een beetje ontmoedigend zijn om te onthouden wat waar werkt. Web Essentials helpt door u het niveau van browserondersteuning voor CSS-eigenschappen te laten zien:
En om nog een stap verder te gaan, wordt zelfs aangegeven wanneer u voorvoegsels van leveranciers mist, een belangrijke overweging om ervoor te zorgen dat uw site in alle belangrijke browsers werkt:
Zorg er ook voor dat u de prefixen van leveranciers invoegt op basis van uw eigen voorkeuren voor uw browsers:
Hoewel dit alleen de voorvoegsels voor ontbrekende leveranciers voor deze specifieke eigenschap zal toevoegen, omvat Web Essentials de mogelijkheid om dit paginabreed te doen en kan het ook de ontbrekende niet-voorgedefinieerde versie van de eigenschap toevoegen om uw code toekomstbestendig te maken.
Omdat we het hebben over browserondersteuning, is het niet eenvoudig om oudere versies van IE te ondersteunen, en het onthouden van alle hacks die nodig zijn om een pagina goed te renderen, is onmogelijk. Yep, Web Essentials biedt de mogelijkheid om specifieke hacks in te zetten om uw pagina's goed te laten werken:
De schedel en gekruiste beenderen zijn behoorlijk geschikt.
CSS-preprocessors zijn allemaal rage en terecht. De mogelijkheid om variabele declaraties te maken en mixins in CSS te maken, is een enorm voordeel, vooral bij het beheren van grote stylesheets. MINDER is een van de meest populaire oplossingen. In feite deed ik een enquête waarin LESS een van de meest populaire kaders was die in gebruik was. Web Essentials brengt LESS minder naar Visual Studio, zodat u tijdens het schrijven de CSS-uitvoer in realtime kunt bekijken via een voorbeeldvenster:
Het voorbeeldvenster, samen met de volledige editorondersteuning en de mogelijkheid om de compileropties in te stellen, is een zegen voor ontwikkelaars die Visual Studio willen gebruiken en die MINDER ondersteuning nodig hebben.
Ik heb alleen de oppervlakte van CSS-functies van Web Essentials bekrast. Er zit gewoon zoveel rijkdom in voor dit ene artikel.
Visual Studio is een van de beste IDE's die beschikbaar is.
Zoals ik al zei, heeft Visual Studio JavaScript een eersteklas taal gemaakt. Sommige essentiële workflow-behoeften ontbreken echter, en Web Essentials vult die. Elke ontwikkelaar zou bijvoorbeeld zijn JavaScript-code moeten verspillen. Het is gewoon een goede gewoonte en helpt algemene taalfouten voorkomen. JSHint is een zeer populaire vork van JSLint gemaakt door Anton Kovalyov en wordt veel gebruikt door ontwikkelaars voor het analyseren van hun code voor potentiële problemen. Web Essentials bevat JSHint, zodat u uw code op elk gewenst moment kunt plukken. Het kan ook worden geconfigureerd om al uw code te verspillen tijdens het opbouwen.
Omdat ik de bouwtijd vermeldde, bevat Web Essentials ook de mogelijkheid om uw bestanden op elk gewenst moment te verkleinen. Maar het gaat nog een stap verder door bijgewerkte bestanden bij te werken wanneer het oorspronkelijke bronbestand wordt bijgewerkt en het maakt ook een bronkaart om later te helpen bij foutopsporing.
Veel ontwikkelaars houden van domeinspecifieke talen zoals CoffeeScript en TypeScript. Voor sommigen maakt de eigenzinnige taal van CoffeeScript het buitengewoon aantrekkelijk vergeleken met codering in gewoon ole JavaScript. Welnu, die ontwikkelaars kunnen in VS een mening krijgen dankzij Web Essentials. Mads heeft ondersteuning voor beide DSL's toegevoegd, en heeft vergelijkbare voorbeeldondersteuning toegevoegd die ik eerder over MINDER heb genoemd. Terwijl u typt op uw TypeScript- of CoffeeScript-code, ziet u het resulterende JavaScript in realtime. En zodra u helemaal klaar bent, kan Web Essentials de code voor u verkleinen:
Mads heeft ook nette HTML-functies toegevoegd. Als je van Zen Coding houdt (ik vond het altijd een beetje raar), dan heb je met Web Essentials je gedekt. Als ik dit in VS typ en op de Tab-toets druk:
div # contentRegion.address
Ik krijg de volgende code:
Dat is heel cool. Niet mijn kopje thee maar toch cool.
En terwijl hij daar was, voegde hij ondersteuning toe aan client-side template-engines zoals Handlebars & JSRender, Markdown en een Lorem Ipsum-generator.
Ik begin me echt af te vragen of Mads slaapt.
Ik hoop dat ik heb laten zien dat Visual Studio op zichzelf een geweldige ondersteuning biedt voor HTML, CSS en JavaScript. Het team van Microsoft heeft hard gewerkt om er een IDE van wereldklasse van te maken voor webontwikkelaars. Voor mij is het essentiële onderdeel dat het mijn keuze voor webontwikkeling maakt de Web Essentials-extensie. Het biedt mij dat extra beetje functionaliteit dat ik nodig heb om mijn workflow te beheren. Natuurlijk, elke ontwikkelaar heeft verschillende behoeften en ik beweer niet dat hij al jouw behoeften heeft aangepakt. Ik hoop echter dat ik genoeg geweldige functies heb geschetst en gedemonstreerd om te laten zien dat VS meer dan geschikt is voor webontwikkeling.
Accentsconagua