VS-kódrészletek: a leghatékonyabb eszköz a kódolás termelékenységének növelésére

Írjon több kódot kevesebb billentyűleütéssel

Mindenki azt akarja, hogy több kódot lehessen előállítani kevesebb billentyűleütéssel. A JavaScript nyílfüggvényei hihetetlenül népszerűvé váltak az utóbbi időben - és csak 6 karaktert spórolnak meg Önnek!

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

De van egy jobb módszer a gépelés mentésére - és ez a cikk megmutatja az eszközt.

Kódrészletek

Évek óta az emberek kódrészleteket használnak az időmegtakarítás érdekében - függetlenül attól, hogy ezek közös funkciók, fájlstruktúrák vagy akár egész rendszerek sablonjai. Ez nem új ötlet.

Sok létező rendszerrel az a probléma, hogy ezeket a kivonatokat gyakran szöveges fájlokban vagy más fájlrendszerekben tárolták, és kézzel kellett másolniuk, és mindenhova be kellett illeszteniük, ahová csak szükségük volt.

Ez nagyszerű volt a nagy kódrészleteknél. De az egyvonalasakat gyakran gyorsabban beírták, mint megkeresni a fájlt, másolni és beilleszteni.

A következő lépés olyan eszközök voltak, mint a TextExpander vagy az AutoHotKeys, ahol speciális kulcssorozatok állíthatók be a kódrészletek beillesztésére, bárhová gépeltek. Ezek nagyszerűek, és rengeteg időt takaríthatnak meg Önnek ... de tehetünk egy lépéssel tovább.

VS kódrészletek

A VS Code egy olyan rendszerrel rendelkezik, amely erősebb, mint akár a TextExpander vagy az AutoHotKeys. Beépített kódrészletei sokkal többre is konfigurálhatók, mint csak a kód beillesztése.

Mielőtt a divatos funkciókról beszélnénk, megtanuljuk, hogyan kell létrehozni egy részletet.

A VS-kódban nyomja meg a ctrl + shift + P billentyűkombinációt a parancspaletta megnyitásához és a kódrészlet megkereséséhez. A „Felhasználói kivonatok konfigurálása” kiválasztása megmutatja a kódoló nyelvek listáját, amelyekhez kivonatot készíthet. JavaScript-el fogunk menni.

Ez megnyitja a kódrészlet-szerkesztőt. Van egy megjegyzés, amely bemutatja, hogyan hozhat létre egy alaprészletet, de mi magunk készítjük el.

Ez a részlet a kedvenc kódsorom. Ez egy jó minta az ígéretek kezelésére.

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

A kódrészlet létrehozásához új kulcsot kell létrehoznunk az objektumban. Ez a kulcs egy objektumra mutat, amelynek a prefix, bodyés description.

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

Az előtag az a szöveg, amelyet be akarunk írni a kódrészlet elindításához. Meg kell győződnie arról, hogy ez egyedi. Hívása handlekiváltja a kódrészletet, valahányszor meghívja a függvényt, hogy ilyesmivel folytathassuk promHandle.

A törzs a kivonat sorainak tömbje. Ha több kódsorod van, akkor a string tömbben több karakterlánc is szerepel. A leírás akkor jelenik meg, amikor meglátja a javaslatot a VS-kódban.

Amikor mindez befejeződik, valami ilyesmit kap:

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

Mentett kivonatfájljával, amikor gépelni kezd, promhandleúj javaslatot kap. Ha erre kattint, megjelenik a kódrészlet leírása, valamint a kód első sora.

Most több száz karaktert takaríthat meg saját részletek létrehozásával. De vannak még erőteljesebb funkciók!

Tabulátum Pontok beillesztése

A kivonatok beillesztésekor általában apró információk találhatók, amelyeket hozzá kell adnia. Legyen szó függvény elnevezéséről vagy a változók kiválasztásáról, a kódban megadhatja azokat a pontokat, ahová adatokat kell beírnia. Ha túl van ezen a kivonaton, akkor a fenti beillesztési pontok között mozoghat.

Beszúrási pont hozzáadásához csak hozzá kell adni $1az első ponthoz, $2a másodikhoz és így tovább. Ez valóban hasznos azoknál a funkcióknál, ahol egy objektumra számítanak.

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

Több tabulátorpont osztható el a kódban, ami azt jelenti, hogy gyorsan és egyszerűen feltöltheti a kódrészletet anélkül, hogy az egyes pontokhoz kellene kattintania vagy nyílbillentyűt kell tennie.

Nyelvspecifikus kivonatok

Amikor először megnyitottuk a kódrészlet-szerkesztőt, bemutattuk a nyelvek listáját. A JavaScript-et választottuk, de választhatta a 44 másik nyelv bármelyikét. A VS-kódrészletek nagyszerű tulajdonsága, hogy egy adott fájltípushoz zárhatók.

Ha HTML fájlt ír, akkor nem fogja megkapni az összes JavaScript vagy Python kódrészletet. Ez azt is jelenti, hogy ugyanazzal az előtaggal különböző kivonatokat készíthet a jelenleg használt fájltípus alapján! De ne aggódjon, akkor is hozzáadhat globális kivonatokat, ha bármilyen fájltípusban használni szeretné őket.

Helyspecifikus kivonatok

A nyelvspecifikus kivonatokhoz hasonlóan létrehozhat mappaspecifikus részleteket is. Ez nagyszerű lehet, ha ugyanaz a megnevezett függvény két különböző projektben mást csinál.

Csak válassza ki New Snippet file for '...'a nyelv kiválasztásakor.

Több részlet létrehozása

Most már tudja, milyen hatékony módszerekkel javíthatja a termelékenységet a VS-kódrészletek, valószínűleg terhelni akar. Sajnos frusztráló lehet az alkotás. Szerencsére két megoldás létezik:

Snippet Generator

A Snippet Generator egy olyan webhely, amely segítségével beilleszthet valamilyen kódot, és könnyedén átalakíthatja azt kódrészlet formátumra.

Nagyon egyszerű a használata, és lehetővé teszi, hogy gyorsan készítsen részleteket, amelyeket egyszerűen átmásolhat és beilleszthet egyenesen a kivonatfájlokba. Bármely nyelvvel működik, és teljesen ingyenes.

Részletek kiterjesztései

Ha olyan keretrendszert használ, mint például a React vagy az Angular, akkor sok kivonatot szeretne létrehozni. Szerencsére ez más emberek problémája volt korábban, ezért minden egyes keretrendszerhez létrehoztak közös kivonatokból álló könyvtárakat.

snippetsHa a VS Code kiterjesztés piacterén keres , több száz eredményt hozhat létre, amelyeket telepíthet. Minden a React, Angular és Vue, az ES6 JS, C # és PHP között. Ezek gyakran tartalmazzák a teljes kivonatkészletet, hogy drámai módon csökkentsék a gépeléssel töltött időt.

Ezeknek a kiterjesztéseknek az egyetlen hátránya, hogy meg kell tanulnia, mi az előtag (kiváltó), de gyorsan megjegyzi a leggyakrabban használtakat.

Köszönjük, hogy elolvasta ezt a bejegyzést a kódolási termelékenység növeléséről a VS kódrészletekkel. Ha valamit megtanult, nyomja meg a taps? Gombot, és kövessen engem további tippekért, trükkökért és oktatóanyagokért!