16 Cele mai bune extensii de cod VS pentru dezvoltatori web

Microsoft Visual Studio Code (VS Code) este unul dintre editorii de cod de top pentru dezvoltatorii de software. De la lansare, popularitatea sa a crescut nu numai datorită platformei stabile pe care o oferă, ci și datorită naturii extensibile pe care Microsoft a încorporat-o. Piața extensiilor este o corupție de suplimente și caracteristici care le permite dezvoltatorilor să personalizeze codul VS în mediul de dezvoltare al viselor lor. Vrem să descompunem unele dintre cele mai importante extensii de cod VS disponibile astăzi, astfel încât să nu ratați niciuna.

1. Sublime Text Keymap and Importer Setări

În partea de sus a listei noastre este numit în mod adecvat Sublime Text Keymap and Settings Importer. În cazul în care titlul nu a fost suficient de descriptiv, această extensie vă permite să introduceți tastele și setările existente ale textului Sublim, astfel încât să puteți trece fără probleme la utilizarea codului VS ca implicit. Întrucât atât de mulți oameni iubesc Sublimul și au petrecut ani de zile în el, a face ca VS Code să păstreze memoria musculară câștigată de la acel editor are mult sens.

2. Fragmente de cod JavaScript (ES6)

Tastarea JavaScript (sau orice cod) poate deveni greoaie atunci când repetați aceleași fragmente de mai multe ori. Această extensie vă ajută să vă scutiți, permițându-vă în principiu să scrieți comenzi rapide pentru fragmente de cod des utilizate. Când este declanșat, fragmentul pur și simplu înlocuiește textul și îl introduce direct în document.

3. Colorizer pereche suport 2

Indiferent de limba pe care o codificați, parantezele vor fi probabil o parte importantă a acesteia. Și păstrarea lor dreaptă poate fi o durere de cap. Dar, cu această extensie VS Code, puteți colora codul perechilor potrivite pentru a ușura acel punct de durere și a lucra la funcționarea codului în sine - nu la editor.

4. ESLint

În multe feluri, ESLint este Linter pentru JavaScript. Preluarea erorilor și oferirea de feedback și avertismente imediate este esențială pentru a menține codul echipei dvs. curat și într-adevăr nu există o modalitate mai bună de a face acest lucru în JS decât ESLint. Vă recomandăm să îl instalați cât mai curând posibil.

5. Manager de proiect

O problemă cu codul VS care apare destul de des este modul de a schimba între diferite proiecte. În mod implicit, fluxul nu este tocmai cel mai intuitiv. Așadar, Managerul de proiect lucrează pentru a remedia problema, oferindu-vă un meniu în bara laterală pe care îl puteți utiliza pentru a salva diferite foldere și proiecte Git pentru a le schimba cu ușurință. Aceasta nu este atât o îmbunătățire a editorului, cât este o lovitură a calității vieții.

6. Previzualizare browser

Unul dintre elementele mai dezgustătoare ale dezvoltării web este încărcarea și reîmprospătarea conținutului în diferite browsere pentru testare. Previzualizarea browserului vă ajută să limitați suma de care aveți nevoie pentru a face acest lucru, oferindu-vă o previzualizare solidă a activității dvs. în cadrul VS Code în sine, într-un nou proces Chrome.

7. Mai frumoasă

Cu toții ne dorim un cod mai frumos. Deci, probabil ar trebui să instalăm cu toții Prettier pentru a face față asta. Descrierea descrie Prettier ca un „formatator de cod opinionat, aplică un stil consistent analizând codul și reimprimându-l cu propriile reguli care iau în considerare lungimea maximă a liniei, împachetând codul atunci când este necesar”. S-ar putea să nu doriți să-l utilizați pentru fiecare limbă sau proiect, așa că există o mulțime de setări de configurații, astfel încât să o puteți personaliza după bunul plac.

8. gitlink

Ne place gitlink datorită simplității sale. Deși există o mulțime de extensii Git acolo, unul dintre lucrurile despre gitlink este că este simplu și face doar un singur lucru. Și o face bine. Evidențiați doar un fragment de cod, iar gitlink vă va duce apoi la repoarea online pentru acel fragment particular. Este incredibil de util să mergeți rapid la repo, indiferent unde este găzduit de la distanță.

9. Comentarii mai bune

Comentariul codului dvs. este unul dintre cele mai importante obiceiuri pe care le poate avea un dezvoltator. Chiar mai mult decât atât, comentand codul de bine este o abilitate care ar trebui să fie predate în fiecare clasă de informatică și codificare Bootcamp acolo. Acestea fiind spuse, Better Comments este una dintre acele extensii de cod VS de care toată lumea are nevoie, deoarece vă va permite, dacă credeți numele, să lăsați comentarii mai bune în codul dvs. Cu comenzi rapide care vă permit să faceți diferența între întrebări, exclamații, cod comentat, interogări, alerte, evidențieri și TODO, această extensie nu numai că vă va ușura viața, ci va ușura viața echipei dvs. Și orice dezvoltator care vine după tine la proiect. Nu putem recomanda acest lucru suficient.

10. Pictogramele codului VS

O parte majoră a personalizării codului VS cu extensii este personalizarea reală. Nu doar modificări de funcționalitate. Cu pictogramele VS Code, editorul devine puțin mai colorat și mai ușor de navigat. Sistemul de fișiere este jupuit cu pictograme care reprezintă diferite tipuri de fișiere și acestea apar în explorator, precum și în filele documentului. Îți face mult mai ușor să lucrezi prin sisteme de fișiere complicate și să faci mai puțin dureri de cap. Literal uneori. Pictogramele fiind atât de ușor de citit previn obosirea ochilor și, prin urmare, durerile de cap. Deci, pentru sănătatea dvs., instalați pictogramele codului VS.

11. Etichetă de închidere automată

Poate că suntem noi, dar introducerea etichetelor de închidere pentru orice limbă devine o astfel de corvoadă. Există doar ceva despre adăugarea acelui / în final care face ca tastele să se simtă puțin dezactivate. Nu vă temeți niciodată. Eticheta de închidere automată ne-a ușurat viața. Așa că vrem să vă ușurăm. Este simplu și ușor și puteți continua să tastați între ele și pur și simplu apăsați tasta spre linia următoare sau la sfârșitul aceleia. Instalați acest lucru și lăsați-vă degetele să se rupă de gimnastica de închidere a etichetelor manual.

12. colorează

CSS este minunat. Alegerea culorilor în CSS nu este. Când aveți de-a face cu coduri hex și valori RGBA, uneori este greu să obțineți o imagine mentală a paletei pe care ați setat-o ​​pentru un site. Această extensie vă ajută să atenuați acest lucru, oferind o notă vizuală pentru orice coduri de culoare pe care le utilizați în fișierele dvs. Puteți vedea culorile pe care le utilizați în interiorul textului în sine ca un punct culminant, astfel încât să nu trebuie să schimbați în mod constant înainte și înapoi de la mostre și selectoare de culoare și așa mai departe.

13. Polacod

Polacode este ca o cameră Polaroid pentru editorul de cod. Conceput pentru a face instantanee codul mai curat și mai ușor, acesta este un lucru obligatoriu pentru toți scriitorii de tutoriale care doresc ca codul lor să fie corect.

14. GitLens

Este greu să explici pe deplin ceea ce face GitLens atât de grozav. Funcționează ca și cum Git și VS Code ar fi concepute unul cu celălalt în minte și, în loc să lucreze prin ierarhii de linie de comandă, veți obține vizualizări și perspective care elimină o mulțime de confuzie din munca Git a echipei. Puteți vizualiza lucrurile prin intermediul cursorului, puteți vedea modificările și adnotările recente, vizualizările de comparație în cadrul VS Code în sine, hărțile de căldură, istoricul liniilor și multe altele. Este practic extensia Git perfectă și credem că ar trebui să o instalați imediat.

15. Server live

Ați dorit vreodată să lansați un server local de dezvoltare din IDE și să lucrați la el în timp real? Indiferent de modul în care ați răspuns la această întrebare, veți dori să încercați Live Server. Pentru că tocmai asta poți face cu el. Deși s-ar putea să nu elimine complet nevoia de produse precum Local by Flywheel și MAMP, cu siguranță reduce necesitatea lor în multe situații.

16. Înfrumusețează

Beautify folosește popularul js-beautify pentru a păstra JavaScript-ul dvs. frumos și ordonat. Nu vă faceți griji cu privire la liniile rupte și la distanțarea ciudată și la indentări. Doar faceți clic pe un buton și tot codul dvs. va fi gata pentru prim-planul său (poate cu Polacode de sus).

Concluzie

Această listă poate avea o lungime de mii de articole. De fapt, sunt probabil unii dintre voi care au instalate sute de extensii diferite pe care le activați și le dezactivați în momente diferite. Dar considerăm că acestea sunt extensiile de cod VS pe care le puteți instala și apoi aflați ce mai doriți în timp ce vă adânciți piața.

Care sunt extensiile dvs. de cod VS? Spuneți-ne în comentarii!

Imagine prezentată de articol de către SVIATLANA SHEINA / shutterstock.com