Kada pišete kod u VS Code-u, ponekad vam urednost možda nije prioritet. Iako formatiranje nije neophodno za izvršavanje programa, ono značajno pomaže prilikom otklanjanja grešaka i pronalaženja problema.
U ovom članku pokazaćemo vam kako da formatirate kod u VS Code-u, kao i neke korisne savete za održavanje dobro organizovanog koda.
Kako formatirati kod
VS Code poseduje ugrađene komande za automatsko sređivanje koda u standardni format. Ove prečice ne zahtevaju dodatne ekstenzije i mogu se koristiti u bilo kom trenutku. Prečice su sledeće:
Za PC
Formatiranje celog dokumenta:
- Otvorite datoteku sa kodom koji želite da formatirate.
- Pritisnite „Shift + Alt + F“.
- Sačuvajte promene klikom na „File“ u gornjem levom uglu, a zatim odaberite „Save“ ili pritisnite „Ctrl + S“.
Formatiranje samo selektovanog koda:
- U datoteci sa linijama koda koje želite da formatirate, selektujte linije mišem.
- Pritisnite „Ctrl + K“.
- Pritisnite „Ctrl + F“.
- Sačuvajte promene odabirom „Save“ iz menija File u gornjem levom uglu ili pritiskom na „Ctrl + S“.
Napominjemo da ako pritisnete „Ctrl + F“ pre nego što pritisnete „Ctrl + K“, otvorićete meni Find. Ako se to dogodi, samo ga zatvorite klikom na dugme „x“ ili pritiskom na Esc.
Pomeranje redova gore ili dole:
- Postavite kursor na početak reda koji želite da pomerite.
- Držite pritisnut taster Alt.
- Da biste pomerili liniju gore, pritisnite strelicu nagore. Da biste je pomerili dole, pritisnite strelicu nadole.
- Sačuvajte datoteku tako što ćete je odabrati iz menija File u gornjem levom uglu prozora ili pritiskom na „Ctrl + S“.
Promena uvlačenja jednog reda:
- Postavite kursor na početak reda u kome želite da promenite uvlačenje.
- Pritisnite „Ctrl + ]“ da biste povećali uvlačenje.
- Pritisnite „Ctrl + [“ da biste smanjili uvlačenje.
- Sačuvajte promene tako što ćete odabrati Save iz menija File ili pritiskom na „Ctrl + S“.
Za Mac
Formatiranje celog dokumenta:
- Otvorite datoteku sa kodom koji želite da formatirate.
- Pritisnite „⇧ + ⌥ + F.“
- Sačuvajte promene klikom na „File“ u gornjem levom uglu, a zatim odaberite „Save“ ili pritisnite „⌘ + S“.
Formatiranje samo selektovanog koda:
- Selektujte deo dokumenta koji želite da formatirate.
- Pritisnite „⌘ + K“.
- Pritisnite „⌘ + F“.
- Sačuvajte datoteku pritiskom na „⌘ + S“ ili odabirom „Save“ iz menija File u gornjem levom uglu prozora.
Napominjemo da korišćenje „⌘ + F“ bez prethodnog pritiska na „⌘ + K“ otvara samo meni Find. Da biste zatvorili meni Find, samo pritisnite „x“ sa desne strane ili pritisnite Esc.
Pomeranje redova gore ili dole:
- Postavite kursor na početak linije koju želite da izmenite.
- Držite pritisnut taster „⌥“.
- Da biste pomerili liniju nagore, pritisnite strelicu nagore. Da biste je pomerili nadole, pritisnite strelicu nadole.
- Sačuvajte promene odabirom „Save“ iz menija File ili pritiskom na „⌘ + S“.
Promena uvlačenja jednog reda:
- Postavite kursor na početak linije u kojoj želite da promenite uvlačenje.
- Pritisnite „⌘ + ]“ da biste povećali uvlačenje.
- Pritisnite „⌘ +[“ da biste smanjili uvlačenje.
- Sačuvajte datoteku pritiskom na „⌘ + S“ ili odabirom „Save“ iz menija File u gornjem levom uglu prozora.
VS Code formatiranje koda prilikom čuvanja
VS Code nema ugrađenu funkciju formatiranja dokumenta prilikom čuvanja. Umesto toga, ovo se može postići instaliranjem ekstenzije za formatiranje u vaš VS Code. Najpopularnija od ovih ekstenzija je Prettier, koja pruža brojne funkcionalnosti za formatiranje koda u VS Code-u. Prettier se može instalirati na sledeći način:
- Otvorite VS Code.
- Kliknite na dugme Extensions koje se nalazi u levom meniju. To je ikona koja izgleda kao četiri kutije. Alternativno, možete pritisnuti „Ctrl + Shift + x“ za PC ili „⌘ + ⇧ + x“ na Mac-u.
- U traci za pretragu na vrhu menija unesite Prettier.
- Kliknite na dugme Install u donjem desnom uglu ikone Prettier.
- Sačekajte da ekstenzija završi instalaciju.
Pre nego što Prettier počne automatski da formatira vaš dokument prilikom čuvanja, moraćete da podesite ekstenziju da biste aktivirali ovu funkciju. Ovo se radi na sledeći način:
- Otvorite prozor sa podešavanjima pritiskom na „Ctrl + ,“ na PC-u ili „⌘ + ,“ na Mac-u.
- U traci za pretragu otkucajte formatter. Ovo bi trebalo da prikaže nekoliko podešavanja formatiranja.
- U podešavanju Editor: Default Formatter, uverite se da je odabrana ekstenzija Prettier. Ako nema podrazumevanog formatera ili VS Code podrazumevano koristi drugi formater, pritisnite strelicu padajućeg menija. Sa liste odaberite „Prettier – Code formatter“. Alternativno, Prettier se može pojaviti na listi kao „esbenp.prettier-vscode“.
- Uverite se da je opcija „Editor: Format On Save“ označena. Ako nije, uključite je.
- Otkucajte „Prettier“ u traci za pretragu podešavanja.
- Pomerajte se nadole dok ne pronađete red „Prettier: Require Config“. Uverite se da je polje za potvrdu označeno. Ova postavka sprečava Prettier da formatira dokumente bez konfiguracione datoteke. Ovo je zgodno kada pregledate preuzet kod koji možda ima sopstvena pravila formatiranja. Ovo vas sprečava da nenamerno prepišete opcije formatiranja. Imajte na umu da će datoteke bez naziva i dalje biti automatski formatirane čak i ako je ova postavka označena.
- Možete izmeniti određena podešavanja Prettier u zavisnosti od vaših preferencija. Kada završite, možete izaći iz ovog menija.
Pošto ste konfigurisali Prettier da automatski formatira samo kada postoji konfiguraciona datoteka, morate je kreirati za svaki projekat. Ovo se radi sledećim koracima:
- Odaberite koren svog projekta u levom meniju.
- Kliknite na dugme za novu datoteku da biste kreirali konfiguracionu datoteku.
- Imenujte ovu datoteku „.prettierrc“.
- U datoteci samo unesite {}.
- Prettier će sada automatski formatirati vaš dokument kad god ga sačuvate.
Saveti za organizovanje koda
- Iako uvlačenje nije neophodno za izvršavanje programa, ono može pomoći u otklanjanju grešaka razdvajanjem koda u module kojima se može upravljati. If-Then izjave ili ugnežđeni slučajevi, na primer, mogu imati koristi od ovoga tako što će svaku alternativnu opciju učiniti vizuelno prepoznatljivom jednu od druge. Ovo je zgodno kada imate posla sa logičkim greškama umesto sintaksnim.
- Ako imenujete module ili kraće delove koda, neka vam postane navika da koristite opisne naslove umesto da ih jednostavno nazivate modulom 1, modulom 2, itd. Ovo olakšava saznanje koji deo koda obavlja određenu funkciju.
- Uvek je dobra ideja koristiti komentare u svoju korist. Bez obzira da li uključujete kratak opis ili samo dodajete belešku za sebe, komentari će vam izuzetno pomoći prilikom otklanjanja grešaka.
Organizacioni kod
Pravilno formatiranje vaših projekata ne samo da olakšava čitanje, već pomaže i u identifikaciji grešaka i održava vaš kod organizovanim. Iako nije neophodno za izvršavanje programa, znanje kako da formatirate svoje datoteke u VS Code-u je definitivna prednost.
Da li znate za druge načine da formatirate svoje datoteke u VS Code-u? Slobodno podelite svoje misli u odeljku za komentare ispod.