VS-kodestykker: det mest kraftfulde værktøj til at øge din kodningsproduktivitet

Skriv mere kode med færre tastetryk

Alle ønsker at være i stand til at producere mere kode i færre tastetryk. Pilefunktioner i JavaScript er blevet utroligt populære for nylig - og de sparer kun 6 tegn!

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

Men der er en bedre måde at gemme skrivning på - og denne artikel viser dig værktøjet til at gøre det.

Kodestykker

I årevis har folk brugt kodestykker for at spare tid - hvad enten det er almindelige funktioner, filstrukturer eller endda skabeloner til hele systemer. Dette er ikke en ny idé.

Problemet med mange eksisterende systemer er, at disse uddrag ofte blev gemt i tekstfiler eller andre filsystemer og skulle kopieres manuelt og indsættes, hvor de var nødvendige.

Dette var fantastisk til store kodestykker. Men one-liners var ofte hurtigere at skrive end at søge efter filen, kopiere den og indsætte den.

Det næste trin var værktøjer som TextExpander eller AutoHotKeys, hvor specielle nøglesekvenser kunne indstilles til at indsætte kodestykker overalt, hvor du skrev. Disse er fantastiske og kan spare dig for masser af tid ... men vi kan tage det et skridt videre.

VS-kodestykker

VS Code har et system, der er mere kraftfuldt end selv TextExpander eller AutoHotKeys. Dens indbyggede kodestykker kan konfigureres til at gøre meget mere end bare at indsætte koden.

Før vi taler om de smarte funktioner, lærer vi, hvordan man opretter et uddrag.

I VS-kode skal du trykke på ctrl + shift + P for at åbne kommandopaletten og søge efter uddrag. Ved at vælge 'Konfigurer brugeruddrag' vises en liste over kodningssprog, som du kan oprette et uddrag til. Vi går med JavaScript.

Dette åbner uddragseditoren. Der er en kommentar, der viser dig, hvordan du opretter et grundlæggende uddrag, men vi opretter vores eget.

Dette uddrag er en, der er min yndlingslinje med kode. Det er et godt mønster til løftehåndtering.

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

For at oprette vores uddrag skal vi oprette en ny nøgle i objektet. Denne nøgle peger på et objekt med a prefix, bodyog description.

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

Præfikset er den tekst, som vi vil indtaste for at udløse dette uddrag. Du skal sørge for, at dette er unikt. Hvis du kalder det handle, udløses uddraget hver gang du ringer til funktionen, så vi kan gå med noget lignende promHandle.

Kroppen er en række linier i uddraget. Hvis du har flere linjer med kode, har du flere strenge i body array. Beskrivelsen er, hvad der vises, når du ser forslaget i VS-kode.

Når alt dette er afsluttet, får du noget som dette:

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

Når din uddragsfil er gemt, når du begynder at skrive promhandle, får du et nyt forslag. At nede ned til det viser beskrivelsen af ​​uddraget samt den første linje i koden.

Nu kan du spare dig hundreder af tegn ved at oprette dine egne uddrag. Men der er nogle endnu mere kraftfulde funktioner!

Fanen Indsæt punkter

Når du indsætter dine uddrag, er der normalt bit af information, som du skal tilføje. Uanset om det er navngivning af en funktion eller valg af variabler, kan du indstille punkter i din kode, hvor du skal indtaste data. Når du går forbi disse uddrag, kan du fane mellem disse indsættelsespunkter.

For at tilføje et indsættelsespunkt skal du bare tilføje $1for det første punkt, $2for det andet osv. Dette er virkelig nyttigt til funktioner, hvor de forventer et objekt.

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

Du kan have flere fanepunkter spredt over hele koden, hvilket betyder, at du hurtigt og nemt kan udfylde dit uddrag uden at skulle klikke eller piletast til hvert punkt.

Sprogspecifikke uddrag

Da vi først åbnede uddragseditoren, blev vi præsenteret for en liste over sprog. Vi valgte JavaScript, men du kunne have valgt et af de andre 44 sprog. Det fantastiske ved VS-kodestykker er, at de kan låses til en bestemt filtype.

Hvis du skriver en HTML-fil, får du ikke alle dine JavaScript- eller Python-uddrag. Dette betyder også, at du kan få det samme præfiks til at producere forskellige uddrag baseret på den filtype, du aktuelt arbejder i! Men rolig, du kan stadig tilføje globale uddrag, hvis du vil kunne bruge dem i enhver filtype.

Stedsspecifikke uddrag

På samme måde som sprogspecifikke uddrag kan du også oprette mappespecifikke uddrag. Dette kan være godt, når den samme navngivne funktion gør en anden ting i to forskellige projekter.

Vælg bare, New Snippet file for '...'når du vælger dit sprog.

Oprettelse af flere uddrag

Nu kender du de effektive måder, hvorpå VS-kodestykker kan forbedre din produktivitet, du vil sandsynligvis lave belastninger. Desværre kan de være frustrerende at skabe. Heldigvis er der to løsninger:

Stykkegenerator

Snippet Generator er et sted, der giver dig mulighed for at indsætte en eller anden kode og nemt konvertere den til uddragformat.

Det er virkelig nemt at bruge og lader dig hurtigt oprette uddrag, som du bare kan kopiere og indsætte direkte i dine uddragsfiler. Det fungerer på ethvert sprog og er helt gratis.

Stykkeudvidelser

Hvis du bruger en ramme, såsom React eller Angular, er der masser af uddrag, som du vil oprette. Heldigvis er dette et problem, som andre mennesker har haft før, så de har oprettet biblioteker med almindelige uddrag til hver ramme.

At søge efter snippetsi VS Code-udvidelsesmarkedet giver hundredvis af resultater, som du kan installere. Alt fra React, Angular og Vue til ES6 JS, C # og PHP. Disse har ofte et komplet udvalg af uddrag, der dramatisk reducerer din tid til at skrive.

Den ene ulempe ved disse udvidelser er, at du bliver nødt til at lære, hvad præfikser (udløsere) er, men du vil hurtigt huske dem, du bruger mest.

Tak, fordi du læste dette indlæg om at øge din kodningsproduktivitet med VS-kodestykker. Hvis du har lært noget, skal du trykke på den klapp? -Knap og følge mig for flere tip, tricks og tutorials!