Útržky kódu VS: najsilnejší nástroj na zvýšenie produktivity vášho kódovania

Napíšte viac kódu a menej stlačených klávesov

Každý chce byť schopný produkovať viac kódu za menej stlačených klávesov. Funkcie šípok v JavaScripte sa v poslednej dobe stali neuveriteľne populárnymi - a ušetria vám iba 6 znakov!

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

Existuje však lepší spôsob, ako uložiť písanie - a tento článok vám ukáže nástroj, ako to urobiť.

Úryvky kódu

Už roky ľudia používajú útržky kódu na úsporu času - či už sú to bežné funkcie, štruktúry súborov alebo dokonca šablóny pre celé systémy. Toto nie je nový nápad.

Problém mnohých existujúcich systémov spočíva v tom, že tieto úryvky boli často uložené v textových súboroch alebo iných súborových systémoch a bolo ich potrebné ručne skopírovať a vložiť všade, kde ich bolo potrebné.

To bolo skvelé pre veľké úryvky kódu. Jednoradové linky sa však často písali rýchlejšie ako vyhľadať súbor, skopírovať ho a vložiť.

Ďalším krokom boli nástroje ako TextExpander alebo AutoHotKeys, kde bolo možné nastaviť špeciálne sekvencie klávesov na vkladanie útržkov kódu do ľubovoľného miesta, kde ste písali. Sú vynikajúce a môžu vám ušetriť veľa času ... ale môžeme to posunúť ešte o krok ďalej.

Útržky kódu VS

VS Code má systém, ktorý je výkonnejší ako dokonca TextExpander alebo AutoHotKeys. Jeho vstavané úryvky kódu je možné nakonfigurovať tak, aby umožňovali oveľa viac, ako len vloženie kódu.

Predtým, ako hovoríme o efektných funkciách, sa naučíme, ako vytvoriť úryvok.

V kóde VS stlačením klávesovej skratky ctrl + shift + P otvorte paletu príkazov a vyhľadajte úryvok. Výber možnosti Konfigurovať úryvky používateľov vám ponúkne zoznam kódovacích jazykov, pre ktoré môžete vytvoriť úryvok. Pôjdeme s JavaScriptom.

Týmto sa otvorí editor úryvkov. Existuje komentár, ktorý ukazuje, ako vytvoriť základný úryvok, ale vytvoríme si vlastný.

Tento úryvok je môj obľúbený riadok kódu. Je to pekný vzor pre splnenie sľubu.

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

Aby sme vytvorili náš úryvok, musíme v objekte vytvoriť nový kľúč. Tento kľúč ukazuje na objekt s prefix, bodya description.

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

Predpona je text, ktorý chceme zadať, aby sme spustili tento úryvok. Musíte sa ubezpečiť, že je to jedinečné. Jeho volanie handleby spustilo úryvok zakaždým, keď zavoláte funkciu, aby sme mohli ísť s niečím podobným promHandle.

Telo je pole riadkov v úryvku. Ak máte viac riadkov kódu, budete mať v poli tela viac reťazcov. Popis sa zobrazí, keď sa návrh zobrazí vo VS kóde.

Keď je toto všetko dokončené, dostanete niečo také:

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

Po uložení súboru s úryvkami získate pri začatí písania promhandlenový návrh. Kľúčové slovo dole, ktoré zobrazuje popis úryvku, ako aj prvý riadok kódu.

Teraz si môžete ušetriť stovky postáv vytvorením vlastných úryvkov. Existujú však ešte niektoré výkonnejšie funkcie!

Vložiť body na kartu

Pri vkladaní úryvkov sú zvyčajne potrebné kúsky informácií, ktoré musíte pridať. Či už je to pomenovanie funkcie alebo výber premenných, môžete v kóde nastaviť body, do ktorých musíte zadať údaje. Keď vložíte tieto úryvky, môžete medzi nimi vložiť kartu.

Ak chcete pridať bod vloženia, stačí pridať $1iba prvý bod, $2druhý bod atď. To je skutočne užitočné pre funkcie, kde očakávajú objekt.

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

V celom kóde môžete mať rozmiestnených viac bodov tabulátora, čo znamená, že svoj úryvok môžete rýchlo a ľahko vyplniť bez toho, aby ste na každý bod museli klikať alebo šípkovať.

Útržky špecifické pre jazyk

Pri prvom otvorení editora úryvkov sa nám zobrazil zoznam jazykov. Vybrali sme si JavaScript, ale mohli ste zvoliť ktorýkoľvek z ďalších 44 jazykov. Na úryvkoch VS Code je skvelé to, že sa dajú uzamknúť na konkrétny typ súboru.

Ak píšete súbor HTML, nezískate všetky svoje útržky kódu JavaScript alebo Python. To tiež znamená, že rovnaká predpona môže vytvárať rôzne úryvky podľa typu súboru, v ktorom momentálne pracujete! Nemusíte sa však báť, stále môžete pridať globálne úryvky, ak ich chcete použiť v akomkoľvek type súboru.

Úryvky špecifické pre jednotlivé miesta

Podobne ako úryvky špecifické pre jazyk, môžete vytvoriť aj úryvky špecifické pre priečinok. To môže byť skvelé, keď funkcia s rovnakým menom urobí v dvoch rôznych projektoch inú vec.

Stačí si vybrať New Snippet file for '...'pri výbere jazyka.

Vytvára sa viac úryvkov

Teraz poznáte účinné spôsoby, ako môžu úryvky VS Code zvýšiť vašu produktivitu, pravdepodobne budete chcieť načítať. Bohužiaľ, ich tvorba môže byť frustrujúca. Našťastie existujú dve riešenia:

Generátor úryvkov

Snippet Generator je web, ktorý umožňuje vložiť nejaký kód a ľahko ho previesť do formátu úryvku.

Používanie je skutočne jednoduché a umožňuje vám rýchlo vytvárať úryvky, ktoré stačí skopírovať a vložiť priamo do súborov úryvkov. Funguje v akomkoľvek jazyku a je úplne zadarmo.

Rozšírenia úryvkov

Ak používate rámec, napríklad React alebo Angular, existuje veľa úryvkov, ktoré budete chcieť vytvoriť. Našťastie ide o problém, ktorý už mali iní ľudia, a preto vytvorili knižnice bežných úryvkov pre každý rámec.

Hľadanie na snippetstrhu s rozšírením VS Code prináša stovky výsledkov, ktoré si môžete nainštalovať. Všetko od React, Angular a Vue po ES6 JS, C # a PHP. Často majú celú škálu úryvkov, ktoré vám dramaticky skrátia čas strávený písaním.

Jednou nevýhodou týchto rozšírení je, že sa budete musieť naučiť, aké sú predpony (spúšťače), ale tie, ktoré najčastejšie používate, si rýchlo zapamätáte.

Ďakujeme, že ste si prečítali tento príspevok o zvýšení produktivity programovania pomocou úryvkov kódu VS Code. Ak ste sa niečo naučili, stlačte toto tlačidlo Tlieskať? A sledujte ma, aby ste získali ďalšie tipy, triky a návody!