Extensii de text sublime obligatorii pentru dezvoltatorii web

Lumea software-ului IDE este masivă cu programe pentru fiecare sistem de operare. Preferatul meu personal este Sublime Text și îl folosesc pentru toate proiectele mele de codare.

Pe lângă numeroasele teme opționale, comenzile rapide de la tastatură și fluxul de lucru fulgerător de la Sublime, are și o comunitate vastă de dezvoltatori care creează extensii care fac software-ul și mai bun și mai ușor de utilizat.

Dacă căutați în jur, veți găsi sute de extensii din care să alegeți. Și pentru această postare, am selectat unele dintre cele mai bune extensii Sublime care vor economisi timp și efort în orice flux de lucru pentru dezvoltatori web.

Dacă sunteți în căutarea unor extensii Sublime Text pentru WordPress, încercați această colecție.

1. Extensie Emmet

Sublime Text și Emmet sunt practic una și aceeași. Extensia Emmet nu servește doar unei singure funcții sau scop.

Este un set de instrumente masiv pentru dezvoltatorii web, cu o mulțime de funcții de codare la îndemână, comenzi rapide suplimentare de la tastatură și funcții pentru automatizarea fluxului de lucru. Acest lucru vă poate ajuta să vă gestionați fragmentele de cod sau să adăugați funcții suplimentare, cum ar fi atributele de imagine automată.

Dacă te uiți prin documentația masivă a lui Emmet, cu siguranță vei găsi o grămadă de lucruri la îndemână pe care le poți adopta. Va fi nevoie de câteva ajustări pentru ca acest lucru să devină o parte normală a fluxului de lucru, dar în cele din urmă, merită învățat.

Nu există o extensie mai bună pentru Sublime Text decât Emmet. Mai ales pentru oricine care codifică frecvent site-uri web de la zero.

2. Autoprefixer

Multe dintre proprietățile CSS3 mai noi au prefixe pentru a gestiona diferite motoare de randare. Acestea sunt utilizate în principal pentru motoarele WebKit, Gecko și Microsoft, care sunt grupate ca prefixe de furnizor.

Nu orice proprietate mai necesită aceste prefixe. Browserele au parcurs un drum lung în câțiva ani, iar majoritatea proprietăților CSS3 pot rula fără cod prefix.

Dar dacă doriți să susțineți cea mai mare audiență posibilă, atunci veți dori Autoprefixer. Acesta poate fi instalat prin managerul de pachete Sublime cu doar câteva clicuri și este și mai ușor de adăugat în baza de cod.

3. Ei mr

Sublime vine cu câteva teme implicite cu anumite stiluri de evidențiere a sintaxelor. Dar poate doriți să adăugați mai multe în arsenalul dvs. și acolo vă poate ajuta Themr.

Acest mic supliment vă permite să sortați temele UI disponibile și să le organizați în funcție de preferințele dvs., chiar și alocați comenzi rapide de la tastatură, dacă este necesar.

În plus, puteți adăuga teme noi pe măsură ce le găsiți și le puteți organiza pe toate împreună. Temele dvs. „favorite” pot fi chiar salvate ca presetări pe baza tipurilor de fișiere pe care le utilizați (de exemplu: fișiere HTML, JS și PHP).

4. Extensia JSHint

Depanarea JavaScript este o durere. Dacă exersați depanarea, vă veți îmbunătăți în mod natural procesul, dar tot nu este ușor de făcut.

Cu extensia JSHint a lui Sublime, puteți aduce depanarea JavaScript direct în IDE-ul dvs. Acest supliment simplu vă permite să testați codul JavaScript din orice fișier JS.

Pe IDE apare o nouă fereastră de consolă, unde puteți verifica erorile, găsiți ce înseamnă acestea și corectați-le rapid.

Puteți chiar să rulați acest lucru din fereastra terminalului dacă doriți să verificați un fișier în afara Sublime. Un instrument excelent pentru dezvoltatorii care lucrează continuu în JavaScript.

5. Nume fișier automat

Aproape fiecare pagină web face referire la alte fișiere undeva în cod. Aceste fișiere pot fi imagini, script-uri JS, foi de stil sau chiar alte pagini dinamice, cum ar fi fișierele .php.

Cu Auto Filename, veți economisi mult timp introducând manual aceste fișiere. Începeți doar să introduceți numele, iar această extensie se ocupă de restul cu un câmp de completare automată. Funcționează pentru toate elementele din HTML, astfel încât să puteți adăuga rapid căi de directoare pentru imagini, fișiere CSS, pluginuri JavaScript, cum doriți.

6. Îmbunătățiri pentru bara laterală

Sublime Text vine cu o vizualizare opțională din bara laterală care funcționează ca un director. Acest lucru este util atunci când lucrați la un proiect mai mare cu mai multe fișiere și include.

Îmbunătățirile barei laterale preia bara laterală implicită Sublime și, ei bine... o îmbunătățește! Acest lucru vă oferă mai multe vizualizări ale folderului, mai multe opțiuni în meniul contextual cu clic dreapta, copiere ușoară a URI-urilor căilor și alte opțiuni utile, cum ar fi „deschide cu” pentru grafică.

Nu toți dezvoltatorii folosesc funcția bară laterală. Îl opresc chiar și atunci când editez fișiere individuale. Dar dacă utilizați continuu bara laterală a lui Sublime, această extensie se va dovedi neprețuită pentru fluxul dvs. de lucru.

7. ColorPicker

Cei mai mulți dintre noi sunt familiarizați cu instrumentele de selectare a culorilor în programe precum Photoshop. Funcționează grozav și adesea sunt tot ce avem nevoie pentru un proces de interfață de utilizare solid.

Extensia ColorPicker de la Sublime vă permite să introduceți procesul de selecție a culorii chiar în IDE-ul dumneavoastră. Desigur, există o mulțime de aplicații web color gratuite pe care te poți baza. Dar acest plugin este superb, deoarece funcționează chiar în fereastra de cod.

8. Git

Dacă nu ați folosit niciodată controlul versiunii Git, atunci poate fi un drum lung de învățat. Resursele potrivite vă vor ajuta și, odată ce înțelegeți pe deplin Git, nu veți dori niciodată să vă întoarceți.

Una dintre cele mai bune resurse pe care le puteți folosi este extensia Git pentru Sublime. Acest lucru automatizează fluxul de lucru de control al versiunii Git și vă face foarte ușor să gestionați pachetele din IDE.

Este un plugin super simplu cu care să lucrați și este compatibil cu toate sistemele de operare. Mulți dezvoltatori preferă să folosească linia de comandă pentru gestionarea Git, dar Sublime este o altă alegere viabilă.

9. Evidențiator pentru paranteze

Iată o caracteristică căutată, care este cu siguranță utilă atunci când se codifică pagini mari. Extensia Bracket Highlighter evidențiază automat parantezele de deschidere și de închidere din codul dvs. Tot ce trebuie să faceți este să plasați cursorul în paranteza de început (sau de sfârșit), apoi să parcurgeți fișierul pentru a găsi eticheta potrivită.

Vă va ajuta să vizualizați containerele HTML din pagina dvs. și să vedeți ce elemente sunt conținute în alte elemente. Sublime are o funcție mică de evidențiere a parantezei cu Emmet, dar prefer această extensie, deoarece evidențierea este mult mai clară.