Extensii VS Code utile pentru dezvoltatorii front-end

Petrecem atât de mult timp în editorii noștri de text și, din când în când, întâlnim acele mici probleme frustrante care ne încetinesc. Poate că găsirea fișierului potrivit durează prea mult, sau găsirea unui parantez de închidere potrivit devine o aventură îndelungată de la sine.

Să reparăm definitiv toate aceste supărări. În această postare, ne uităm la extensiile VS Code utile pentru dezvoltarea front-end , de la amplificatoare de productivitate fine la ajutoare avansate de depanare.

Cuprins

Mai jos veți găsi salturi rapide la anumite extensii de care ați putea avea nevoie. Derulați în jos pentru o prezentare generală. Sau sări peste cuprinsul.

• automatizarea mesajelor de jurnal
• dimensiunea pachetului
• formatarea codului
• capturi de ecran de cod
• fragmente de cod (React, Vue, TypeScript)
• fragmente personalizate
• comentarii
• depanare
• DevTools
• fișier utils
• etichete de fișiere și etichete
• pictogramele folderului
• fonturi pentru codare
• Git
• Istoria Git
• evidențiați adnotările
• evidențiați paranteze și etichete
• evidențiază caracterele dăunătoare
• evidențiați liniuțe
• evidențiați contextele de stivuire
• evidențiați spațiile de lucru
• IntelliCode
• la imbarcare
• deschide GitHub rapid
• animale de companie
• prototipare rapidă JS/TS
• acces SSH la distanță
• Sass compilație
• Sfaturi și trucuri

Automatizarea mesajelor de jurnal

Când vine vorba de mesaje de jurnal, extensia turbo-console-log vă ajută. Automatizează operațiunea de scriere a mesajelor de jurnal semnificative și le inserează automat.

Tot ce trebuie să faceți este să selectați variabila pe care doriți să o depanați, să apăsați Ctrl + Alt + L și mesajul de jurnal va fi inserat în linia următoare. Comenzile rapide de la tastatură vă permit să comentați, să anulați comentariile sau să ștergeți toate mesajele de jurnal din documentul curent.

Păstrează dimensiunea pachetului sub control

Știm cu toții că performanța contează, dar, în practică, poate fi o provocare să nu o pierzi din vedere atunci când ești în fluxul de scriere a codului. Pentru a vă menține sub control dimensiunea pachetului, extensia Costul importului vă permite să știți imediat dacă importați un pachet voluminos în proiect.

Costul de import nu este un instrument de analiză a pachetului, dar a fost creat cu ideea de a vă ajuta să găsiți posibile blocaje de performanță înainte de a le livra utilizatorilor dvs. Pentru a face acest lucru, vă oferă feedback instantaneu, afișând dimensiunea unei biblioteci terțe importate pe măsură ce o importați, chiar lângă linia dvs. de cod. Un mic ajutor la îndemână.

Formatarea codului, automată

Când scrieți codul, se trece mult timp în formatare. Prettier automatizează sarcina pentru tine. Îndepărtează toate stilurile originale și se asigură că codul rezultat este conform unui stil consecvent.

Prettier vă analizează codul și îl re-formatează cu propriile reguli , ținând cont de lungimea maximă a liniei și împachetând codul atunci când este necesar. Tu decideți dacă doriți să îl aplicați în toate limbile sau, alternativ, le puteți defini pe cele pe care preferați să le formatați manual. De asemenea, o soluție excelentă pentru echipele care se chinuie să găsească un ghid de stil comun.

Fragmente de cod utile (React, Vue, TypeScript, jQuery)

Te-ai săturat să tastezi din nou și din nou fragmentele de care ai nevoie frecvent, mereu de la zero? Iată câțiva mici ajutoare la îndemână pentru a ușura treaba. Pentru Vue, asigurați-vă că verificați extensia Vue.js VS Code Snippets de la Sarah Drasner. A fost construit pentru utilizare în lumea reală și se concentrează pe ergonomia dezvoltatorului în loc de catalogarea definițiilor API.

Burke Holland vă oferă o colecție de fragmente și comenzi React esențiale pe care le-a selectat din utilizarea lui de zi cu zi React. Și dacă sunteți în căutarea unor fragmente Angular, John Papa vă acoperă. Extensia sa adaugă fragmente pentru Angular pentru TypeScript și HTML la configurarea VS Code.

Aceste două ar putea fi, de asemenea, utile: extensia pentru fragmente de cod JavaScript de la Charalampos Karypidis conține fragmente în sintaxa ES6 și acceptă atât JavaScript, cât și TypeScript. Și, nu în ultimul rând, fragmentele de cod jQuery ale lui Don Jayamanne prezintă peste 130 de fragmente jQuery. Odată instalat, trebuie doar să tastați jq pentru a obține o listă cu toate.

Vorbind despre fragmente: dacă preferați o bibliotecă bună de fragmente decât să le definiți singur de la zero, aceste colecții vă vor ajuta:

• Fragmente de accesibilitate
• ES7 React/Redux/GraphQL/React-Native
• CSS
• Grilă CSS
• HTML
• Node.js
• JavaScript (ES6)
• unghiular 10
• Vue.js + TypeScript
• WordPress
• WordPress Gutenberg
• PHP
• Instrumente PHP
• Svelt
• TensorFlow

Scrieți propriile fragmente de cod

Există o mulțime de pluginuri pentru fragmente de cod pentru diferite limbi, dar v-ați întrebat vreodată cum să vă definiți propriile fragmente în VS Code? Maurice Borgmeier a rezumat tot ce trebuie să știți pentru a începe.

Un alt articol grozav pe această temă vine de la Rob O'Leary. El se aprofundează când și de ce să folosească fragmente, analizează mai atent diferitele tipuri de fragmente, cum le gestionează VS Code și, nu în ultimul rând, cum să le scrieți pe ale dvs., desigur.

Capturi de ecran de cod, The Fancy Way

Să fim sinceri, realizarea de capturi de ecran arătoase ale codului poate fi o provocare. Polacode este aici pentru a schimba asta.

Descris ca „Polaroid pentru codul tău”, Polacode vă permite să faceți și să editați capturi de ecran ale codului dvs. direct în VS Code. Puteți redimensiona containerul codului trăgând colțul și folosiți comenzi pentru a controla aspectul imaginii. O soluție excelentă pentru a face codul pe care ai petrecut atâtea ore să strălucească în cea mai bună lumină — în postări de blog sau prezentări, de exemplu.

Comentarii prietenoase cu oamenii

Cum te descurci cu comentariile? Dacă codul dvs. necesită o mulțime de explicații, ar putea fi o idee bună să faceți acele comentarii de obicei gri, mai prietenoase pentru oameni, astfel încât să fie mai ușor să vedeți dintr-o privire dacă un comentariu vă avertizează despre o metodă depreciată, de exemplu, sau dacă este o problemă lăsată de colegul tău de echipă pentru tine.

Extensia VS Code Better Comments vă ajută să faceți exact asta, clasificând adnotările în alerte, interogări, toate, evidențieri și multe altele. Codul comentat poate fi, de asemenea, modificat pentru a face clar că nu ar trebui să fie acolo.

Depanare Chrome în interiorul codului VS

Folosiți Chrome și vă treziți să comutați înainte și înapoi între browser și editor când depanați? Atunci poate doriți să încercați depanatorul VS Code Chrome. Vă ajută să depanați codul JavaScript la nivelul clientului care rulează în Chrome direct din VS Code.

Depanatorul se conectează la Chrome prin protocolul său Chrome Debugger, unde mapează fișierele încărcate în browser cu fișierele pe care le-ați deschis în VS Code. Așadar, fără a părăsi editorul, puteți seta puncte de întrerupere în codul sursă , puteți configura variabile de urmărit și puteți vedea întreaga stivă de apeluri la depanare. Un mic instrument pentru a vă face rutina de depanare mai simplă.

DevTools pentru extensia VSCode

Nu ar fi grozav să aveți DevTools integrate în editorul dvs. de cod, astfel încât să nu aveți nevoie să comutați înainte și înapoi între cele două? Dacă utilizați VSCode și Edge, o mică extensie face posibil acest lucru.

Extensia arată instrumentul Elements and Network al browserului în interiorul VSCode, oferindu-vă posibilitatea de a vedea structura HTML de rulare, de a modifica stilul și aspectul, de a efectua diagnostice și de a depana proiectul - fără a părăsi editorul. Apropo, Rachel Weil a împărtășit câteva sfaturi utile DevTools pentru a lucra cu browsere bazate pe Chromium precum Edge și Chrome la SmashingConf San Francisco în urmă cu câteva săptămâni. Asigurați-vă că vă conectați la înregistrare pentru a vă duce abilitățile DevTools la nivelul următor.

Utilaje de gestionare a fișierelor pentru VS Code

De obicei, se petrece mult timp pentru organizarea și gestionarea fișierelor. File Utils face sarcina mai convenabilă.

Extensia vă permite să creați, să duplicați, să mutați, să redenumiți și să ștergeți fișiere și directoare cu doar câteva comenzi. De asemenea, acceptă extensia bretelor care generează automat șiruri de caractere arbitrare pentru a configura structura documentului.

Adăugarea etichetelor la fișiere din editorul dvs

În proiectele mari, găsirea unei variante specifice a unei componente sau doar a fișierului potrivit necesită să cunoașteți fișierul pe care îl căutați de fapt. Dar ce se întâmplă dacă ai putea adăuga marcaje sau etichete la anumite fișiere, astfel încât să le poți găsi mai repede?

File Ops VS Code Extension vă permite să etichetați și să aliați fișierele , apoi să comutați rapid între ele. De asemenea, puteți enumera rapid toate etichetele în cazul în care le pierdeți urma, puteți vizualiza toate fișierele din directorul curent și puteți comuta între fișierele .css și .js din același folder. De asemenea, puteți arunca o privire la videoclipul care explică cum funcționează totul. Acum asta va fi util!

Pictograme de folder în VS Code

Pictograme personalizate pentru fișiere și foldere în VS Code? Da, te rog! Pentru a vă ajuta să vă manevrezi mai ușor spațiul de lucru, chiar dacă sunt implicate o mulțime de fișiere și foldere, Echipa VS Code Icons a lansat o extensie care aduce pictograme în editorul dvs. De la „acces” la „zip”, „Android” la „www”, colecția va avea cu siguranță pictogramele fișierelor și folderelor de care aveți nevoie.

Funcția de comutare a pictogramelor specifice proiectului și detectarea automată a proiectului vor detecta automat tipul de proiect pe care l-ați deschis în spațiul dvs. de lucru și vă vor solicita să comutați pictogramele în consecință. De asemenea, este posibil să utilizați pictograme personalizate, dacă preferați.

Fonturi monospațiate pentru codare

Fonturile de programare sunt cu siguranță calii de lucru în tipografie. Acestea trebuie să ofere o mare lizibilitate, să permită scanarea rapidă a textului și să prevină oboseala ochilor chiar și atunci când un dezvoltator se uită la cod ore în șir. Pentru a vă ajuta să găsiți un font de programare care să corespundă nevoilor dvs., Chris Coyier organizează Fonturi de codare , o selecție de peste 30 de fonturi monospațiate (în mare parte gratuite), care corespund tuturor acestor criterii.

Pentru a ușura decizia, fiecare font vine cu o scurtă descriere, o prezentare generală a tuturor caracterelor și exemple de cod HTML, CSS și JavaScript atât în ​​modul zi, cât și în modul de noapte. Mostafa Gaafar menține o listă similară de fonturi pentru dezvoltatori, cu opțiunea de a vizualiza și exemplele de cod în diferite scheme de culori. Pentru a adăuga fonturi personalizate la VS Code, va trebui să definiți fontul în „Setări”.

Git Supercharged

O extensie utilă pentru a supraîncărca capabilitățile Git încorporate în VS Code este GitLens. Pentru a înțelege mai bine codul la care lucrați, GitLens vă permite să vedeți cine, de ce și când a fost schimbat o linie sau un bloc de cod.

Extensia vizualizează autoritatea codului dintr-o privire, vă ajută să navigați și să explorați fără probleme depozitele Git, să obțineți informații valoroase prin comenzi de comparație și multe altele. Tot ce trebuie să știți despre baza de cod la îndemână, fără a părăsi editorul.

Istoricul Git în VS Code

Vizualizarea și căutarea jurnalului git împreună cu graficul și detaliile, vizualizarea unei copii anterioare a fișierului la care lucrați, căutarea în istoric , compararea ramurilor și a comiterilor - acestea sunt doar câteva dintre caracteristicile pe care extensia Git History le oferă pentru a eficientiza fluxul dvs. de lucru.

Vorbind despre Git: O altă extensie VS Code care merită să o aruncăm o privire mai atentă când lucrați cu Git este Git Graph: vă permite să vizualizați un grafic Git al depozitului dvs. și să efectuați cu ușurință acțiuni Git din grafic.

Evidențiați adnotările din codul dvs

Uneori uiți să revizuiești sarcinile pe care le-ai adăugat în timpul codificării? Extensia TODO Highlight vă reamintește că există note sau lucruri care necesită atenția dvs. înainte de a publica în producție.

Cuvintele cheie TODO și FIXME sunt preconfigurate, dar puteți personaliza configurația după bunul plac, dacă preferați. O comandă evidențiază comentariile deschise pentru dvs. chiar în codul dvs. sau ca o listă a tuturor adnotărilor. Un mic memento grozav.

Evidențierea parantezelor și etichetelor care se potrivesc

O sesiune intensă de codare epuizează ochii, așa că orice ajută la o mai mare claritate vizuală este un ajutor binevenit. Pentru a duce evidențierea sintaxei la următorul nivel atunci când lucrați cu VS Code, este posibil să doriți să verificați Colorizerul perechilor de paranteze. Extensia identifică paranteze care se potrivesc - în culorile pe care le definiți.

Acum că aveți control deplin asupra parantezelor, un alt mic detaliu la care trebuie să aveți grijă sunt etichetele de deschidere și de închidere care se potrivesc. VS Code vine deja cu o funcție de potrivire a etichetelor, dar este destul de simplă. Extensia Highlight Matching Tag face treaba mai bine, potrivind etichetele oriunde - de la atributele etichetelor la șirurile din interior - și chiar evidențiind calea de la etichetă la etichetă în bara de stare. Opțiunile extinse de stil vă permit să personalizați modul în care sunt evidențiate etichetele. HTML și JSX sunt acceptate oficial.

Dezvăluirea personajelor dăunătoare

Spații cu lățime zero și non-joiners, spații nedespărțitoare, ghilimele duble stânga și dreapta — la codificare, unele caractere pot fi dăunătoare deoarece sunt invizibile sau arată ca unele legitime. Gremlins Tracker le găsește pentru tine.

Gremlins Tracker folosește o schemă de culori pentru a vă alerta despre caracterele dăunătoare, potențial dăunătoare și mai puțin dăunătoare . Liniile care includ un astfel de caracter sunt marcate cu o pictogramă Gremlins, iar mutarea cursorului peste caracter vă oferă un indiciu al problemei potențiale. Dacă doriți, puteți adăuga noi caractere gremlins sau le puteți înlocui pentru o anumită limbă.

Evidențierea Indentarea

Indentarea este cheia pentru a vă asigura că codul dvs. poate fi scanat rapid. Un mic plugin la îndemână care face indentările și mai ușor de citit este Indent-Rainbow. Acesta colorează indentarea din fața textului, alternând patru culori diferite la fiecare pas și marcând acele linii în care indentarea nu este un multiplu al dimensiunii filei.

Deși evidențierea erorilor este utilă, există cazuri în care ți-ar putea sta în cale. Când aveți de-a face cu modele RegEx, de exemplu. Din fericire, Indent-Rainbow vă permite să dezactivați evidențierea erorilor pe acestea, la fel ca în rândurile de comentarii și, dacă doriți, puteți chiar să o omiteți pentru limbi întregi.

Vizualizarea contextelor de stivuire

Aveți dificultăți în identificarea contextelor de stivuire când utilizați z-index ? Nu esti singur! Dacă uneori vă treziți să setați un z-index la un miliard pentru un element și nu avansează în ordinea dvs. de stivuire, CSS Stacking Contexts este pentru dvs.

Extensia face vizibile contextele de stivuire în CSS și SCSS, astfel încât să puteți utiliza cu încredere valori mici atunci când scrieți declarații z-index . În plus, vă va spune și când o declarație z-index nu are efect și vă va oferi remedieri rapide.

Culori personalizate pentru a deosebi spațiile de lucru

Dacă aveți frecvent mai multe instanțe VS Code deschise și vă străduiți să le deosebiți, Peacock ar putea merita să aruncați o privire mai atentă: extensia schimbă subtil tema de culoare a spațiului dvs. de lucru .

Dar nu numai atunci când lucrați la mai multe proiecte simultan, Peacock strălucește. De asemenea, este util atunci când utilizați funcțiile VS Live Share sau VS Code Remote și doriți să vă identificați rapid editorul.

IntelliSense: Caracteristici de dezvoltare asistate de AI

Extensia IntelliCode oferă caracteristici de dezvoltare asistate de AI pentru dezvoltatorii Python, TypeScript/JavaScript și Java în Visual Studio Code, cu informații bazate pe înțelegerea contextului codului dvs. combinată cu învățarea automată .

Oferind IntelliSense asistat de AI, extensia vă arată elementele de completare automată recomandate pentru contextul codului dvs. în partea de sus a listei de completări. Când vine vorba de supraîncărcări, nu parcurge lista alfabetică a membrilor, ci vă prezintă mai întâi pe cea mai relevantă. Nu mai căutați singur prin listă.

Înregistrarea înregistrării ghidate pentru baza dvs. de cod

O bază de cod mare se poate simți intimidantă. CodeTour încearcă să schimbe asta. Extensia vă permite să înregistrați și să redați instrucțiuni ghidate ale bazelor de cod, direct în editor. Gândiți-vă la el ca la un cuprins care face mai ușoară îmbarcarea sau reîncărcarea în nou proiect sau zonă de caracteristici, vizualizarea rapoartelor de erori sau înțelegerea contextului unei revizuiri de cod.

Pentru a crea un tur de cod, puteți adnota linii de cod (Markdown este acceptat) și puteți naviga în câte fișiere aveți nevoie, iar recorderul captează secvența. Tururile pot fi verificate într-un depozit sau exportate într-un fișier „tur”, astfel încât oricine să-l poată reda fără a fi nevoie să cloneze niciun cod. La indemana!

De la GitHub la VS Code, într-o secundă

După ce ați descoperit un fragment de cod pe GitHub, ce se întâmplă dacă doriți să începeți imediat să lucrați cu el în proiectul dvs.? În loc să clonați depozitul și să găsiți fișierul de care aveți nevoie, puteți utiliza Github1s. Doar adăugați 1s după github în URL, apăsați Enter, iar repo, sau un singur fișier, se va deschide direct în VS Code .

De asemenea, puteți utiliza un bookmarklet pentru a comuta rapid între github.com și github1s.com , pentru a accesa depozite private și există o mulțime de extensii de browser care sunt listate și pe pagina proiectului. Dacă aveți nevoie de o alternativă, Gitpod este o opțiune puțin mai avansată, care vă permite, de asemenea, să porniți un mediu de dezvoltare online, să rulați spații de lucru paralele și să lucrați la baza de cod în colaborare.

Animale de companie pentru codul dvs. VS

Ai vrut vreodată să-ți stimulezi editorul de cod VS? Ei bine, ce zici să adaugi o pisică, un câine, un șarpe, o rață de cauciuc sau chiar bunul Clippy? Tot ce trebuie să faceți este să instalați vscode-pets și să rulați comanda vscode-pets.start pentru a vedea panoul. Odată ce ai ales un animal de companie, culoarea și mărimea blănii sale, aplecă-te pe spate și urmărește-i cum interacționează cu tine!

De la aruncarea unei mingi și jocul de prindere cu animalul dvs. de companie (rulați vscode-pets.throw-ball ) până la adăugarea de animale de companie suplimentare (rulați vscode-pets.spawn-pet ), fluxul de lucru de codare va fi cu siguranță orice decât plictisitor! Creatorul, Anthony Shaw, este deschis pentru idei și discuții și acceptă feedback oricând.

Accelerați crearea de prototipuri JavaScript / TypeScript

Dacă sunteți în căutarea unei modalități de a accelera procesul de prototipare JavaScript, Quokka este pentru dvs. Locul de joacă de prototipare rapidă se află în editorul dvs. și oferă o creștere a vitezei pentru prototiparea, învățarea și testarea JavaScript și TypeScript.

Valorile de rulare sunt actualizate și afișate în IDE-ul dvs. lângă codul dvs., pe măsură ce introduceți text. Pentru a vă pune în funcțiune imediat, nu este necesară nicio configurație , tot ce trebuie să faceți pentru a începe să experimentați este să deschideți un nou fișier Quokka. Prototipări fericite!

Utilizați o mașină de la distanță ca mediu de dezvoltare

Există o varietate de motive pentru care ați putea dori să utilizați o mașină la distanță cu un server SSH ca mediu de dezvoltare. Pentru că aveți nevoie de hardware mai rapid sau mai specializat decât mașina dvs. locală, de exemplu, sau pentru a depana o aplicație care rulează în altă parte , cum ar fi un site pentru clienți sau o aplicație în cloud. Pentru a simplifica dezvoltarea și depanarea, extensia Remote - SSH vă ajută să faceți exact asta.

Extensia rulează comenzi și alte extensii direct pe computerul de la distanță , așa că nu veți avea nevoie de niciun cod sursă pe computer. În schimb, puteți deschide orice folder de pe computerul de la distanță și puteți lucra cu el așa cum ați proceda în mod obișnuit, profitând din plin de setul complet de caracteristici al VS Code. La indemana!

Compilați Sass în timp real

Un compilator Sass în timp real cu reîncărcare live a browserului? Extensia Live Sass te acoperă. Vă ajută să compilați/transpilați fișierele SASS/SCSS în fișiere CSS în timp real.

Caracteristicile includ personalizarea locației fișierului CSS exportat, precum și stilul și numele extensiei acestuia, există un control rapid al barei de stare, puteți exclude anumite foldere din setări și este acceptat și prefixul automat.

Sfaturi și trucuri pe care nimeni nu s-a obosit să vă spună

Folosiți cu adevărat funcțiile puternice pe care VS Code le oferă? Burke Holland și Sarah Drasner susțin că nu, așa că, pentru a schimba asta, împărtășesc toate cele mai bune lucruri despre VS Code pe care nimeni nu s-a obosit să ți le spună.

De la actualizarea automată a etichetelor HTML img cu dimensiunea corectă a imaginii până la utilizarea ligăturilor de font pentru o mai bună lizibilitate atunci când codifică sau log puncte pentru a deconecta informațiile din aplicația ta, „VS Code Can Do That?!” oferă 36 de sfaturi valoroase care vă vor face fluxul de lucru și mai eficient.

Încheierea

Există literalmente sute de extensii VS Code și sperăm că unele dintre cele enumerate aici se vor dovedi utile în munca de zi cu zi - și, cel mai important, vă vor ajuta să evitați anumite sarcini de rutină care necesită timp. Codare fericită, tuturor!

Lectură suplimentară

• Instrumente de auditare CSS
• Generatoare CSS
• Generatoare SVG
• Instrumente și șabloane de e-mail HTML
• Fragmente de cod JavaScript Vanilla
• Componente Front-End accesibile
• De asemenea, abonați-vă la newsletter-ul nostru pentru a nu rata următoarele.