Share
Dezvoltatorii sunt o grămadă pretențioasă, aproape la punctul de superstiție și magie voodoo, când vine vorba de instrumentele lor. Dacă luați în considerare nenumăratele lucruri pe care le folosim pentru a construi aplicații (Nod, Grunt, Fiddler, LESS, EC2 etc.), nu e de mirare de ce, odată ce găsim un combo frumos, o păstrăm ca o veveriță cu ultima sa nuca. Și are sens, deoarece mediul de dezvoltare este destul de darn important pentru succesul tău.
Ceea ce cred că face Visual Studio un IDE excelent pentru dezvoltarea web este o extensie numită Web Essentials.
Unul dintre instrumentele care, după părerea mea, a fost întotdeauna o preferință cu totul personală și încrezător este IDE sau editor. Totul despre asta contează, de la apăsările de la tastatură și suportul lingvistic la pluginuri și teme. Totul trebuie să curgă frumos în stilul tău de dezvoltare și, cel mai important, trebuie să te ajute să rezolvi problemele cu care te confrunți fără să te faci să treci prin cercuri.
Visual Studio este unul dintre cele mai bune IDE-uri disponibile, încorporând cu ușurință o multitudine de caracteristici care fac dezvoltatorii cu succes. Dar nu a fost privit ca un editor de "web developer", deoarece în mod tradițional a vizat platforma Microsoft cu multe caracteristici care făceau codificarea pentru acea platformă incredibil de ușor. Și multe dintre aceste caracteristici nu s-au aplicat în mod real dezvoltatorilor care nu vizează o platformă Microsoft.
Cu Microsoft din toată inima îmbrățișând HTML5, CSS3 și JavaScript atât pentru dezvoltarea de aplicații web și Windows 8, a existat o tură de schimbări cu Visual Studio 2012 care îl fac un instrument minunat pentru construirea pentru web. Acesta este planul meu de a acoperi în continuare, și, sperăm, o veți vedea într-o lumină foarte diferită.
Una dintre cele mai bune caracteristici ale Solution Explorer este că pot căuta un anumit activ în întreaga soluție.
Îmi amintesc că m-am uitat la Visual Studio cu mulți ani în urmă și că nu o luam cu adevărat în serios. Nu a fost pentru că nu era un IDE puternic. S-a simțit îndreptată direct spre crearea de aplicații și site-uri .NET și, de fapt, a fost. Nu este un lucru rău, deoarece dacă întrebați orice dezvoltator .NET, Visual Studio este genunchii albinelor pentru nevoile lor, oferind un mediu bogat de editare cu capabilități integrate pe care ceilalți editori nu le au în mod implicit. Și pentru acele caracteristici care lipsesc, ecosistemul extensiei este la fel de cuprinzător pe măsură ce îl veți găsi. Așadar, am putut înțelege de ce dezvoltatorii din .NET iubesc Visual Studio.
Cu toate acestea, atunci când a venit pe web, tehnologii precum HTML, CSS și JavaScript au fost, ulterior, cetățeni de ultimă generație. Și suportul jQuery, care a fost deosebit de important pentru mine, a fost un alt lucru pe care Visual Studio nu l-a susținut. Având suport integrat pentru tehnologiile de bază și critice ale tehnologiei și a cadrelor web a fost o cerință cheie și fără ele Visual Studio, pentru mine, a fost DOA.
Din fericire, Microsoft a arătat clar că aceste tehnologii au fost incredibil de importante în direcția lor și au început o serie de actualizări care au început să formeze calea Visual Studio către un sprijin mai bun pentru dezvoltatorii web, în special pentru dezvoltatorii de la front-end. Aceasta a inclus suportul pentru HTML5, CSS3 și JavaScript, precum și transportul jQuery cu Visual Studio, toate actualizările importante care m-au făcut să reconsidere IDE-ul pentru dezvoltarea web atunci când m-am alăturat Microsoft.
Unul dintre primele lucruri pe care le-am făcut când am început să folosesc Visual Studio în 2010 a fost crearea unui șablon bazat pe HTML5 Boilerplate. Am făcut-o pentru că am simțit că șabloanele standard ale Visual Studio nu se potrivesc cu ceea ce am vrut, iar Boilerplate este destul de mult pentru șablonul pentru mai multe fișiere noi. Acest lucru a funcționat minunat pentru mine, deoarece am tendința de a crea o mulțime de pagini de o dovadă a conceptului și de a crea un proiect plin de suflare nu ar fi ideal.
Visual Studio 2012 se adresează acum, permițându-vă să creați un schelet HTML foarte simplu, care este mai aproape de ceea ce ar dori majoritatea dezvoltatorilor web:
Acest lucru se face printr-un simplu "Fișier -> Fișier nou" și alegerea "Pagina HTML" din opțiunile șablonului. Același lucru se poate face și pentru foile de stil sau pentru fișierele JavaScript, deși șabloanele sunt barele goale.
Acest șablon este mult mai cuprinzător decât HTML5 Boilerplate, dar este important să vă amintiți că este un punct de pornire non-Microsoft (care este important pentru dezvoltarea web-ului meu).
Și așa cum am descris în postarea pe blog, puteți crea propriile șabloane cu funcții extinse.
Știu ce spui: "Da, asta e drăguț Rey, dar arată-ne ceva mai mult decât un schelet HTML.Voi ajunge acolo. Răbdare, lăcustă.
Gestionarea unei cantități mari de cod de site este locul în care cred că Visual Studio strălucește cu adevărat. Am descarcat proiectul-cadru Addy Osmani si Sindre Sorhus "TodoMVC pentru ca este un set destul de mare de fisiere pentru a lucra cu. Pentru a suge pe site-ul, este la fel de simplu ca faci "File-> Open Web Site ..." și alegerea unui director:
Acest lucru îmi dă ceea ce se numește o "soluție", care vă ajută să organizați toate materialele pentru site-ul meu și le afișează într-un stil arborescent:
Una dintre cele mai bune caracteristici ale Solution Explorer este că pot căuta un anumit activ în întreaga soluție. Deci, dacă aș vrea să găsesc unde este jQuery, pot introduce doar termenul "jquery" și va afișa o listă cu toate directoarele și fișierele care îi corespund:
Editorul în sine are caracteristicile pe care le aștept de la un IDE, cu lucruri de bază ca numerele de linie și colapsul de cod la capacitatea de a lucra într-adevăr într-un mod de proiectare și de a pune cu ușurință fișierele în modul de ecran divizat. Un lucru care este un must-have pentru mine este o cunoaștere bună a codului, astfel încât, pe măsură ce creez codul, pot avea atributele prezentate. Este suficient de greu să vă amintiți toate sintaxele limbajelor de programare, deci un mic ajutor pentru a vă spune atributele este un Godsend. VS oferă acest lucru prin intermediul Intellisense, care acceptă acum HTML5, CSS3 și JavaScript.
Deci, nu numai că văd atributele disponibile pentru un element, dar, de asemenea, îmi arată metodele pe care le pot utiliza. Observați că în acest exemplu primesc Intellisense pentru elementul video HTML5. Nu sunt un avocat al codului inline, dar faptul că este acolo este încă foarte util.
Pentru CSS, veți obține în continuare Intellisense care include lista completă a proprietăților, pe lângă descrierea a ceea ce face fiecare:
Și odată ce ați selectat o proprietate, aceasta oferă sugestii de cod pentru a vă ajuta să vă amintiți cum să formatați declarațiile:
Desigur, împreună cu aceste caracteristici, VS are caracteristici inteligente pentru a face sarcini cum ar fi alegerea de culori triviale:
JavaScript și DOM au primit, de asemenea, dragoste în Visual Studio, fiind o limbă de primă clasă în IDE; nu mai multe pluginuri pentru a fi utilizabile. Din nou, cu accent pe Intellisense, VS oferă suport complet pentru obiectele, metodele și proprietățile JavaScript și DOM:
Suportul jQuery a fost inclus de ceva timp și suportul Intellisense pentru alte cadre populare poate fi găsit pe Internet. Și Visual Studio 2012 livrează acum cu jQuery Mobile pentru a permite dezvoltatorilor să construiască site-uri mobile.
Iată ceva ce nu ați știut. Visual Studio vă permite să testați nu numai fiecare browser important pe care l-ați instalat în sistemul dvs., dar oferă și un instrument numit Page Inspector care este similar cu instrumentele de depanare web găsite în majoritatea browserelor. Cu Page Inspector, puteți să vedeți pagina în timp real și să efectuați modificări live în CSS și DOM. Odată ce sunteți mulțumit de aceste modificări, le puteți salva înapoi în fișierele sursă. De exemplu, observați cum am modificat textul tweet-ului în următoarea imagine de ecran, actualizându-l în cadrul marcajului:
Beneficiul evident al acestui lucru este că nu trebuie să renunți la editorul dvs. pentru a testa pagina dvs. și pentru a efectua modificări. Și din moment ce schimbările se întâmplă în direct, este o chestiune simplă de a lua codul afectat și de a reveni în codul sursă. Acest lucru este posibil deoarece Visual Studio utilizează motorul de redare Trident al Internet Explorer, precum și o versiune integrată a Internet Information Server (IIS) pentru a vă permite să vă difuzați dinamic site-ul. Asta-i drept, Visual Studio se livrează cu un server web (și de ceva timp).
Acestea sunt fără îndoială caracteristici utile, dar fluxul de lucru al unui dezvoltator web este mult mai complex decât editarea doar a câtorva pagini sau stiluri CSS. Și sincer, multe dintre caracteristici sunt disponibile editorilor de cod, deși prin intermediul pluginurilor comunității.
Visual Studio a făcut JavaScript un limbaj de primă clasă.
Ceea ce cred că face Visual Studio un IDE excelent pentru dezvoltarea web este o extensie numită Web Essentials. Este piesa lipsă a unui mediu de codare solid, altfel, deoarece adaugă o serie de caracteristici esențiale. Această extensie extinde Visual Studio prin sprijinirea unor funcții precum:
Și mai sunt multe altele. Mads Kristensen, creatorul Web Essentials, a făcut o activitate stelară de a distila ceea ce dezvoltatorii web folosesc și aducă asta în extensia.
De exemplu, asigurarea compatibilității cu browser-ul este o parte esențială a locurilor de muncă, dar cu atâtea proprietăți pe care să le amintim, poate fi un pic cam descurajant să ne amintim de ce funcționează. Web Essentials vă ajută să vă permiteți să vedeți nivelul de suport al browserului pentru proprietățile CSS:
Și pentru a face un pas mai departe, vă va spune chiar și atunci când vă lipsesc prefixele furnizorilor, un aspect important pentru asigurarea faptului că site-ul dvs. funcționează în toate browserele majore:
Pe lângă faptul că vă permite să inserați prefixele furnizorilor pe baza preferințelor browserului dvs. țintă:
În timp ce acest lucru va adăuga doar prefixele furnizorilor lipsă pentru această proprietate specifică, Web Essentials include capacitatea de a face acest lucru pe o lățime mare a paginii și poate adăuga, de asemenea, versiunea nefixată a proprietății pentru a vă ajuta să vă protejați viitorul de codul.
Deoarece discutăm despre suportul browserului, suportul pentru suportul versiunilor mai vechi ale IE este un pic de drag și amintirea tuturor hack-urilor necesare pentru a face o pagină să facă bine este imposibilă. Da, Web Essentials oferă posibilitatea de a pune în hack-uri specifice pentru a vă face paginile să funcționeze corect:
Craniul și oasele încrucișate sunt destul de potrivite.
Preprocesoarele CSS sunt toate furioși și pe bună dreptate. Abilitatea de a face declarații variabile și de a crea mixuri în CSS este un beneficiu uriaș, mai ales când se gestionează foi de stil mari. LESS este una dintre cele mai populare soluții. De fapt, am făcut un sondaj în care LESS a fost unul dintre cele mai populare cadre în uz. Web Essentials aduce mai puțin la Visual Studio astfel încât, pe măsură ce scrieți, puteți vizualiza ieșirea CSS în timp real, printr-o fereastră de previzualizare:
Fereastra de previzualizare, împreună cu suportul editorului complet și abilitatea de a seta opțiunile de compilator, sunt un avantaj pentru dezvoltatorii care doresc să utilizeze Visual Studio și au nevoie de suport mai puțin.
Doar am zgâriat suprafața caracteristicilor Web Essentials CSS. Există atât de multă bogăție pentru acest articol.
Visual Studio este unul dintre cele mai bune IDE-uri disponibile.
După cum am menționat, Visual Studio a făcut JavaScript un limbaj de primă clasă. Unele nevoi critice de lucru lipsesc totuși, iar Web Essentials le completează. De exemplu, fiecare dezvoltator ar trebui să-și linteze codul JavaScript. Este doar o bună practică și ajută la prevenirea erorilor de limbă comune. JSHint este o foarte populară platformă de JSLint creată de Anton Kovalyov și este folosită extensiv de către dezvoltatori pentru analizarea codului lor pentru posibile probleme. Web Essentials include JSHint, permițându-vă să vă scuturăți codul în orice moment. Acesta poate fi, de asemenea, configurat să scape tot codul dvs. la momentul construirii.
Deoarece am menționat timpul de construire, Web Essentials include, de asemenea, capacitatea de a minifiia fișierelor dvs. în orice moment. Dar este nevoie de un pas mai departe prin actualizarea fișierelor miniaturate atunci când fișierul sursă original este actualizat și creează, de asemenea, o hartă sursă pentru a ajuta la depanarea ulterioară.
Mulți dezvoltatori folosesc limbi specifice domeniului, cum ar fi CoffeeScript și TypeScript. Pentru unii, limbajul pronunțat al lui CoffeeScript îl face extrem de atractiv în comparație cu codarea în JavaScript simplu. Ei bine, acei dezvoltatori pot fi constienti de VS gratie Web Essentials. Mads a adăugat suport pentru ambele DSL-uri, adăugând un suport de previzualizare similar pe care l-am menționat anterior despre LESS. Pe măsură ce tastați codul TypeScript sau CoffeeScript, puteți vedea JavaScript-ul rezultat în timp real. Iar odată ce sunteți setați, Web Essentials poate miniat codul pentru dvs.:
Mads a adăugat și caracteristici HTML clare. Dacă sunteți în Zen Coding (întotdeauna mi sa părut puțin ciudat), atunci Web Essentials v-ați acoperit. Dacă scriu asta în VS și apasă tasta Tab:
div # contentRegion.address
Voi primi următorul cod:
E foarte cool. Nu este ceaiul meu de ceai, dar cool totuși.
Și în timp ce era acolo, el a adăugat suport pentru motoarele de template-uri de la client, cum ar fi Handlebars & JSRender, Markdown și un generator Lorem Ipsum.
Încep să mă întreb dacă Mads doarme.
Sper că am arătat că Visual Studio are un suport foarte bun pentru HTML, CSS și JavaScript. Echipa de la Microsoft a muncit din greu pentru a deveni un IDE de clasă mondială pentru dezvoltatorii web. Pentru mine, elementul esențial care o face alegerea mea pentru dezvoltarea web este extensia Web Essentials. Îmi oferă acel extra bit de funcționalitate de care am nevoie pentru a-mi gestiona fluxul de lucru. Sigur, fiecare dezvoltator are nevoi diferite și nu pretinz că am abordat toate ale tale. Sper, totuși, că am subliniat și am demonstrat suficiente trăsături pentru a arăta că VS este mai mult decât capabil de dezvoltarea web.
Accentsconagua