Isječci VS koda: najmoćniji alat za povećanje produktivnosti kodiranja

Napišite više koda s manje pritiskanja tipki

Svatko želi biti u mogućnosti proizvesti više koda s manje pritiskanja tipki. Funkcije strelica u JavaScript-u postale su nevjerojatno popularne u posljednje vrijeme - i štede vam samo 6 znakova!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Ali postoji bolji način za spremanje tipkanja - i ovaj će vam članak pokazati alat za to.

Isječci koda

Ljudi su godinama koristili isječke koda kako bi uštedjeli vrijeme - bilo da su to uobičajene funkcije, strukture datoteka ili čak predlošci za cijele sustave. To nije nova ideja.

Problem većine postojećih sustava je taj što su se ovi isječci često spremali u tekstualne datoteke ili druge datotečne sustave te ih je trebalo ručno kopirati i zalijepiti gdje god su bili potrebni.

Ovo je bilo izvrsno za velike isječke koda. No, jednostruke linije često su se brže upisivale nego tražile datoteku, kopirale i lijepile.

Sljedeći korak bili su alati kao što su TextExpander ili AutoHotKeys, gdje se mogu postaviti posebne sekvence ključeva za lijepljenje isječaka koda gdje god ste tipkali. Izvrsne su i mogu vam uštedjeti puno vremena ... ali možemo napraviti jedan korak dalje.

Isječci VS koda

VS Code ima sustav koji je moćniji od čak i TextExpander ili AutoHotKeys. Njegovi ugrađeni isječci koda mogu se konfigurirati da rade mnogo više od pukog lijepljenja koda.

Prije nego što razgovaramo o otmjenim značajkama, naučit ćemo kako stvoriti isječak.

U VS Code pritisnite ctrl + shift + P da biste otvorili paletu naredbi i tražili isječak. Odabirom "Konfiguriranje korisničkih isječaka" prikazuje vam se popis jezika kodiranja za koje možete stvoriti isječak. Idemo s JavaScriptom.

Ovo otvara uređivač isječaka. Postoji komentar koji vam pokazuje kako stvoriti osnovni isječak, ali mi ćemo stvoriti svoj vlastiti.

Ovaj isječak je moj omiljeni redak koda. To je lijep obrazac za rješavanje obećanja.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Da bismo stvorili svoj isječak, moramo stvoriti novi ključ u objektu. Ova tipka pokazuje na objekt s prefix, bodyi description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

Prefiks je tekst koji želimo unijeti za pokretanje ovog isječka. Morate biti sigurni da je ovo jedinstveno. Njegov poziv handleaktiviralo bi isječak svaki put kad pozovete funkciju kako bismo mogli krenuti s nečim sličnim promHandle.

Tijelo je niz linija u isječku. Ako imate više redaka koda, imat ćete više nizova u nizu tijela. Opis je ono što će biti prikazano kad vidite prijedlog u VS Code.

Kad se sve ovo završi, dobijete otprilike ovo:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Sa spremljenom datotekom isječka, kad počnete tipkati promhandle, dobit ćete novi prijedlog. Pritiskom na to prikazuje se opis isječka kao i prvi redak koda.

Sada možete spasiti stotine znakova stvaranjem vlastitih isječaka. Ali postoje neke još snažnije značajke!

Tab Umetanje bodova

Kada zalijepite svoje isječke, obično trebate dodati komadiće informacija. Bilo da je riječ o imenovanju funkcije ili odabiru varijabli, u kodu možete postaviti točke na koje trebate unijeti podatke. Kad prođete ove isječke, možete prelaziti između tih točaka umetanja.

Da biste dodali točku umetanja, samo trebate dodati $1za prvu točku, $2za drugu i tako dalje. Ovo je stvarno korisno za funkcije kod kojih očekuju objekt.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

Možete imati više točaka na karticama raspoređenih po kodu, što znači da možete brzo i jednostavno popuniti svoj isječak bez potrebe za klikom ili tipkom sa strelicom do svake točke.

Isječci specifični za jezik

Kad smo prvi put otvorili uređivač isječaka, predstavljen nam je popis jezika. Odabrali smo JavaScript, ali mogli ste odabrati bilo koji od ostalih 44 jezika. Sjajna stvar kod isječaka VS koda je što se mogu zaključati za određenu vrstu datoteke.

Ako pišete HTML datoteku, nećete dobiti sve svoje JavaScript ili Python isječke. To također znači da možete imati isti prefiks da proizvodi različite isječke na temelju vrste datoteke u kojoj trenutno radite! Ali ne brinite, i dalje možete dodati globalne isječke ako ih želite koristiti u bilo kojoj vrsti datoteke.

Isječci specifični za lokacije

Na sličan način kao isječci specifični za jezik, također možete stvoriti isječke određene mape. To može biti sjajno kada ista imenovana funkcija u dva različita projekta radi različitu stvar.

Samo odaberite New Snippet file for '...'kad odabirete svoj jezik.

Stvaranje više isječaka

Sada znate moćne načine na koje isječci VS koda mogu poboljšati vašu produktivnost, vjerojatno želite izvršiti opterećenje. Nažalost, mogu biti frustrirajuće za stvaranje. Srećom postoje dva rješenja:

Generator isječaka

Snippet Generator je web mjesto koje vam omogućuje da zalijepite neki kôd i lako ga pretvorite u format isječka.

Zaista je jednostavan za upotrebu i omogućuje vam brzo stvaranje isječaka koje možete jednostavno kopirati i zalijepiti izravno u datoteke isječaka. Radit će na bilo kojem jeziku i potpuno je besplatan.

Proširenja isječaka

Ako koristite okvir, poput React-a ili Angular-a, postoji mnogo isječaka koje ćete željeti stvoriti. Srećom ovo je problem koji su drugi ljudi imali i ranije pa su stvorili knjižnice uobičajenih isječaka za svaki okvir.

Traženje na snippetstržištu proširenja VS Code daje stotine rezultata koje možete instalirati. Sve od React, Angular i Vue do ES6 JS, C # i PHP. Oni često imaju čitav niz isječaka koji vam dramatično smanjuju vrijeme provedeno na tipkanju.

Nedostatak ovih proširenja je taj što ćete morati naučiti koji su prefiksi (okidači), ali brzo ćete zapamtiti one koje najčešće upotrebljavate.

Zahvaljujemo što ste pročitali ovaj post o povećanju vaše produktivnosti kodiranja pomoću isječaka VS koda. Ako ste nešto naučili, pritisnite tipku za pljesak i slijedite me za više savjeta, trikova i vodiča!