Već neko vrijeme imam u planu napisati ovaj članak, prvenstveno kolegama iz Facebook grupe Web Programiranje 2021, no vjerujem da će ova proširenja i mali trikovi biti od koristi i bilo kojem drugom Web developeru u nastanku koji naleti na ovaj članak.
Proširenja
S obzirom da Visual Studio Code ima ogroman broj proširenja, jednoj osobi koja je tek krenula u učenje Web developmenta bilo bi jako teško odlučiti što je za početak najkorisnije. Ta osoba će onda instalirati previše proširenja ili ne instalirati niti jednu, a najbolje se naći negdje u sredini, tako da sam se bazirao na nekoliko osnovnih, no dugoročno jako korisnih proširenja koja mogu poslužiti svima.
Za početak, kako biste našli i otvorili proširenja, ona se nalaze na lijevoj strani vašeg VS Code prozora. Umjesto klika, također možete koristiti i prečac putem tipkovnice CTRL SHIFT X. Ovdje će se nalaziti sva instalirana proširenja, a pored toga i neke preporuke za koje će VS Code misliti da bi Vam bile od koristi. Na vrhu imate mali search prostor gdje možete pretraživati proširenja. Tu ćete utipkavati moje preporuke iz ovog članka ako Vam budu bile zanimljive.
Live Server (autor Ritwick Dey)
Ovo je jedno od jednostavnijih, a u isto vrijeme i najkorisnijih proširenja za početnike. Live Server će omogućiti da u trenutnom vremenu pratite izmjene u kodu. Koristeći ovo proširenje moći ćete lako vježbati svoje novo CSS znanje, bez da morate svaki put kliknuti refresh na pretraživaču (nakupi se tog klikanja, a vrijeme je dragocjeno). Pogotovo ako stavite prozor kraj prozora kao u gifu ispod.
Kada instalirate dodatak i nakon što počnete raditi na nekom dokumentu, u plavoj traci na dnu pojaviti će vam se mala ikonica antene sa tekstom “Go Live”. Kada to kliknete, pokrenuti će Vam se pretraživač sa vašom trenutnom stranicom. Svaki put kad napravite i spremite izmjenu, ista će biti vidljiva u browseru. Nakon toga na vama je samo da dovedete svoju stranicu do savršenstva u dosta kraćem vremenu. 🙂
Bracket Pair Colorizer 2 (autor CoenraadS)
S obzirom da ćete provesti jako puno vremena gledajući u ekran i hrpu koda, katkad tražeći bugove (pogotovo kada budete radili sa Javascriptom), Bracket Pair Colorizer 2 će vam vizualno pomoći da sve one zagrade koje su međusobno povezane budu u istoj boji. Uz to, svaki višak od zagrade istaknuti će se žarkom crvenom bojom da ga lakše primijetite.
Ja ovo proširenje koristim otkad sam počeo koristiti Visual Studio Code i bilo bi mi teško naviknuti se bez toga. Ovo proširenje odlično radi odmah nakon instalacije. Ako netko ima volje, može pročitati dokumentaciju proširenja pa doraditi postavke sebi po volji.
Prettier – Code formatter (autor Prettier)
Treće, ali definitivno ne manje bitno proširenje je Prettier. Ovo proširenje će vam pomoći da formatirate kod na puno uredniji i proprofesionalniji način. Pored toga, Prettier će dodati i “;” tamo gdje je to potrebno, razmake između zareza i riječi i slično. Siguran sam da vaš kod nikad nije izgledao urednije.
Formatiranje možete napraviti ručno u bilo kojem trenu dok uređujete dokument tako da stisnete CTRL SHIFT P (inače, ovaj prečac se zove Command Palette) i odaberete “format document with..” (ovo možete i utipkati da brže nađete opciju) i odaberete Prettier. No meni je puno draže automatsko formatiranje dokumenta prilikom Save tj. spremanja promjena. Da biste to napravili, kliknite na mali kotačić za postavke u lijevom donjem kutu VS Code prozora, pa na Settings, zatim u search bar napišite Format on save i stavite kvačicu na prvu postavku kao na slici.
Da bi postavili Prettier kao Default formatter, napišite Format u search bar i odaberite “esbenp.prettier-vscode”. Pripremio sam i gif kako doći do ovih postavki za one kojima je tako lakše. Možete ga pogledati ovdje.
Nakon toga, otiđite u bilo koji dokument, napravite koju liniju koda, stisnite CTRL S i uživajte u magiji. Usput ćete naučiti i kako bi točno kod trebao izgledati po pitanju urednosti.
A pored toga, uživati će i bilo tko drugi tko dobije uvid u Vaš kod. Win win situacija, ako mene pitate.
Codesnap (autor adpyke)
Ovo proširenje dijelim samo kao neki opcionalni bonus, jer vjerujem da bi moglo biti od koristi članovima grupe. Uštediti će vam vremena kad želite podijeliti neki kod, napraviti brzinski screenshot bez da morate copy paste-ati cijeli kod ili to sve uploadati negdje drugo. Proces je uglavnom jako jednostavan. Nakon što ga instalirate, dovoljno je samo da označite dio koda koji želite podijeliti, kliknete desni klik i odaberete CodeSnap. Pojaviti će vam se screenshot sa desne strane, i ako ste zadovoljni rezultatom, kliknite na CodeSnap ikonu ispod tog screenshota da biste to spremili. Jednostavno i brzo.
Project Manager (autor Alessandro Fragnani)
S ovim proširenjem bih zaokružio ovaj dio. Realno, za početnike i nije od neke koristi, no u kasnijem dijelu kada budete radili na više projekata u isto vrijeme, jako dobro će vam doći Project Manager. Kad ga instalirate, pojaviti će vam se nova ikona ispod one za proširenja, za brz i lak pristup. Ovo proširenje popravlja baš ono što fali VS Code-u, a to je jednostavnije switchanje između projekata i lakše spremanje projekata kojima ćete kasnije puno lakše pristupiti. Pored toga, u postavkama možete namjestiti i baseFolders za Git projekte, pa će ih ovo proširenje automatski očitavati svaki put kad budete kreirali nove projekte.
P.S. Za old school developere koji su naviknuli na Sublime Text, Vim i slične editore, samo bih vas uputio na keymaps. U VS Code-u kliknite na Extensions, gore pri vrhu imate filter opciju, odaberite Category -> Keymaps i instalirajte ono na što ste naviknuli, za što lakši prijelaz na novi editor.
Snippets i kako ih koristiti
Snippet ili isječak koda je mala, već spremljena verzija koda koji se može koristiti više puta. Često ćete koristiti isti kod, a ovi snippeti će pomoći da to vrijeme koje biste potrošili na tipkanje iskoristite produktivnije. Visual Studio Code dolazi sa integriranim Emmet pluginom. Ovaj plugin će se pojavljivati dok tipkate pa ćete moći jako brzo pristupiti tim snippetima koje tražite. Počnimo sa primjerom, recimo da radite novu web stranicu. Umjesto da pišete cijeli početni kod, vi samo upišete “!” (bez navodnika) ili “html:5”, pojaviti će vam se mali pop-up sa francuskim ključem, kliknete enter i pojavi se ovo:
Vaš instantni HTML boilerplate je tu.
Ali Emmet može biti još napredniji od toga. Recimo na primjeru da želite napraviti jedan <div> element pod kojim ćete imati 3 <p> paragrafa. Umjesto da radite to sve ručno, dovoljno je da upišete ovo “div>p*3” i evo rezultata:
A ako biste htjeli još precizniji način, recimo želite div element koji ima id “novosti”, a u sebi ima 3 div elementa sa klasom “clanak” od kojih svaki ima po 2 paragrafa? U tom slučaju kod bi izgledao ovako:
Kao što vidite, cijeli set elemenata za nekoliko sekundi. Emmet je jako napredan i koristan alat za sve developere. Što ga prije i detaljnije svladate, prije ćete napredovati u Web developmentu, da ne govorim da ćete postati jako PROduktivni u svom poslu. Za dodatne mogućnosti Emmeta, možete pogledati njihovu dokumentaciju ovdje. No, što se snippeta tiče, ne morate vi stati sa Emmetom. Možemo se i tu koristiti proširenjima, kojih ima jako puno pod kategorijom snippets.
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets (autor Ashok Koyi)
Ovdje ćete naći najčešće snippete koji su vam potrebni ako planirate koristiti Bootstrap 4 i ikone iz Font awesome. Naravno, prvo bih preporučio da se detaljnije upoznate sa Bootstrapom općenito, pa kad to svladate, onda se možete poslužiti ovim snippetima da cijeli proces ide još brže. Bootstrap 5 je trenutno u alphi, no već možete naći par proširenja koja se bave snippetima za tu verziju. Tako da, ako želite biti up-to-date, slobodno idite na tu verziju.
Tailwind CSS IntelliSense (autor Brad Cornes)
S obzirom da već vidim da ćemo se u ranije navedenoj Facebook grupi baviti i sa TailwindCSS-om, morao sam i ovo proširenje linkati jer u Tailwind projektima bude izrazito korisno. Imati ćete vizualni prikaz boja, autocomplete i prepoznavanje grešaka vezanih za Tailwind. Potrebno je napomenuti da bi ovo proširenje bilo aktivno, morate imati TailwindCSS instaliran i mora postojati tailwind config file u projektu u kojem radite.
Korisni prečaci tipkovnice
VS Code ima popriličan broj korisnih prečaca koji vas mogu spasiti od previše copy paste operacija, pa rekoh, zašto ne nabaciti par korisnijih, kad ste već ovdje da odete sa malo boljim mišljenjem o VS Code-u… možda bih im se trebao javiti za kakvu proviziju kad smo već kod toga…
Nego, recimo na primjeru da želite promijeniti nekoliko elemenata u isto vrijeme umjesto da brišete svaki element zasebno. U tom slučaju držite ALT i klikajte lijevi klik miša na mjestima gdje planirate raditi promjene.
Drugi primjer bi bio da želite kopirati trenutnu liniju koda ili cijeli izbor još jednom. Umjesto da radite copy paste, možete koristiti prečac Shift Alt StrelicaDolje. Primjer ispod:
Da biste od određenog reda napravili komentar, dovoljno je da stisnete kombinaciju CTRL ‘ i red ili izbor će biti commented-out.
U slučaju da želite liniju koda ili izbor elemenata pomaknuti gore ili dolje, možete koristiti kombinaciju ALT strelicaGore ili strelicaDolje, ovisno o smjeru gdje želite pomaknuti kod.
Ako u vašem projektu imate greške, možete ih brzo naći tako da klikate F8, VS Code će vas voditi od jedne greške do druge sa opisom greške da ih lakše ispravite.
Ako se želite bolje upoznati sa ovim prečacima, možete otići u Help -> Interactive Playground, gdje su ovi detalji malo bolje objašnjeni, a uz to na istom mjestu možete i testirati navedeno.
Postoji još mnogo toga što bi se ovdje dalo dodati, no vjerujem da će vam ovo za početak biti od koristi. Nadam se da odlazite s ovog članka malo iskusniji, a možda i zadovoljniji VS Code-om. Sad je na vama da, kao budući developeri, zaronite u dokumentaciju i izvučete još korisnije detalje. Ako imate još nekakav koristan trik koji ovdje nisam spomenuo, slobodno ga podijelite u komentarima ispod!