8 Extensii puternice pentru codul Visual Studio pentru dezvoltatorii din Front-end

Deși Microsoft a lansat prima versiune stabilă a Visual Studio Code, editorul său puternic de coduri, cu numai câteva luni în urmă, până în martie 2016, el are deja multe extensii disponibile, care pot duce codificarea experienței la nivelul următor. oficial Extensiile codului Visual Studio sunt găzduite în Visual Studio Code Marketplace, dintre care multe pot fi un mare ajutor pentru dezvoltatorii web.

Pentru acest post, am testat o grămadă de extensii de cod VS legate de dezvoltarea front-end și am făcut o listă a celor pe care le-am găsit cel mai mult intuitiv, ușor de utilizat și convenabil. Nu este o listă finală de toți. Acordați-vă timp pentru a naviga pe piață pentru dvs. și pentru a vedea ce altceva vă poate oferi, mai ales că multe prelungiri mari nu vor veni încă.

Cum se instalează extensiile de cod VS

Instalarea unei extensii este destul de simplă în Visual Studio Code, după cum puteți faceți-o în cadrul editorului de coduri. În VS Code Marketplace, fiecare extensie are o pagină proprie și puteți găsi comanda pe care o puteți instala o extensie dată în partea de sus a acestei pagini.

Comanda începe întotdeauna cu ext instalare termen. Pentru a instala o extensie, doar presa CTRL + P în interiorul codului VS pentru a porni panoul Rapid Deschidere, copy-paste această comandă în ea, și în cele din urmă reporniți editorul de coduri pentru a face noua extensie să funcționeze.

8 Extensii puternice ale codului Visual Studio

1. Fragmente HTML

   Dacă doriți să scrieți frecvent cod HTML în Visual Studio Code, extensia Fragmente HTML poate fi folosită ca un instrument la îndemână adaugă suport elaborat pentru HTML. Deși codul VS are suport de bază pentru HTML, cum ar fi sintaxa de colorare, extensia Fragmente HTML știe mult mai mult.

   

   Probabil cea mai utilă caracteristică a acestei extensii este aceea când începeți să introduceți numele unei etichete HTML (fără brațul de pornire), Fragmente HTML rapid afișează o listă dintre opțiunile disponibile, cu o scurtă informație despre fiecare.

   

   Când faceți clic pe elementul de care aveți nevoie, Snippeturile HTML adaugă eticheta completă HTML5 cu cele mai comune proprietăți. De exemplu, dacă doriți să adăugați un link (etichetă de ancorare) la documentul dvs., trebuie doar să tastați un A în Codul VS, alegeți opțiunea potrivită în caseta de tip pop-up, iar fragmentele HTML vor introduce informațiile necesare fragment în editorul dvs. fără nici un hassle.

   Autorul acestei extensii acordă atenție și pentru a elimina elementele depreciate, deci dacă doriți să utilizați o etichetă HTML pe care nu o găsiți în lista pop-up, merită să verificați dacă este încă validă sau nu.

2. Completarea clasei HTML CSS

   Completarea clasei HTML CSS poate fi o extensie utilă dacă trebuie să utilizați mai multe Clasele CSS în proiectul dvs. Se întâmplă frecvent cu noi dezvoltatori, că suntem nu este complet sigur în numele exact al unei clase, dar se află doar în spatele minții noastre ca o cunoaștere pasivă.

   Această extensie inteligentă oferă o soluție pentru această problemă preia numele tuturor claselor CSS în spațiul de lucru curent și afișează o listă despre ele.

   

   Să presupunem că doriți să creați un site utilizând Fundația Zurb și doriți să utilizați grila mică. Nu-ți amintești cum sunt numite exact clasele, dar știi că au nume semantice.

   Cu terminarea clasei HTML CSS trebuie doar să începeți să tastați cuvântul mic, iar opțiunile disponibile apar simultan pe ecran, astfel încât să puteți selecta cu ușurință cea care vă trebuie.

   

3. Vizualizați în browser

   Vizualizarea în browser este o extensie simplă, dar puternică pentru Visual Studio Code. Acesta poate facilita dezvoltarea front-end, permițându-vă aveți o privire rapidă asupra rezultatului muncii dvs. în browser în timpul codării. Puteți deschide fișierul HTML în browserul dvs. implicit direct din Codul VS, apăsând pe CTRL + F1 Comanda rapidă de la tastatură.

   Rețineți că vizualizați în browser suportă doar cod HTML, astfel încât dacă doriți să vedeți site-ul dvs. trebuie să aveți fișierul HTML deschis. Tu nu pot accesa direct browserul dintr-un fișier CSS sau JavaScript.

   

4. Debugger pentru Chrome

   Debuggerul pentru Chrome a fost construit de Microsoft în sine și este în prezent cea de-a patra cea mai des descărcată extensie a codului Visual Studio.

   Debuggerul pentru Chrome face posibil depanați JavaScript în Google Chrome fără a lăsa editorul de cod. Aceasta înseamnă că nu este nevoie să lucrați cu JavaScript transplay browser-ul vede, dar puteți executați dreptul de depanare din fișierele sursă originale. Vedeți această demonstrație pentru a vedea cum funcționează.

   

   Extensia are toate caracteristicile necesare unui debugger decent, cum ar fi setarea punctului de fixare, vizionarea variabilei, trecerea, A consola de depanare la îndemână, și multe altele (vedeți lista de caracteristici a primei versiuni).

   Pentru a utiliza această extensie, trebuie să porniți Chrome cu depanarea la distanță activată, și să înființeze un bun launch.json fişier. Aceasta din urmă poate dura ceva timp, dar puteți găsi instrucțiuni detaliate despre GitHub cu privire la modul în care să faceți acest lucru în mod corespunzător.

5. JSHint

   Extensia JSHint a Visual Studio Code integrează linia populară JSHint JavaScript direct în editorul de cod, astfel încât puteți să fiți informați despre erorile dvs. de îndată ce le-ați angajat. În mod implicit, extensia JSHint utilizează opțiunile implicite ale linterului pe care le puteți personaliza cu ajutorul unui fișier de configurare.

   

   Utilizarea acestei extensii este destul de simplă, deoarece JSHint marchează erorile cu roșu, iar notificările cu o subliniere verde. Dacă doriți mai multe informații despre aceste probleme, plasați cursorul peste piesele subliniate și JSHint va flota o etichetă cu descrierea problemei simultan.

   

6. Fragmente de cod jQuery

   Fragmentele de cod jQuery pot accelera foarte mult dezvoltarea de front-end în Visual Studio Code, deoarece vă permite să scrieți rapid jQuery fără erori de sintaxă de bază. Fragmente de cod jQuery are în prezent în jur 130 de fragmente disponibile puteți invoca tastând declanșatorul potrivit.

   

   Toate fragmentele jQuery, dar unul începe cu JQ prefix. Singura excepție este FUNC declanșează asta inserează o funcție anonimă în editor.

   Această extensie la îndemână este un ajutor convenabil atunci când nu sunteți complet sigur în ceea ce privește sintaxa potrivită și doriți să aveți mai mult timp pentru a verifica documentația. De asemenea, este ușor să parcurgeți rapid opțiunile disponibile.

   

7. umbrar

   Extensia codului Bower VS poate face fluxul de lucru pentru dezvoltarea web mai intuitiv prin integrarea managerului de pachete Bower în Visual Studio Code.

   Dacă vă puneți în folosință această extensie nu trebuie să comutați înainte și înapoi între terminal și editor, dar puteți să efectuați cu ușurință activitățile de gestionare a pachetelor chiar în interiorul codului Visual Studio.

   

   Extensia Bower vă conduce prin crearea proiectelor dvs. bower.json fișier și puteți, de asemenea, să instalați, să dezinstalați, să căutați, să actualizați pachetele, să gestionați memoria cache și să efectuați multe alte activități (vezi lista de caracteristici complete).

   Poti accesați comenzile legate de Bower pornind paleta de comandă prin apăsarea F1, tastare “umbrar” în bara de intrare, făcând clic pe “umbrar” în lista derulantă care apare și alegeți comanda Bower corespunzătoare.

   

8. Git Istorie

   Git Istoria face posibil urmați modificările unui proiect Git în interiorul codului Visual Studio. Această extensie este utilă în special atunci când doriți să contribuiți la un proiect Github mai mare și au nevoie de o modalitate de a verifica rapid modificările făcute de alți dezvoltatori.

   Cu extensia Istoric Git instalată puteți vizualizați istoricul a unui întreg fișier sau a linie specială în interiorul acestuia. Poti de asemenea comparați versiunile anterioare din același dosar.

   

   Puteți să accesați comenzile legate de istoricul Git dacă introduceți cuvântul “git” în paleta de comandă (F1), alegeți “git” în interiorul listei derulante și, în final, selectați comanda de care aveți nevoie. Rețineți că trebuie să deschideți fișierul din care doriți să vedeți istoricul înainte de a putea efectua acțiuni asupra acestuia.