Share
Utviklere er en kresen gjeng, nesten til tross for overtro og voodoo magi, når det gjelder deres verktøy. Hvis du tar i betraktning det utallige antallet ting vi bruker til å bygge programmer (Node, Grunt, Fiddler, LESS, EC2 etc.), er det ikke rart hvorfor, når vi finner en fin kombinasjon, vekter vi det som en ekorn med hans siste nøtt. Og det er fornuftig, siden utviklingsmiljøet ditt er ganske darn viktig for din suksess.
Hva jeg tror gjør Visual Studio til en god IDE for webutvikling, er en utvidelse kalt Web Essentials.
Det eneste verktøyet som etter min mening alltid har vært en sinnsykt personlig og oppfylt preferanse, er din IDE eller redaktør. Alt handler om det, fra tastetrykk og språkstøtte til plugins og temaer. Alt må flyte pent i utviklingsstilen din, og viktigst av alt, det trenger å hjelpe deg med å løse de problemene du står overfor, uten at du hopper gjennom hoops.
Visual Studio er en av de beste IDEene som er tilgjengelige, og inneholder lett et vell av funksjoner som gjør utviklerne svært vellykkede. Men det har egentlig ikke blitt sett på som en "webutvikler" redaktør fordi den tradisjonelt målrettet Microsoft-plattformen med mange funksjoner som gjorde kodingen for den plattformen utrolig enkelt. Og vel, mange av disse funksjonene gjaldt egentlig ikke for utviklere som ikke målrettet mot en Microsoft-plattform.
Med Microsoft omfavner helhjertet HTML5, CSS3 og JavaScript for både web- og Windows 8-apputvikling, har det vært mange endringer med Visual Studio 2012 som gjør det til et fantastisk verktøy for å bygge på nettet. Dette er hva jeg planlegger å dekke neste, og forhåpentligvis ser du det i et helt annet lys.
En av de beste funksjonene i Solution Explorer er at jeg kan søke etter en bestemt ressurs i hele løsningen.
Jeg husker å se på Visual Studio meg selv for mange år siden, og ikke virkelig ta det på alvor. Det var ikke fordi det ikke var en kraftig IDE. Det føltes rett og slett målrettet mot å bygge .NET applikasjoner og nettsteder - og faktisk var det. Det er ikke noe dårlig, for hvis du spør en .NET-utvikler, er Visual Studio biene knær for deres behov som gir et rikt redigeringsmiljø med integrerte funksjoner som andre redaktører ikke har som standard. Og for de funksjonene som manglet, er utvidelsesøkosystemet så omfattende som du finner. Så jeg kunne helt få hvorfor. NET-utviklere elsker Visual Studio.
Når det gjaldt nettet, var teknologier som HTML, CSS og JavaScript en ettertanke, i utgangspunktet førsteklasses borgere. Og jQuery-støtte, som var spesielt viktig for meg, var en annen ting som Visual Studio ikke støttet. Å ha integrert støtte for grunnleggende, men kritiske, teknologier og rammer på nettet var et viktig krav, og uten dem var Visual Studio for meg DOA.
Heldigvis gjorde Microsoft det klart at disse teknologiene var utrolig viktige for deres retning, og det startet med massevis av oppdateringer som begynte å forme Visual Studios vei mot bedre støtte for webutviklere, spesielt for utviklere. Dette inkluderte støtte for HTML5, CSS3 og JavaScript samt frakt jQuery med Visual Studio, alle viktige oppdateringer som gjorde at jeg revurderte IDE for webutvikling da jeg kom til Microsoft.
En av de første tingene jeg gjorde da jeg begynte å bruke Visual Studio i 2010 var å lage en mal basert på HTML5 Boilerplate. Jeg gjorde det fordi jeg følte at Visual Studio standardmaler ikke stemte overens med det jeg ønsket, og Boilerplate er ganske mye til goto-malen for de fleste nye filer. Dette fungerte bra for meg fordi jeg pleier å trenge å lage mange engangsbestemmelser for konsept-sider og å måtte lage et fullblåst prosjekt ikke ville være ideelt.
Visual Studio 2012 adresserer nå dette ved å tillate deg å lage et veldig enkelt HTML-skjelett som er nærmere hva de fleste webutviklere vil ønske:
Dette gjøres via en enkel "File-> New File" og velger "HTML Page" fra malalternativene. Det samme kan gjøres for stilark eller JavaScript-filer, selv om malene er barebones.
Denne malen er langt mindre omfattende enn HTML5 Boilerplate, men det viktige å huske er at det er et ikke-Microsoft-startpunkt (som er viktig for min webutvikling).
Og som jeg beskrev i blogginnlegget mitt, kan du lage dine egne maler med utvidede funksjoner.
Jeg vet hva du sier: "Ja det er søtt Rey, men vis oss noe mer enn et HTML-skjelett."Jeg kommer dit. Tålmodighet, gresshopper.
Administrere en stor mengde nettstedskode er der jeg tror Visual Studio skinner virkelig. Jeg lastet ned Addy Osmani og Sindre Sorhus 'TodoMVC rammeprosjekt fordi det er et ganske stort sett med filer å jobbe med. Å suge på nettstedet, er så enkelt som å gjøre "File-> Open Website ..." og velge en katalog:
Dette gir meg det som kalles en "Løsning" som hjelper til med å organisere alle eiendelene til nettstedet mitt og viser dem i en treeview-stil:
En av de beste funksjonene i Solution Explorer er at jeg kan søke etter en bestemt ressurs i hele løsningen. Så hvis jeg ønsket å finne hvor jQuery er, kan jeg bare skrive inn begrepet "jquery" og det vil returnere en liste over alle kataloger og filer som samsvarer med det:
Redaktøren selv har de funksjonene jeg forventer fra en IDE, med ting som er grunnleggende som linjenumre og kodekollaps, til evnen til faktisk å fungere i en designmodus og enkelt sette filene dine i delt skjermmodus. En ting som er en nødvendighet for meg, er god kodeinnsikt, slik at når jeg lager koden, kan jeg ha attributter presentert til meg. Det er vanskelig nok å huske alle syntaksene i programmeringsspråk, så en liten hjelper for å fortelle deg attributtene er en Godsend. VS tilbyr dette via Intellisense som nå støtter HTML5, CSS3 og JavaScript.
Så jeg ser ikke bare de attributter som er tilgjengelige for et element, men det viser meg også metodene jeg kan bruke. Legg merke til at i dette eksemplet får jeg Intellisense for HTML5-videoelementet. Jeg er ikke en fortaler for inline-kode, men det faktum at det er der, er fortsatt veldig nyttig.
For CSS, får du fortsatt Intellisense som inneholder hele listen over egenskaper i tillegg til en beskrivelse av hva hver gjør:
Og når du har valgt en eiendom, gir den kodehint for å hjelpe deg med å huske hvordan du formaterer uttalelsene dine:
Selvfølgelig, sammen med disse funksjonene, har VS smarte funksjoner for å gjøre oppgaver som å plukke farger trivielt:
JavaScript og DOM mottok også kjærlighet i Visual Studio, med det å være et førsteklasses språk i IDE; ingen flere plugins for å gjøre den brukbar. Igjen, med fokus på Intellisense, tilbyr VS full støtte til JavaScript og DOM-objekter, metoder og egenskaper:
jQuery-støtte har vært inkludert i noen tid nå, og Intellisense-støtte til andre populære rammebetingelser finnes over hele Internett. Og Visual Studio 2012 leveres nå med jQuery Mobile for å tillate utviklere å bygge mobile nettsteder.
Her er noe du kanskje ikke har kjent. Visual Studio lar deg ikke bare teste mot alle de store nettleserne du har installert på systemet ditt, men det gir også et verktøy som heter Page Inspector som ligner på webfeilsøkingsverktøyene som finnes i de fleste nettlesere. Med Page Inspector kan du se siden din i sanntid og gjøre live endringer til CSS og DOM. Når du er fornøyd med disse endringene, kan du lagre dem tilbake til kildefilene dine. For eksempel, legg merke til hvordan jeg har endret teksten til tweet i følgende skjermbilde ved å oppdatere det i oppslaget:
Den åpenbare fordelen med dette er at du ikke trenger å slippe ut av redaktøren din for å teste ut siden din og gjøre endringer. Og siden endringene skjer live, er det enkelt å ta den berørte koden og lime inn i kildekoden din. Dette er mulig fordi Visual Studio utnytter Trident-renderingsmotoren til Internet Explorer, samt en innebygd versjon av Internet Information Server (IIS), slik at du kan kjøre nettstedet dynamisk. Det stemmer, Visual Studio sender med en webserver (og det har for en stund).
Det er uten tvil nyttige funksjoner, men en webutviklers arbeidsflyt er mer komplisert enn bare å redigere et par sider eller CSS-stiler. Og ærlig, mange av funksjonene er tilgjengelige for å kode redaktører, om enn via samfunnet plugins.
Visual Studio har gjort JavaScript til førsteklasses språk.
Hva jeg tror gjør Visual Studio til en god IDE for webutvikling, er en utvidelse kalt Web Essentials. Det er den manglende delen av et ellers solid kodende miljø fordi det legger til en rekke funksjoner som er avgjørende. Denne utvidelsen utvider Visual Studio ved å støtte funksjoner som:
Og det er så mye mer. Mads Kristensen, skaperen av Web Essentials, har gjort en fantastisk jobb med å destillere hva webutviklere bruker og bringe det inn i utvidelsen.
For eksempel, å sikre nettleserens kompatibilitet er en kritisk del av jobbene våre, men med så mange egenskaper der ute for å huske, kan det være litt skremmende å huske hva som fungerer der. Web Essentials hjelper deg ved å la deg se nivået på nettleserstøtte for CSS-egenskaper:
Og for å ta det et skritt videre, vil det til og med fortelle deg når du mangler leverandørprefikser, et viktig hensyn for å sikre at nettstedet ditt fungerer på tvers av alle de store nettleserne:
I tillegg tillater du å sette inn leverandørprefikser basert på dine egne målleserinnstillinger:
Mens dette bare vil legge til de manglende leverandørprefiksetene for denne bestemte eiendommen, inneholder Web Essentials muligheten til å gjøre det sidebred og kan også legge til i den manglende, ikke forhåndsdefinerte versjonen av eiendommen for å hjelpe fremtidssikre koden din.
Siden vi snakker om nettleserstøtte, må du støtte eldre versjoner av IE, det er litt av en dra, og det er umulig å huske alle de hackene som trengs for å gjøre en side gjengitt godt. Yep, Web Essentials tilbyr muligheten til å sette inn bestemte hacker for å få sidene dine til å fungere riktig:
Hodeskallen og korsbenet er ganske passende.
CSS preprocessors er alle raseri og med rette. Evnen til å lage variable erklæringer og lage mixins i CSS er en stor fordel, spesielt når du håndterer store stilark. MINDRE er en av de mest populære løsningene. Faktisk gjorde jeg en undersøkelse hvor MINDRE var en av de mest populære rammene i bruk. Web Essentials bringer mindre til Visual Studio, slik at du, som du skriver, kan vise CSS-utgangen i sanntid, via et forhåndsvisningsholder:
Forhåndsvisning vinduet, sammen med full editor støtte og muligheten til å sette kompilator alternativer, er en velsignelse for utviklere som ønsker å bruke Visual Studio og trenger mindre støtte.
Jeg har bare riper overflaten på Web Essentials CSS-funksjoner. Det er bare så mye rikdom der inne for denne ene artikkelen.
Visual Studio er en av de beste IDEene som er tilgjengelige.
Som nevnt har Visual Studio gjort et førsteklasses språk til JavaScript. Noen viktige arbeidsflytbehov mangler imidlertid, og Web Essentials fyller dem. For eksempel bør hver utvikler linting deres JavaScript-kode. Det er bare god praksis og bidrar til å hindre vanlige språkfeil. JSHint er en veldig populær gaffel av JSLint laget av Anton Kovalyov, og brukes mye av utviklere for å analysere sin kode for potensielle problemer. Web Essentials inkluderer JSHint, slik at du kan lint koden når som helst. Det kan også konfigureres til å lime hele koden din på byggetid.
Siden jeg nevnte byggetid, inkluderer Web Essentials også muligheten til å minifisere filene når som helst. Men det tar det et skritt videre ved å oppdatere minifiserte filer når den opprinnelige kildefilen er oppdatert, og den oppretter også et kildekart for å hjelpe deg med debugging senere..
Mange utviklere liker å bruke domenespesifikke språk som CoffeeScript og TypeScript. For noen, det påståtte språket i CoffeeScript gjør det ekstremt attraktivt i forhold til koding i plain ole JavaScript. Vel, disse utviklerne kan bli opinionated i VS takket være Web Essentials. Mads har lagt til støtte for begge DSL-er, og legger til lignende forhåndsvisningstøtte som jeg tidligere nevnte om MINDRE. Når du skriver på TypeScript eller CoffeeScript-koden, kan du se det resulterende JavaScript i sanntid. Og når du er ferdig, kan Web Essentials redusere koden for deg:
Mads har også lagt til rette HTML-funksjoner. Hvis du er i Zen-koding (jeg har alltid funnet det litt rart), så har Web Essentials deg dekket. Hvis jeg skriver dette inn i VS og klikker på Tab-tasten:
div # contentRegion.address
Jeg får følgende kode:
Det er veldig kult. Ikke min kopp te, men likevel kult.
Og mens han var der, la han til støtte for klientsiden templerende motorer som Handlebars & JSRender, Markdown og en Lorem Ipsum generator.
Jeg begynner virkelig å lure på om Mads sover.
Jeg håper jeg har vist at Visual Studio i seg selv har veldig god støtte for HTML, CSS og JavaScript. Teamet i Microsoft har jobbet hardt for å gjøre det til en verdensklasse IDE for webutviklere. For meg er det viktige stykket som gjør det til mitt valg for webutvikling, utvidelsen av Web Essentials. Det gir meg den ekstra bit funksjonaliteten jeg trenger for å administrere arbeidsflyten min. Visst, hver utvikler har forskjellige behov, og jeg beklager ikke å ha tatt opp alle dine. Jeg håper imidlertid at jeg har skissert og demonstrert nok gode funksjoner for å vise at VS er mer enn egnet for webutvikling.
Accentsconagua