Codul Visual Studio poate face asta?

În urmă cu aproximativ doi ani, am deschis pentru prima dată Visual Studio Code (VS Code). Singurul motiv pentru care am făcut acest lucru este că lucram la un proiect TypeScript (de asemenea, destul de neplăcut) și m-am săturat să mă lupt cu editorul și compilatorul și cu toate setările de care aveam nevoie pentru ca un proiect TypeScript să funcționeze. Cineva mi-a menționat că TypeScript „funcționează doar” în VS Code și am fost plăcut surprins să constat că au dreptate.

Ma asteptam insa la asta. VS Code este de la Microsoft, așa că este de așteptat ca TypeScript să funcționeze. Ceea ce nu mă așteptam a fost că practic tot ceea ce trebuia să fac în VS Code „a funcționat” și. Și vreau să spun orice . În timp ce acest articol se concentrează în primul rând pe funcțiile pentru web, precum și pe dezvoltatorii JavaScript, VS Code are integrări cu Go, Python, Java și Ruby - pentru a numi doar câteva.

În următoarele câteva luni, am început să descopăr lucruri în VS Code pe care le-am găsit remarcabile. Am făcut trecerea oficială la VS Code și de atunci nu m-am uitat înapoi. De-a lungul lunilor, am alcătuit o listă cu sfaturile, trucurile și extensiile mele preferate pentru VS Code, care ar putea să vă lase cu aceeași reacție pe care am avut-o și am în continuare: „VS Code poate face asta?!”

Loc de joacă interactiv

Una dintre cele mai bune modalități de a învăța dezavantajele VS Code este să treci prin Locul de joacă interactiv.

Aceasta este o pagină specială care parcurge comenzile rapide comune de la tastatură și concepte precum cursoare multiple, panouri divizate și comenzi rapide de la tastatură. Fiecare dintre exemple este interactiv, astfel încât să puteți exersa tutorialele chiar în cadrul tutorialelor în sine.

Tutorialul interactiv este chiar pe pagina „Bun venit” atunci când editorul este deschis pentru prima dată:

Mulți oameni (inclusiv eu) îl dor cu totul, deoarece este sub „fold” și în partea de jos a paginii. În plus, cine citește ecranele de bun venit?

Notă : Puteți reveni oricând la Tutorialul interactiv, deschizând paleta de comenzi VS Code Ctrl/Cmd + Shift + P și selectând „Teren de joacă interactiv”.

Acum că ați stăpânit elementele de bază, veți avea nevoie de un font la fel de frumos ca și codul pe care urmează să-l scrieți. Pentru asta, nu căutați mai departe decât FiraCode și Font Ligatures.

Ligaturi de font

Ligăturile de fonturi sunt fonturi care conțin caractere speciale care sunt folosite pentru a reprezenta simboluri care constau din mai multe caractere. Avem multe dintre acestea în programare. Acestea ar fi caractere precum <= , >= , == și === .

FiraCode este o ligatură minunată de font pentru VS Code. Mai întâi, descărcați fontul FiraCode de pe GitHub și adăugați-l la fonturile mașinii dvs. Apoi adăugați următoarele linii în fișierul dvs. de preferințe utilizator Ctrl/Cmd + , .

 "editor.fontFamily": "Fira Code", "editor.fontLigatures": true 

Încercați câteva dintre personajele speciale pe care le-am enumerat mai sus pentru a vedea diferența. Ligăturile fonturilor apar în locuri la care nu te-ai aștepta în mod normal. Locații precum www și && . Haide, încearcă și vezi ce descoperi!

Acum că aveți o ligătură frumoasă de font și câteva simboluri noi încântătoare, este timpul să valorificați acea memorie musculară pe care ați acumulat-o de-a lungul anilor în editorii anterioare instalând un Keyboard Mapping.

Mapările tastaturii

O parte din ezitarea mea în a trece la VS Code a fost că am investit o oarecare cantitate de frustrare și efort pentru a învăța comenzile rapide de la tastatură ale Sublime Text. De asemenea, eram puțin mândru de priceperea mea la tastatură și nu eram deloc gata să renunț la asta.

Din fericire, nu a trebuit.

VS Code are ceva numit Keymaps . Acestea sunt extensii care mapează toate comenzile rapide (ei bine, aproape toate) către alți editori. Există hărți de taste pentru toți editorii populari, inclusiv Sublime, Atom, Emacs și chiar Eclipse!

Pentru a instala o hartă de taste, deschideți bara de căutare a extensiilor apăsând Ctrl/Cmd + K → Ctrl/Cmd + X . Apoi căutați „keymap”.

Ar trebui să rețin că de atunci am eliminat Sublime Keymap. După o utilizare suficientă, am reușit să-mi rebranșez creierul pentru a merge cu comenzile rapide VS Code pe măsură ce ies din cutie. Gândiți-vă la hărțile de taste ca la roți de antrenament: acestea sunt o idee bună atunci când sunteți la început, dar la un moment dat, probabil că doriți să le eliminați.

Acum, dacă sunteți ca mine, aveți mai multe computere și puteți edita în locuri diferite, în funcție de proiect și de zi. Am făcut deja o grămadă de modificări la configurația noastră VS Code și vom face o mulțime mai multe. Nu vrem să repetăm ​​această configurație oriunde folosim VS Code. Aici intervine extensia Settings Sync.

Sincronizare setări

Cu extensia Settings Sync, puteți exporta toate setările VS Code într-un Gist, apoi le puteți trage pe toate în jos dintr-o altă instalare VS Code și le puteți aplica imediat.

Aceasta este, de asemenea, o modalitate bună de a vă împărtăși configurația cu colegii. Doar trimiteți-le ID-ul la Gist-ul dvs. și vă pot sincroniza toate setările cu instalarea lor. Unele magazine păstrează o idee centrală, iar toți dezvoltatorii noi din echipă pot obține configurația exactă cu o singură comandă. Asta este productivitatea!

Și vorbind despre productivitate, să intrăm direct în unul dintre instrumentele mele preferate de productivitate pentru dezvoltatorii web: Emmet.

Emmet

Emmet este un instrument popular de extindere pentru marcaj și CSS, care există de ceva timp. Cu toate acestea, întâlnesc aproape în fiecare zi oameni care fie nu au auzit de asta, fie sunt noi în dezvoltare și doar învață despre asta. Asta e ok! Cu toții învățăm lucruri diferite în momente diferite.

Emmet este introdus în VS Code, așa că nu este necesar un efort suplimentar pentru a-l pune în funcțiune. Pur și simplu începe să tastați sintaxa Emmet într-un fișier HTML sau CSS și lăsați editorul să facă restul. În mod implicit, VS Code vă va afișa chiar și o previzualizare a viitoarei expansiuni Emmet.

Un truc bun de folosit cu Emmet este să mapați o comandă rapidă de la tastatură ( Ctrl/Cmd + K → Ctr/Cmd + S deschide mapările tastaturii) la comanda „Încheiere linii individuale cu abreviere”. Acest lucru este asemănător cu vechiul „Wrap Selection As Link” de la Textmate, dar cu avantajul suplimentar de a putea încheia mai multe linii simultan, cu o expansiune mai complexă.

Emmet poate fi folosit și în fișierele markdown, JSX și .vue . Pentru a le activa, adăugați maparea corectă a limbii în fișierul dvs. de preferințe utilizator Ctrl/Cmd + , .

 "emmet.includeLanguages": { "javascript": "javascriptreact", "markdown": "html" },

În cazul JSX, Emmet este suficient de inteligent pentru a folosi className în loc de class în interiorul expansiunii.

O altă caracteristică bună a lui Emmet, care a fost nouă pentru mine, este capacitatea lui Emmet de a furniza automat lățimea și înălțimea imaginii doar privind fișierul imagine legat în src . Aceasta funcționează în HTML și CSS. De asemenea, funcționează atât cu imagini găzduite local în proiect, cât și cu imagini de pe alte URL-uri. Pentru a utiliza această caracteristică, plasați cursorul în eticheta imaginii, deschideți paleta de comenzi Ctrl/Cmd + Shift + P și selectați „Actualizați dimensiunea imaginii”. Magie!

Pentru o scufundare mai profundă în ceea ce este Emmet și toate modalitățile diferite de a-l folosi în VS Code, consultați acest articol CSS Tricks.

În timp ce Emmet se ocupă de productivitatea în markup și CSS, VS Code însuși oferă completarea codului sub formă de intellisense; și funcționează în locuri la care s-ar putea să nu vă așteptați.

Intellisense în fișiere JSON

Intellisense este o caracteristică de editor destul de cunoscută, dar este gândită în primul rând doar în interiorul fișierelor de cod. VS Code extinde definiția clasică a intellisense și o adaugă și la fișierele JSON. Veți vedea acest lucru dacă adăugați orice setări în fișierul dvs. de preferințe utilizator. VS Code oferă intellisense și pentru fișierele package.json . Ceea ce este și mai impresionant este că oferă intellisense pachetelor package.json din interiorul pachetului.json . Aveți nevoie de un pachet specific și nu vă amintiți versiunea? Nici o problemă! VS Code va analiza npm și va returna cea mai recentă versiune în intellisense.

Unii oameni au remarcat că nu își editează manual fișierul package.json . Cu toate acestea, mă trezesc că o fac din când în când dintr-un motiv ciudat sau altul, iar nevoia de a căuta versiunea pachetului a fost întotdeauna o durere uriașă pentru mine. Acum mi-a fost oferit doar de VS Code. Un lucru mai puțin trebuie să ghicesc.

Chiar și cu Intellisense, acesta este JavaScript, așa că dacă nu suntem super curajoși (sau dependenți de suferință), vom avea nevoie de un linter. VS Code are o integrare excelentă cu ESLint prin extensia ESLint, dar există și alte opțiuni și implică verificarea tipului de JavaScript netipizat.

Tastați Verificați JavaScript

Îți amintești de acea integrare excelentă TypeScript despre care ți-am spus mai devreme? Unul dintre trucurile puțin cunoscute este că puteți utiliza compilatorul TypeScript pentru a verifica și fișierele JavaScript simple. Faceți acest lucru adăugând un //@ts-check în partea de sus a oricărui fișier JavaScript și veți primi imediat verificarea erorilor TypeScript pe fișier.

Nu ați dori să adăugați acea linie la fiecare fișier, așa că puteți utiliza TypeScript pentru a verifica fiecare fișier JavaScript din proiectul dvs., adăugând următoarea linie la fișierul Preferințe utilizator Ctrl/Cmd + , .

 "javascript.implicitProjectConfig.checkJs": true

Dacă doriți să controlați anumite caracteristici de verificare ale TypeScript, trebuie doar să aruncați un fișier .tsconfig în proiectul dvs. Când spun TypeScript „doar funcționează” în VS Code, vreau să spun că funcționează atât de bine încât este aproape fără probleme pentru dezvoltator.

Acum că aveți coduri și chiar verificați tipul atunci când aveți nevoie, este timpul să lăsați VS Code să se ocupe de acele probleme de formatare plictisitoare folosind Prettier.

Mai frumos

Prettier este un minunat instrument de formatare a codului open-source. Este utilizat pe scară largă de echipe (și indivizi) pentru a se asigura că stilurile de codare sunt universale pentru proiecte și dezvoltatori. Îți reformatează automat codul pentru a se potrivi cu unele standarde definite, cum ar fi pe ce coloană să încapsulezi codul, cum să formatezi promisiunile și dacă să folosești ghilimele simple sau duble.

Prettier este activat în VS Code cu extensia Prettier. Pentru a-l instala, deschideți panoul Extensii Ctrl/Cmd + K → Ctrl/Cmd + X și căutați „mai frumos”.

Odată instalat, veți vedea Prettier în bara de activități pentru orice fișier pe care Prettier știe să îl formateze. Puteți invoca Prettier pe fișier utilizând comanda „Format document”: Alt/Option + Shift + F .

Un truc frumos aici (și prezentat în videoclipul de mai sus) este să setați VS Code să se formateze automat la salvare. Acest lucru va invoca Prettier ori de câte ori fișierul este salvat. Pentru a obține această funcționalitate, adăugați următoarele setări în fișierul Preferințe utilizator ( Ctrl/Cmd ).

 "editor.formatOnSave": true

Setările mai frumoase pot fi modificate și din fișierul Preferințe utilizator. Dacă doriți ca Prettier să folosească configurația dvs. ESLint pentru setări, trebuie doar să specificați setarea „eslintIntegration”.

 "prettier.singleQuote": true, "prettier.eslintIntegration": true, "prettier.tabWidth": 2

Uită-te ce frumos este codul tău acum! Frumoasa. Nu veți mai dori niciodată să vă părăsiți editorul. Datorită opțiunilor terminale din VS Code, s-ar putea să nu fie nevoie să o faceți niciodată!

Acces terminal

Poate ați observat din videoclipul de mai sus că VS Code are un terminal integrat. Îl puteți lansa apăsând Ctrl + , . Pot fi deschise mai multe sesiuni de terminal și vor apărea în lista derulantă din partea dreaptă sus a ferestrei terminalului.

Mi-a fost greu să-mi rup obiceiul pe terminalul încorporat pe Mac. Puteți deschide oricând terminalul extern din VS Code în locația exactă a fișierului pe care îl vizualizați în prezent, utilizând comanda rapidă de la tastatură Ctrl/Cmd + Shift + C .

Lăsând deoparte trucurile stupide ale terminalelor, unul dintre cele mai importante lucruri pe care le poate face un dezvoltator pentru a-și crește productivitatea este să colaboreze pur și simplu cu alți dezvoltatori. Facem asta tot timpul. Unii dintre noi sunt destul de norocoși să stea unul lângă altul. Unii dintre noi o fac prin Skype. Indiferent de modul în care împerechezi programul, VS Code tocmai a adăugat o funcție care probabil va schimba modul în care te gândești la modul în care colaborezi.

Live Share

VS Code Live Share tocmai a fost anunțat săptămâna trecută la Microsoft Connect. Permite mai multor dezvoltatori să se împerecheze într-un proiect instantaneu. Nu este necesar să verificați codul într-un depozit sau să activați un instrument de partajare a ecranului. Alți dezvoltatori vă pot încărca imediat proiectul în editorul lor și vă pot vedea cursorul în timp real, fără a fi nevoie să configureze nimic din partea lor.

Acest lucru funcționează și pentru depanare. Dacă începeți o sesiune de depanare, cealaltă persoană beneficiază de aceeași experiență completă de depanare chiar în editorul său. Ei pot controla chiar și procesul de depanare prin intrarea, ieșirea și peste cod. Dacă cealaltă persoană îți modifică codul, acesta se schimbă și în editorul tău. Este foarte greu să-ți faci capul până când îl vezi în acțiune. Recomand cu caldura vizionarea acestui scurt demo. Încă nu sunt sigur cum am reușit atât de mult timp ca dezvoltatori fără o funcție ca aceasta.

La momentul scrierii acestui articol, partajarea VS Code Live este în previzualizare, dar va fi probabil disponibilă în general până când veți citi aceasta. De fapt, s-ar putea să-l folosești deja!

Acum că colegii tăi ți-au remediat cu succes toate erorile (ura pentru colaborare!), este timpul să le verifici pe toate în GitHub. Una dintre caracteristicile mele preferate ale VS Code este că integrarea Git este atât de bună, încât chiar și eu pot folosi Github.

Integrare Git

De asemenea, îmi este greu cu Git pe terminal pentru că este o cutie neagră. Zburați orb în afara editorului dvs. doar cu abilitățile dvs. de terminal și cunoștințele despre Git CLI pentru a vă ajuta să treceți. Acest lucru poate fi suficient pentru unii oameni, dar am ajuns să mă bazez foarte mult pe integrarea vizuală Git care este furnizată cu VS Code.

VS Code preia automat orice configurație Git din proiectul dvs. Există o filă întreagă dedicată doar opțiunilor Git. Din cutie, VS Code acceptă adăugarea, comiterea și împingerea, ramificarea, ascunderea și poppingul, printre o mulțime de alte opțiuni. Când vizualizați fișiere în fila Git, obțineți o comparație una lângă alta între original și diferență. De asemenea, acum puteți vizualiza diferențele direct în linie într-un fișier de cod și puteți chiar să reveniți și de acolo.

Până acum ne-am concentrat foarte mult pe editarea textului în sine, dar VS Code este remarcabil de potrivit pentru o ridicare mult mai grea; genul de lucruri pe care le așteptăm în mod normal de la un mediu de dezvoltare integrat (IDE), nu de la un editor de text. Iată câteva dintre preferatele mele.

Zero Configuration Node.js Run And Debug

VS Code va rula și va atașa un depanator la orice cod JavaScript fără nicio extensie sau configurație. Pur și simplu apăsați tasta F5 și selectați „Nod” din lista verticală. De asemenea, puteți comuta la fila de depanare Ctrl/Cmd + Shift + D și faceți clic pe butonul săgeată verde sus. Aceasta va lansa aplicația dvs. și va atașa depanatorul, oferind o experiență de depanare completă.

Puncte de întrerupere a coloanei

VS Code acceptă, de asemenea, puncte de întrerupere inline sau pe coloană. Acesta este momentul în care setați un punct de întrerupere în mijlocul unei linii de cod. Acest lucru este util în special pentru depanarea lanțurilor de promisiune și în orice alte locuri în care aveți mai multe funcții pe o singură linie.

Doar faceți clic dreapta în timpul unei sesiuni de depanare și alegeți „Adăugați punct de întrerupere a coloanei”.

Creați, rulați, depanați și implementați Docker

Microsoft oferă o extensie Docker pentru VS Code care vă va permite să efectuați practic toate acțiunile dvs. Docker în VS Code. De fapt, VS Code va crea automat fișierele Docker necesare pentru proiectul dvs. (în măsura în care poate) în funcție de timpul de execuție pe care îl alegeți și de structura proiectului. Pentru aplicațiile simple Node.js, aceasta înseamnă o configurare Docker fără configurație.

În acest exemplu, iau o aplicație Express și folosesc VS Code pentru a crea toate fișierele de compunere Docker și Docker. VS Code creează, de asemenea, configurația de depanare adecvată, așa că după ce rulez imaginea pot atașa depanatorul VS Code și totul funcționează pur și simplu. Extensia permite, de asemenea, publicarea imaginii dvs. fie în Docker Hub, fie în Azure Container Registry.

Configurații de lansare compuse

În timp ce instrumentele de construcție precum Webpack au schimbat complet modul în care construim aplicații, ele au introdus și noi provocări de dezvoltare care nu existau înainte. Webpack își folosește propriul server de dezvoltare în memorie pentru a oferi „reîncărcări la cald”, dar când treceți la producție, Webpack iese din ecuație și serverul dumneavoastră preia controlul.

Practic, acum este necesar să rulați ca două proiecte separate în dezvoltare și un proiect în producție. Aceasta înseamnă că de obicei depanăm aplicațiile front-end în browser cu Chrome DevTools și porțiunea de server din editorul nostru de text.

VS Code are capacitatea de a lansa mai multe procese și de a atașa dispozitive de depanare la ambele dintr-o singură comandă de lansare. Aceasta înseamnă că este posibil să depanați codul JavaScript front-end și codul Node.js pe partea serverului direct din VS Code.

Aceasta se numește „Configurație de lansare compusă”. În videoclipul de mai sus, folosesc următorul cod pentru a depana o aplicație care utilizează Express/Cosmos DB pentru backend și React pentru front end.

 { "compounds": [ { "name": "Launch Browser/Server", "configurations": ["Launch Browser", "Launch Server"] } ], "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Browser", "url": "https://localhost:3000", "webRoot": "${workspaceRoot}/src" }, { "type": "node", "request": "launch", "name": "Launch Server", "program": "${workspaceRoot}/server/server.js" } ] }

Rețineți că aceasta necesită instalarea extensiei Chrome Debugger. Administrare MongoDB

Administrare MongoDB

VS Code vă poate ajuta să administrați vizual și să interogați orice bază de date MongoDB sau Cosmos DB (locală sau la distanță) folosind extensia Cosmos DB.

Extensia Cosmos DB se va conecta la orice instanță Cosmos DB existente în Azure, dar se va conecta și la orice instanță MongoDB care este accesibilă cu o adresă URL mongodb:// .

Puteți să creați și să plasați baze de date și colecții în bara laterală, precum și să creați și să lucrați cu MongoDB Scrapbooks pentru a vă testa interogările. VS Code oferă intellisense complet pentru colecții și API-ul MongoDB în Mongo Scrapbooks. Puteți chiar să modificați rezultatul interogării dvs. în panoul de rezultate, iar modificările vor fi continuate înapoi în baza de date.

Implementarea aplicațiilor

O altă extensie bună pentru VS Code este extensia Azure AppService. Dacă doriți să vă implementați aplicațiile în cloud, puteți face asta fără a părăsi editorul.

Microsoft oferă o extensie numită AppService Tools pentru VS Code, care vă va permite să creați site-uri noi, să gestionați pe cele existente și să implementați codul dvs. fie cu un clic dreapta, fie cu un script shell pre-construit, care automatizează procesul de verificare a codului în Git potrivit. punctul final pentru a configura livrarea continuă.

Da, VS Code poate face asta

Până acum, probabil că ați prins tema că VS Code nu poate face nimic. Dacă doriți o anumită funcționalitate, este foarte probabil ca fie editorul să o accepte deja (nu am atins nici măcar de integrarea Git) sau cineva să fi creat o extensie pentru oricare ar fi cazul dumneavoastră de utilizare specific. Chiar dacă asta transformă Markdown în prezentări Reveal.js!

Resurse aditionale

• „VS Code Insiders Build”, Visual Studio Code, Microsoft
• „VS Code Awesome List”, Valerii Iatsko, GitHub
• „VS Code Tips And Tricks”, Valerii Iatsko, GitHub