Dodaci za Visual Studio kod. ✨ Proširenja za Visual Studio Code koja će podići vaš razvojni proces na višu razinu. Kako postaviti automatsko osvježavanje stranice za PHP datoteke pomoću Live Servera
Urednici teksta stvoreni na temelju web tehnologija doživljavaju pravi procvat. Atom, VS Code, Brackets, poput čudovišta rocka, dobivaju na popularnosti među web programerima (čekaj, koja je godina sada na kalendaru za “popularna čudovišta rocka”? 🙂 - Urednik). Ljudi se na njih prebacuju iz IDE-a i jednostavno iz izvornih urednika. Razlog je vrlo jednostavan: repozitoriji vrve korisnim dodacima, a svatko može sam izraditi one koji nedostaju, koristeći isključivo web tehnologije.
Broj ekstenzija u službenim repozitorijima stalno raste, a kako se ne biste izgubili u njima, pripremili smo za vas popis najpopularnijih dodataka koji pojednostavljuju web razvoj.
Po ukusu autora
Vaš ponizni sluga koristio je sve navedene editore i na kraju se odlučio za VS Code. Postoji nekoliko razloga za to, ali glavni je učinak. Microsoft je napravio odličan posao i unatoč kasnom izdanju (VS Code se pojavio zadnji na sceni) uspio oko sebe okupiti ogromnu zajednicu. To je imalo pozitivan utjecaj na dodatke: neki od njih su, po mom mišljenju, za glavu iznad Atom alternativa. U tom smislu, nazivi ekstenzija posebno za VS Code pojavit će se u tekstu recenzije. Poveznica na približnu funkcionalnu opciju za Atom bit će dana u nastavku. Nemojte se iznenaditi ako kopirate naziv dodatka i pretražite Atom repozitorij i ne pronađete ništa. Koristite poveznice iz opisa.
Razlozi popularnosti
Urednici izgrađeni na web tehnologijama imaju otprilike iste probleme. Jedan od glavnih je izvedba. Programeri rade na brzini urednika, ali budimo iskreni - ovaj problem vjerojatno neće biti riješen 100%. Izvorna rješenja i dalje su superiorna u izvedbi, a to vrijedi uzeti u obzir pri odabiru uređivača.
Pa dobro, izvedba nativnih rješenja je bez premca. Zašto su onda novonastali "lagani" uređivači osvojili toliko srca programera? Glavni argument u prilog je tehnološki skup. Što znači razviti dodatak za neki Sublime ili Notepad? ? Tako je, morat ćemo se pozabaviti C, Python (ovdje se može koristiti bilo koji drugi programski jezik), SDK editor i ostale stvari koje nisu potrebne za glavni posao.
Koji bi web programer pristao na ovaj podvig? Ima dovoljno svojih briga i tehnologija (u frontendu se događa prava revolucija rješenja). Tako se pokazalo da je ekosustav dodataka za web programere među nativnim urednicima uvijek patio od nedostatka specijaliziranih rješenja.
Ideja o stvaranju editora temeljenih na web tehnologijama za majstore istih tehnologija učinkovito je riješila problem lošeg ekosustava modula trećih strana. Web programeri trećih strana brzo su se prihvatili i počeli stvarati ono što su im trebali. Rezultate je lako pratiti - službena spremišta puna su dodataka za razne zadatke. Izrada novih dodataka postala je lakša: više ne morate učiti strani programski jezik, JavaScript je sasvim dovoljan.
Nažalost, jednostavnost poboljšanja funkcionalnosti uređivača dolazi po cijenu performansi i resursa. Lagani uređivači često zahtijevaju više sistemskih resursa i nisu spremni natjecati se s izvornim uređivačima u pogledu performansi. Atom je tijekom testiranja s džentlmenskim setom ekstenzija uspio prestići WebStorm u potrošnji memorije.
Isječci
Dodaci isječaka zasebna su klasa proširenja za uređivače. Nevjerojatno su popularni, au repozitorijima postoji pojedinačna ponuda za gotovo svaki moderni okvir ili biblioteku. Isječci štede vrijeme. Trebate li opisati predložak razreda? Nema problema, unesite nekoliko znakova i dobit ćete nekoliko redaka gotovog koda. Nema smisla detaljno analizirati dodatke za isječke - previše ih je. Evo nekoliko poveznica na isječke dodataka za popularne tehnologije. One koje nedostaju pronaći ćete sami.
VS kod:
Atom:
Omotač za HTML
Kada opisujete izgled stranice, stalno morate omatati blokove, odnosno ugniježđivati jedan blok u drugi. Napisao sam oznaku bloka, a onda sam shvatio da je radi lakšeg stiliziranja bolje umotati ga u dodatni blok. Nije teško učiniti: napišite uvodnu oznaku na samom početku, pomaknite blok do kraja i stavite završnu oznaku. Postoji samo jedan problem - nezgodno je to raditi na velikim blokovima. Postoji sva mogućnost da "zatvarač" postavite na krivo mjesto i prekršite oznake. Sličan problem pojavljuje se kod stiliziranja pojedinačnih dijelova teksta. Pokušajte brzo umetnuti brojne otvarajuće i zatvarajuće oznake bez da poludite. Dodaci će vam pomoći da se nosite s poteškoćama htmltagWrap I Umotavanje atoma u oznaku. Uz njihovu pomoć, rješenje se svodi na odabir dijela koda/linije i pritiskanje kombinacije vrućih tipki.
- VS kod: htmltagwrap
- Atom: Umotavanje atoma u oznaku
Navikavanje na prečace
Kada prelazite na novi uređivač/IDE, uvijek se suočavate s istim problemom - morate naučiti nove prečace. Taman sam se navikla na neke kombinacije, a onda bam – i sve je drugačije. Počinjete provoditi više vremena na poznatim radnjama nego inače i ponovno se pitate je li uputno prijeći na nešto novo. Siguran sam da su se programeri koji su svoju karijeru započeli prije 10-15 godina opetovano susreli s time, pa će svakako cijeniti snagu dodataka s tipkama za popularne urednike. Poanta je jednostavna: navikli ste na raspored prečaca Visual Studio - preuzmite odgovarajući dodatak i novi uređivač počinje odgovarati na uobičajene naredbe.
VS kod:
Atom:
Automatsko dovršavanje za datoteke
Prema zadanim postavkama niti jedan uređivač ne omogućuje automatsko dovršavanje naziva datoteka kada su povezani. To je često uzrok grešaka. Morate zapamtiti puni put do lokacije datoteke. Ako je projekt složeniji od Hello world, tada se datoteke grupiraju u nekoliko direktorija, a za određivanje staze morat ćete koristiti usluge upravitelja datoteka. Nije baš ugodno. Lakše je omogućiti automatsko dovršavanje pomoću dodataka AutoFileName i autocomplete+. Zatim sve što trebate učiniti je upisati prva slova naziva datoteke/direktorija, nakon čega će dodatak ponuditi mogućnosti zamjene.
- VS kod: AutoFileName
- Atom: autocomplete+ prijedlozi staza
Linters
Suvremeni razvojni proces nezamisliv je bez automatizacije. Ako se nešto može automatizirati i prenijeti na alate, vrijedi to učiniti. Ne postoji nigdje u sučelju bez svih vrsta lintera, stoga kada radite na sljedećem projektu trebali biste odmah voditi računa o rješenjima za povezivanje poput ESLint, HTMLHint, CSSLint,<твой_линтер>. Linters kontrolira stil pisanja koda i, u slučaju neslaganja s konfiguracijom, odmah će ukazati na pogreške.
Linterovi su posebno korisni u timskom razvoju, kada se značajno povećavaju šanse za dobivanje "mješovitog" koda. Trebate primjere? Molim! Postoji stalna rasprava među JS programerima o izboru navodnika. Neki su pristaše jednostrukih, drugi dvostrukih, a treći podržavaju ideju obrnutih. Linters će pomoći u postizanju uniformnosti i odmah obavijestiti programera koji je zalutao.
Nastavak je dostupan samo članovima
Opcija 1. Pridružite se zajednici "site" kako biste pročitali sve materijale na stranici
Članstvo u zajednici unutar navedenog razdoblja omogućit će vam pristup SVIM hakerskim materijalima, povećati vaš osobni kumulativni popust i omogućiti vam da skupite profesionalnu ocjenu Xakep Score!
Pogledajmo najbolje dodatke za uređivanje koda Visual Studio za web razvoj u 2020.
- Live Server
- Automatsko zatvaranje oznake
- Trošak uvoza
- Materijalna tema
- Apache Conf
- Ruski jezični paket
- Mali bonus
1. Live Server
Omogućavanje Live Server-a za .html ili .htm datoteke:
Omogućavanje Live Servera ako nema .html ili .htm datoteka:
Kako postaviti automatsko osvježavanje stranice za PHP datoteke pomoću Live Servera
2. Sass
Podrška za Sass sintaksu: uvlačenje, automatsko dovršavanje itd.
Kompajlira SASS/SCSS datoteke u CSS u stvarnom vremenu
Za uključivanje morate pritisnuti Gledaj Sassa u statusnoj traci
Što Live Sass Complier uključuje:
- odabir mape za izvoz za kompiliranu datoteku
- izbor CSS stiliziranje(prošireno, kompaktno, komprimirano, ugniježđeno)
- odabir naziva ekstenzije (.css ili .min.css)
- proširenje kompatibilno Live Server
- postavljanje automatske instalacije prefiksa dobavljača
- I tako dalje
Odabir oznaka - otvaranje i zatvaranje
Isticanje oznaka može se prilagoditi vašim potrebama. Moje postavke:
"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" ) ,Označavanje web boja u editoru odgovarajućom bojom
Proširenje boji simetrične zagrade iste boje, ali različite od ostalih zagrada.
Kad se netko promijeni par oznaka, drugi će se automatski promijeniti.
Prema zadanim postavkama proširenje radi za sve jezike, tako da možete promijeniti ovu postavku koristite sljedeći kod:
"auto-rename-tag.activationOnLanguage": [ "html" , "xml" , "php" , "javascript" ] ,8. Automatsko zatvaranje oznake
Automatsko zatvaranje oznaka
Zadano radi za sve jezike: HTML, PHP, JavaScript, markdown, liquid itd. Postavke možete promijeniti u setting.json
"auto-close-tag.activationOnLanguage": [ "php" , "javascript" , "javascriptreact" , "typescript" , "typescriptreact" , "plaintext" , "markdown" , "vue" , "liquid" , ]9.Troškovi uvoza
Ovo proširenje će prikazati veličinu uvezenog paketa ugrađenu u uređivač.
10. Materijalna tema
Jedna od najpopularnijih tema za VS Code. Također možete instalirati font koji podržava ligature (pretvaranje niza znakova u jedan element)
Tada će postavke za settings.json biti ovakve
"editor.fontLigatures" : istina , "editor.fontFamily" : "Fira kod" , "editor.fontWeight" : "100" ,11. Apache Conf
Podrška za Apache sintaksu. Zgodno za uređivanje datoteka s ekstenzijama .htaccess. Također podržava vrste datoteka: .conf, .htgroups, .htpasswd
Visual Studio Code - besplatno, više platformi uređivač teksta od Microsofta, koji je postao popularan zbog svoje lagane, moćne i proširive funkcionalnosti i, naravno, “besplatnosti”, za razliku od PHPStorma, Sublimea itd.
Kao i većina modernih IDE-a, VSCode ima mnogo dodataka koji proširuju njegove izvorne mogućnosti. Odabrali smo 15 dodataka koji će biti korisni svakom programeru koji radi u ovom uređivaču.
Otvori u pretraživaču
Prema zadanim postavkama, u Visual Studio Code Ne postoji način za otvaranje datoteke u pregledniku. Ovo proširenje ne samo da dodaje funkciju "Otvori u pregledniku", već vam također omogućuje otvaranje datoteka u bilo kojem pregledniku instaliranom na vašem računalu.
Quokka
Quokka- uslužni program koji vam daje priliku pregledati rezultat izvršavanja određenog dijela koda, prikazujući rezultate izvršavanja funkcija i izračunate vrijednosti varijabli. Proširenje se lako konfigurira i radi odmah JSX ili strojopis projekti.
lažnjak
Omogućuje brzo umetanje nasumičnih podataka (nasumičnih imena, adresa, slika, brojevi telefona itd.) u kod. Svaka kategorija ima svoje pododjeljke, što vam omogućuje da se točnije prilagodite potrebama programera.
CSS Peek
Pomoću ovog dodatka možete pratiti definicije klasa i ID-ove u CSS datoteci. Da biste to učinili, morate desnom tipkom miša kliknuti birač u svojoj HTML datoteci i odabrati Idite na Definiciju(Idi na definiciju) ili Peek definicija(Vidi definiciju).
HTML Boilerplate
HTML Boilerplate pojednostavljuje rad s HTML-om, eliminirajući potrebu da sami pišete oznake glava I tijelo. Upišite prazno html datoteka, pritisnite tipku Tab i Visual Studio Codeće generirati predložak dokumenta!
Ljepša
Ljepša je popularan uređivač koda među web programerima koji vam omogućuje da kod koji su napisali različiti ljudi dovedete u jedan oblik. U postavkama Ljepša Možete postaviti automatsko pokretanje, što će vam omogućiti da odmah formatirate kod napisan u JS i CSS.
Informacije o boji
Mali dodatak koji pruža kratke informacije o bojama koje se koriste u CSS-u. Prelaskom miša iznad naziva boje možete vidjeti kako izgleda i kako ga napisati u drugima formati boja (šesterokutni, rgb, hsl I cmyk).
SVG preglednik
Ovo proširenje omogućit će vam rad sa SVG datotekama: možete uređivati SVG datoteke, pretvorite ih u PNG format i izraditi podatkovnu URL shemu.
TODO Highlight
Ovaj dodatak vam omogućuje da stavite oznake na nedovršena mjesta u kodu, što olakšava rad na vašem projektu. Prema zadanim postavkama navedene su samo oznake NAPRAVITI(završiti) i POPRAVITI MENE(popravak), ali možete kreirati vlastite vrste oznaka.
Fontovi s ikonama
Proširenje koje dodaje Visual Studio Code podrška za oko 20 popularnih fontova ikona, uključujući Font Strašan , Ionikoni, Glifikoni, Dizajn materijala...
Umanjiti
Uslužni program za optimizaciju i sažimanje koda. Umanjiti Raditi sa HTML, JS I CSS datoteke i izvrsno radi s dodacima kao što su pogrditi-js, čisti-css I html-minifikator.
Promjena velikih i malih slova
VS kod omogućuje pretvaranje odabira samo u velika i mala slova. Pomoću Promjena velikih i malih slova, imat ćete pristup velikom broju registara (zmija, deva itd.).
Regex preglednik
Dodatak koji vam omogućuje rad s regularnim izrazima. Regex preglednik primjenjuje predložak regularni izraz u bilo koju otvorenu tekstualnu datoteku, ističući sve rezultate. Baš kao
Visual Studio Code je besplatni uređivač teksta za više platformi koji je razvio Microsoft. Brzo postaje svačiji favorit zahvaljujući izvrsnim performansama i velikom broju značajki koje nudi.
Kao i većina IDE-a, VSCode ima vlastitu trgovinu proširenja koja sadrži tisuće dodataka različite kvalitete. Kako bismo vam pomogli da odaberete ona koja vrijedi preuzeti, napravili smo ovu zbirku proširenja za koja smatramo da su najkorisnija i najzanimljivija.
VSCode ne nudi ugrađeno sučelje za otvaranje datoteka izravno u pregledniku. Ovo proširenje dodaje stavku kontekstnog izbornika "Otvori u pregledniku". kontekstni izbornik, kao i naredbe za otvaranje u odabranom klijentu (Firefox, Chrome, IE).
Quokka je alat za otklanjanje pogrešaka koji vam daje izravne Povratne informacije kodom koji napišete. On pokazuje pretpregled rezultati funkcije i izračunate vrijednosti za varijable. Proširenje je lako konfigurirati i radi izvan okvira s JSX ili TypeScript projektima.
Brzo umetnite podatke rezerviranog mjesta pomoću popularne biblioteke JavaScript Faker. Možete generirati nasumična imena, adrese, slike, telefonske brojeve ili jednostavno odlomke klasičnog Lorem Ipsuma. Svaka kategorija ima različite potkategorije tako da podatke možete prilagoditi svojim potrebama.
Pomoću ovog proširenja možete pratiti CSS klase i definicije klasa ID-a u svojim tablicama stilova. Kada desnom tipkom miša kliknete birač u svojim HTML datotekama, odaberete opcije Idi na definiciju i Peek definicija će vam poslati CSS kod u kojem ste ih stvorili.
Proširenje HTML predloška spasit će vas od potrebe da ručno pišete oznake glave i tijela novog HTML dokumenta. Samo unesite html prazna datoteka, pritisnite tipku Tab i stvorit će se čista struktura dokumenta.
Ljepša najpopularniji je format koda među web programerima. Omogućuje da kod vašeg tima izgleda isto bez obzira tko ga je napisao. Ovo proširenje vam omogućuje automatsku primjenu Ljepša i brzo formatirajte sve dokumente JS I CSS. Ako i vi želite koristiti ESLint, Tamo je Ljepša-Eslint.
Mali dodatak koji vam daje razne informacije o bojama koje ste koristili u svom CSS-u. Prijeđite mišem iznad boje i vidjet ćete veliki prozor s tom bojom kao i njezinim kodiranjem u svim formatima (hex, rgb, hsl i cmyk).
Ovaj alat označava sve komentare NAPRAVITI u vašem kodu, što olakšava praćenje svih nedovršenih dijelova prije prelaska u proizvodnju. Prema zadanim postavkama pretražuje ključne riječi NAPRAVITI I POPRAVITI MENE, ali možete dodati i vlastite izraze.
Sićušni isječci za omogućavanje fontova ikona u vašem projektu (s CDN-a) i zatim dodavanje samih ikona. Proširenje podržava više od 20 popularnih skupova ikona, uključujući fontove Super, Ionikoni, Glifikoni I Ikone materijalnog dizajna.
Ekstenzija za minimiziranje koda. Nudi mnoštvo opcija prilagodbe i mogućnost automatskog minimiziranja prilikom spremanja i izvoza u .min datoteku. Minify radi s JavaScriptom, CSS-om i HTML-om putem uglify-js, clean-css i html-minifier.
VSCode ima ograničene mogućnosti pretvorbe teksta. Izvan okvira može raditi samo konverzije malih i velikih slova. Ovaj dodatak dodaje mnogo više naredbi za modificiranje niza, uključujući camelCase, kebab-case, snake_case, CONST_CASE i još mnogo toga.
Koristan alat za testiranje vaših regularnih izraza. Djeluje tako da primjenjuje uzorak regularnog izraza preko bilo kojeg tekstualna datoteka, otvorite u uređivaču, označavajući sve rezultate. Kao da RegExr, ali upravo u vašem uređivaču!