Pluginuri pentru codul de studio vizual. ✨ Extensii pentru Visual Studio Code care vă vor duce procesul de dezvoltare la următorul nivel. Cum să configurați reîmprospătarea automată a paginii pentru fișierele PHP folosind Live Server

Editorii de text create pe baza tehnologiilor web se confruntă cu un adevărat boom. Atom, VS Code, Brackets, ca monștrii rock-ului, câștigă popularitate în rândul dezvoltatorilor web (stai, ce an este acum în calendar pentru „monstrii populari ai rock-ului”? 🙂 - Ed.). Oamenii trec la ele atât de la IDE-uri, cât și pur și simplu de la editorii nativi. Motivul este extrem de simplu: depozitele sunt pline de plugin-uri utile și oricine le poate crea pe cele care lipsesc pe cont propriu, folosind tehnologii pur web.

Numărul de extensii din depozitele oficiale este în continuă creștere și, pentru a nu te pierde în ele, am pregătit pentru tine o listă cu cele mai populare plugin-uri care simplifică dezvoltarea web.

Pe gustul autorului

Umilul tău servitor a folosit toți editorii enumerați și, în cele din urmă, s-a stabilit pe VS Code. Există mai multe motive pentru aceasta, dar principalul este performanța. Microsoft a făcut o treabă grozavă și, în ciuda lansării târzii (VS Code a apărut ultimul pe scenă), a reușit să adune o comunitate imensă în jurul său. Acest lucru a avut un impact pozitiv asupra pluginurilor: unele dintre ele, după părerea mea, sunt cu cap și umeri deasupra alternativelor Atom. În acest sens, în textul revizuirii vor apărea numele extensiilor specifice pentru VS Code. Un link către o opțiune de funcționalitate aproximativă pentru Atom va fi oferit mai jos. Nu fi surprins dacă copiați numele pluginului și căutați în depozitul Atom și nu găsiți nimic. Utilizați link-uri din descriere.

Motive pentru popularitate

Editorii construiti pe tehnologii web au aproximativ aceleași probleme. Una dintre cele mai importante este performanța. Dezvoltatorii lucrează la viteza editorilor, dar să fim sinceri - este puțin probabil ca această problemă să fie rezolvată 100%. Soluțiile native sunt încă superioare ca performanță, iar acest lucru merită luat în considerare atunci când alegeți un editor.

Ei bine, performanța soluțiilor native este de neegalat. Atunci de ce au câștigat atât de multe inimi de dezvoltatori nou creații editori „ușori”? Principalul argument în favoarea este stiva de tehnologie. Ce înseamnă să dezvolți un plugin pentru unele Sublime sau Notepad? ? Așa e, va trebui să avem de-a face cu C, Python (orice alt limbaj de programare poate fi folosit aici), editor SDK și alte lucruri care nu sunt necesare pentru munca principală.

Ce dezvoltator web ar fi de acord cu această performanță? Are destule griji și tehnologii proprii (în frontend are loc o adevărată revoluție a soluțiilor). Așa că s-a dovedit că ecosistemul de pluginuri pentru dezvoltatorii web în rândul editorilor nativi a suferit întotdeauna din cauza lipsei de soluții specializate.

Ideea de a crea editori bazați pe tehnologii web pentru stăpânii acestor tehnologii a rezolvat eficient problema unui ecosistem sărac de module terțe. Dezvoltatorii web terți s-au aruncat rapid în vagon și au început să creeze clopotele de care aveau nevoie. Rezultatele sunt ușor de urmărit - depozitele oficiale sunt pline cu pluginuri pentru o mare varietate de sarcini. Crearea de noi pluginuri a devenit mai ușoară: nu mai trebuie să înveți un limbaj de programare străin, JavaScript este suficient.

Din păcate, ușurința îmbunătățirii funcționalității editorului vine cu prețul performanței și al resurselor. Editorii ușoare necesită adesea mai multe resurse de sistem și nu sunt pregătiți să concureze cu editorii nativi în ceea ce privește performanța. În timpul testării, Atom cu un set domnesc de extensii a reușit să depășească WebStorm în consumul de memorie.

Fragmente

Pluginurile snippet sunt o clasă separată de extensii pentru editori. Sunt extrem de populare și există o ofertă individuală în depozite pentru aproape fiecare cadru sau bibliotecă modernă. Fragmentele economisesc timp. Trebuie să descrii un șablon de clasă? Nicio problemă, introduceți câteva caractere și obțineți câteva rânduri de cod gata făcut. Nu are rost să analizezi în detaliu pluginurile de fragmente - sunt prea multe dintre ele. Iată câteva link-uri către fragmente de plugin pentru tehnologii populare. Pe cele dispărute le vei găsi singur.

Cod VS:

Atom:

Wrapper pentru HTML

Când descrieți aspectul paginii, trebuie în mod constant să înfășurați blocuri, adică să încadrați un bloc în altul. Am scris marcajul blocului și apoi mi-am dat seama că, pentru ușurința stilului, este mai bine să-l înfășurăm într-un bloc suplimentar. Nu este greu de făcut: scrieți eticheta de deschidere chiar de la început, derulați blocul până la sfârșit și puneți eticheta de închidere. Există o singură problemă - este incomod să faci asta pe blocuri mari. Există toate șansele de a plasa „mai aproape” în locul greșit și de a sparge marcajele. O problemă similară apare la stilarea unor bucăți de text individuale. Încercați să introduceți rapid numeroase etichete de deschidere și de închidere fără a înnebuni. Pluginurile vă vor ajuta să faceți față dificultăților htmltagWrapȘi Atom înfășurați în etichetă. Cu ajutorul lor, soluția se rezumă la selectarea unei bucăți de cod/linie și apăsarea unei combinații de taste rapide.

• Cod VS: htmltagwrap
• Atom: Atom înfășurați în etichetă

Obișnuirea cu tastele rapide

Când treceți la un nou editor/IDE, vă confruntați întotdeauna cu aceeași problemă - trebuie să învățați noi taste rapide. Tocmai m-am obișnuit cu anumite combinații, apoi bam - și totul este diferit. Începeți să petreceți mai mult timp pe acțiuni familiare decât de obicei și încă o dată vă întrebați dacă este recomandabil să treceți la ceva nou. Sunt sigur că dezvoltatorii care și-au început cariera în urmă cu 10-15 ani s-au confruntat în mod repetat cu acest lucru, așa că vor aprecia cu siguranță puterea pluginurilor cu legături de taste pentru editorii populari. Ideea este simplă: sunteți obișnuit cu aspectul tastelor rapide Visual Studio - descărcați pluginul corespunzător, iar noul editor începe să răspundă la comenzile obișnuite.

Cod VS:

Atom:

Completare automată pentru fișiere

În mod implicit, niciunul dintre editori nu oferă completarea automată a numelor fișierelor atunci când sunt conectate. Aceasta este adesea cauza erorilor. Trebuie să vă amintiți calea completă către locația fișierului. Dacă proiectul este mai complex decât Hello world, atunci fișierele sunt grupate în mai multe directoare și va trebui să utilizați serviciile unui manager de fișiere pentru a specifica calea. Nu foarte confortabil. Este mai ușor să activați completarea automată folosind pluginurile AutoFileName și autocomplete+. Apoi tot ce trebuie să faceți este să introduceți primele litere ale numelui fișierului/directorului, după care pluginul va oferi opțiuni de înlocuire.

• Cod VS: AutoFileName
• Atom: completare automată+ sugestii de căi

Linters

Procesul modern de dezvoltare este de neconceput fără automatizare. Dacă ceva poate fi automatizat și transferat în instrumente, merită făcut. Nu există nicăieri în frontend fără tot felul de linter, așa că atunci când lucrați la următorul proiect, ar trebui să vă ocupați imediat de conectarea soluțiilor precum ESLint, HTMLHint, CSSLint,<твой_линтер>. Linters controlează stilul de scriere a codului și, în caz de discrepanțe cu configurația, va semnala imediat erorile.

Linters sunt utile în special în dezvoltarea echipei, când șansele de a obține codul „mixt” cresc semnificativ. Ai nevoie de exemple? Vă rog! Există o dezbatere constantă în rândul dezvoltatorilor JS cu privire la alegerea citatelor. Unii sunt adepți ai celor simple, alții - duble, iar alții susțin ideea celor inverse. Linters va ajuta la obținerea uniformității și va notifica prompt un dezvoltator care s-a rătăcit.

Continuarea este disponibilă numai pentru membri

Opțiunea 1. Alăturați-vă comunității „site” pentru a citi toate materialele de pe site

Calitatea de membru al comunității în perioada specificată vă va oferi acces la TOATE materialele Hacker, vă va crește discountul cumulat personal și vă va permite să acumulați un rating profesional Xakep Score!

Să ne uităm la cele mai bune pluginuri de editor Visual Studio Code pentru dezvoltarea web în 2020.

1. Live Server
2. Închidere automată etichetă
3. Costul importului
4. Tema materială
5. Apache Conf
6. Pachetul de limba rusă
7. Bonus mic

1. Live Server

Activarea Live Server pentru fișiere .html sau .htm:

Activarea Live Server dacă nu există fișiere .html sau .htm:

Cum să configurați reîmprospătarea automată a paginii pentru fișierele PHP folosind Live Server

2. Sass

Suport pentru sintaxă Sass: indentare, completare automată etc.

Compilează fișierele SASS/SCSS în CSS în timp real

Pentru a-l porni trebuie să apăsați Urmărește Sassîn bara de stare

Ce include Live Sass Complier:

1. selectând folderul de export pentru fișierul compilat
2. alegere Stilul CSS(extins, compact, comprimat, imbricat)
3. alegerea unui nume de extensie (.css sau .min.css)
4. compatibil cu extensia Live Server
5. configurarea instalării automate a prefixelor de furnizor
6. Și așa mai departe

Selectarea etichetelor - deschidere și închidere

Evidențierea etichetelor poate fi personalizată pentru a se potrivi nevoilor dvs. Configurația mea:

„highlight-matching-tag.leftStyle”: ( „borderWidth” : „2px 2px 2px 2px” , „borderStyle” : „solid” , „borderColor” : „yellow” , „borderRadius” : „5px” ) , „highlight-matching-tag.rightStyle”: ( „borderWidth” : „2px 2px 2px 2px” , „borderStyle” : „solid” , „borderColor” : „yellow” , „borderRadius” : „5px” ) ,

Evidențierea culorilor web în editor cu culoarea corespunzătoare

Extensia colorează parantezele simetrice de aceeași culoare, dar diferite de celelalte paranteze.

Când unul se schimbă pereche de etichete, al doilea va fi schimbat automat.

În mod implicit, extensia funcționează pentru toate limbile, așa că puteți schimba această setare utilizați următorul cod:

„auto-rename-tag.activationOnLanguage”: [ "html" , "xml" , "php" , "javascript" ] ,

8. Etichetă de închidere automată

Închiderea automată a etichetelor

Funcționează implicit pentru toate limbile: HTML, PHP, JavaScript, markdown, lichid etc. Puteți modifica setările în setting.json

„auto-close-tag.activationOnLanguage”: [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , ​​​​"lichid" , ]

9. Costul importului

Această extensie va afișa dimensiunea încorporată a editorului a pachetului importat.

10. Tema materială

Una dintre cele mai populare teme pentru VS Code. De asemenea, puteți instala un font care acceptă ligaturi (conversia unei secvențe de caractere într-un singur element)

Apoi setările pentru settings.json vor fi așa

"editor.fontLigatures" : adevărat , "editor.fontFamily" : "Cod Fira" , "editor.fontWeight" : "100" ,

11. Apache Conf

Suport pentru sintaxa Apache. Convenabil pentru editarea fișierelor cu extensii .htaccess. De asemenea, acceptă tipuri de fișiere: .conf, .htgroups, .htpasswd

Visual Studio Code - gratuit, multiplatformă editor de text de la Microsoft, care a devenit popular datorită funcționalității sale ușoare, puternice și extensibile și, bineînțeles, „gratuit”, spre deosebire de PHPStorm, Sublime etc.

La fel ca majoritatea IDE-urilor moderne, VSCode are multe completări care își extind capacitățile originale. Am selectat 15 plugin-uri care vor fi utile oricărui programator care lucrează în acest editor.

Deschis în browser

În mod implicit, în Codul Visual Studio Nu există nicio modalitate de a deschide fișierul în browser. Această extensie nu numai că adaugă funcția „Deschide în browser”, dar vă permite și să deschideți fișiere în orice browser instalat pe computer.

Quokka

Quokka- un utilitar care vă oferă posibilitatea de a previzualiza rezultatul executării unei anumite piese de cod, afișând rezultatele executării funcțiilor și valorile calculate ale variabilelor. Extensia este ușor de configurat și funcționează imediat JSX sau Dactilografiat proiecte.

Faker

Vă permite să introduceți rapid date aleatorii (nume aleatorii, adrese, imagini, numere de telefon etc.) în cod. Fiecare categorie are propriile sale subsecțiuni, ceea ce vă permite să vă adaptați mai precis la nevoile programatorului.

CSS Peek

Cu acest plugin puteți urmări definițiile claselor și ID-urile într-un fișier CSS. Pentru a face acest lucru, trebuie să faceți clic dreapta pe selectorul din fișierul HTML și să selectați Accesați Definiție(Mergeți la definiție) sau Peek definiție(Vezi definiția).

HTML Boilerplate

HTML Boilerplate simplifică lucrul cu HTML, eliminând nevoia de a scrie singur etichete capȘi corp. Tastați gol fișier html, apăsați tasta Tab și Codul Visual Studio va genera un șablon de document!

Mai frumos

Mai frumos este un editor de cod popular printre dezvoltatorii web care vă permite să aduceți codul scris de diferiți oameni într-o singură formă. În setări Mai frumos Puteți seta executarea automată, ceea ce vă va permite să formatați imediat codul scris în JS și CSS.

Informații despre culoare

Un mic plugin care oferă informații scurte despre culorile utilizate în CSS. Trecând cu mouse-ul peste un nume de culoare, puteți vedea cum arată și cum să o scrieți în altele formate de culoare (hex, rgb, hslȘi cmyk).

Vizualizator SVG

Această extensie vă va permite să lucrați cu fișiere SVG: puteți edita fișiere SVG, convertiți-le în format PNGși creați o schemă de adrese URL de date.

TODO Evidențiați

Acest supliment vă permite să puneți semne în locuri neterminate din cod, facilitând lucrul la proiect. În mod implicit, sunt specificate doar etichetele A FACE(termină) și FIXME(remediere), dar vă puteți crea propriile tipuri de etichete.

Fonturi cu pictograme

O extensie care adaugă Codul Visual Studio suport pentru aproximativ 20 de fonturi de pictograme populare, inclusiv Font Awesome , Ionice, Glificonuri, Design material...

Minimizează

Un utilitar pentru optimizarea și comprimarea codului. Minimizează lucreaza cu HTML, JSȘi CSS fișiere și funcționează excelent cu pluginuri precum uglify-js, curat-cssȘi html-minifier.

Schimbă cazul

Cod VS vă permite să convertiți selecția numai în litere mari și mici. Prin utilizarea Schimbă cazul, vei avea acces la un număr mare de registre (șarpe, cămilă etc.).

Regex Previewer

Un supliment care vă permite să lucrați cu expresii regulate. Regex Previewer aplică șablonul expresie uzuala la orice fișier text deschis, evidențiind toate potrivirile. Exact ca

Codul Visual Studio este un editor de text multiplatform gratuit dezvoltat de Microsoft. Devine rapid preferatul tuturor datorită performanței sale excelente și numărului mare de funcții pe care le oferă.

La fel ca majoritatea IDE-urilor, VSCode are propriul magazin de extensii care conține mii de plugin-uri de diferite calități. Pentru a vă ajuta să alegeți pe cele care merită descărcate, am realizat această colecție de extensii pe care le-am considerat cele mai utile și interesante.

VSCode nu oferă o interfață încorporată pentru deschiderea fișierelor direct în browser. Această extensie adaugă un element de meniu contextual „Deschidere în browser”. meniul contextual, precum și comenzi pentru deschidere în clientul selectat (Firefox, Chrome, IE).

Quokka este un instrument de depanare care vă oferă direct părere dupa codul pe care il scrieti. El arată previzualizare rezultate ale funcției și valori calculate pentru variabile. Extensia este ușor de configurat și funcționează imediat cu proiecte JSX sau TypeScript.

Inserați rapid date de substituent folosind populara bibliotecă JavaScript Faker. Puteți genera nume aleatorii, adrese, imagini, numere de telefon sau pur și simplu paragrafe din clasicul Lorem Ipsum. Fiecare categorie are subcategorii diferite, astfel încât să puteți personaliza datele în funcție de nevoile dvs.

Folosind această extensie, puteți urmări definițiile claselor CSS și ale clasei ID în foile de stil. Când faceți clic dreapta pe selectorul din fișierele HTML, selectați opțiunile Go to Definition și definiția Peek vă va trimite codul CSS în care le-ați creat.

Extinderea unui șablon HTML vă va scuti de a trebui să scrieți manual etichetele de cap și corp ale unui nou document HTML. Doar introduceți html dosar gol, apăsați tasta Tab și va fi creată o structură curată a documentului.

Mai frumos este cel mai popular formatator de cod printre dezvoltatorii web. Permite codului echipei tale să arate la fel, indiferent cine l-a scris. Această extensie vă permite să aplicați automat Mai frumosși formatați rapid toate documentele JSȘi CSS. Daca vrei sa folosesti si tu ESLint, Există Prettier-Eslint.

Un mic plugin care vă oferă diverse informatii despre culorile pe care le-ați folosit în CSS. Treceți mouse-ul peste o culoare și veți vedea o fereastră mare cu acea culoare, precum și codificarea acesteia în toate formatele (hex, rgb, hsl și cmyk).

Acest instrument semnalează toate comentariile A FACEîn codul dvs., facilitând urmărirea oricăror piese neterminate înainte de a trece la producție. În mod implicit caută Cuvinte cheie A FACEȘi FIXME, dar puteți adăuga și propriile voastre expresii.

Fragmente mici pentru activarea fonturilor de pictograme în proiectul dvs. (de la un CDN) și apoi adăugarea pictogramelor în sine. Extensia acceptă peste 20 de seturi de pictograme populare, inclusiv fonturi Minunat, Ionice, GlificonuriȘi Icoane de design material.

Extensie pentru minimizarea codului. Oferă o mulțime de opțiuni de personalizare și capacitatea de a minimiza automat atunci când se salvează și se exportă într-un fișier .min. Minify funcționează cu JavaScript, CSS și HTML prin uglify-js, clean-css și respectiv html-minifier.

VSCode are capacități limitate de conversie a textului. Din cutie poate face doar conversii cu litere mici și majuscule. Acest plugin adaugă multe alte comenzi de modificare a șirurilor, inclusiv camelCase, kebab-case, snake_case, CONST_CASE și multe altele.

Un instrument util pentru testarea expresiilor regulate. Funcționează prin aplicarea unui model de expresie regulată peste oricare fisier text, deschideți în editor, evidențiind toate potrivirile. De parca RegExr, dar chiar în editorul tău!