de Sam Williams

Fragmente de cod VS: cel mai puternic instrument pentru creșterea productivității codării

Scrieți mai mult cod cu mai puține apăsări de tastă

Fotografie de Dlanor S pe Unsplash

Toată lumea dorește să poată produce mai mult cod în mai puține apăsări de taste. Funcțiile săgeată din JavaScript au devenit incredibil de populare recent – și vă salvează doar 6 caractere!

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

Dar există o modalitate mai bună de a salva tastarea – iar acest articol vă va arăta instrumentul de a face acest lucru.

Fragmente de cod

De ani de zile, oamenii au folosit fragmente de cod pentru a economisi timp – indiferent dacă sunt funcții comune, structuri de fișiere sau chiar șabloane pentru sisteme întregi. Aceasta nu este o idee nouă.

Problema cu o mulțime de sisteme existente este că aceste fragmente erau adesea stocate în fișiere text sau alte sisteme de fișiere și trebuiau copiate manual și lipite oriunde erau necesare.

Acest lucru a fost minunat pentru fragmente mari de cod. Însă un singur liner a fost adesea mai rapid să tastați decât să caute fișierul, să îl copiați și să-l inserați

Următorul pas a fost instrumentele cum ar fi TextExpander sau AutoHotKeys, unde secvențele de chei speciale ar putea fi configurate pentru a lipi fragmente de cod oriunde ați scris. Acestea sunt minunate și vă pot economisi mult timp … dar putem face un pas mai departe.

Fragmente de cod VS

Fragmente de cod VS cel mai puternic instrument pentru cresterea

VS Code are un sistem mai puternic decât chiar TextExpander sau AutoHotKeys. Fragmentele sale de cod încorporate pot fi configurate pentru a face mult mai mult decât doar lipirea codului.

Înainte de a vorbi despre funcțiile fanteziste, vom învăța cum să creăm un fragment.

În VS Code, apăsați ctrl + shift + P pentru a deschide paleta de comenzi și căutați fragmentul. Selectarea „Configurare fragmente de utilizator” vă prezintă o listă de limbi de codare pentru care puteți crea un fragment. Vom merge cu JavaScript.

Aceasta deschide editorul de fragmente. Există un comentariu care vă arată cum să creați un fragment de bază, dar îl vom crea pe al nostru.

Acest fragment este unul care este linia mea preferată de cod. Este un model drăguț pentru gestionarea promisiunilor.

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

Pentru a crea fragmentul nostru, trebuie să creăm o nouă cheie în obiect. Această cheie indică un obiect cu un prefix, body și description .

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

Prefixul este textul pe care dorim să îl introducem pentru a declanșa acest fragment. Trebuie să vă asigurați că acest lucru este unic. Numindu-l handle ar declanșa fragmentul de fiecare dată când apelați funcția, astfel încât să putem merge cu ceva de genul promHandle .

Corpul este o serie de linii din fragment. Dacă aveți mai multe linii de cod, atunci veți avea mai multe șiruri în matricea de corpuri. Descrierea este ceea ce va fi afișat atunci când vedeți sugestia în VS Code.

Când toate acestea sunt finalizate, veți obține așa ceva:

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

Cu fișierul dvs. de fragment salvat, când începeți să tastați promhandle primiți o nouă sugestie. Apăsând la aceasta se afișează descrierea fragmentului, precum și prima linie a codului.

1612178646 85 Fragmente de cod VS cel mai puternic instrument pentru cresterea

Acum vă puteți salva sute de personaje creându-vă propriile fragmente. Dar există unele caracteristici și mai puternice!

Fila Inserați puncte

Când lipiți fragmentele dvs., de obicei, trebuie să adăugați informații despre informațiile pe care trebuie să le adăugați. Indiferent dacă este vorba de denumirea unei funcții sau de alegerea variabilelor, puteți seta puncte în cod în care trebuie să introduceți date. Când treceți peste aceste fragmente, puteți face fila între aceste puncte de inserare.

Pentru a adăuga un punct de inserare, trebuie doar să adăugați $1 pentru primul punct, $2 pentru al doilea și așa mai departe. Acest lucru este foarte util pentru funcțiile în care așteaptă un obiect.

"sendMessage": {    "prefix": "sendMessage",    "body": [        "await botHelper.sendToUser({message$1, userID});"    ],    "description": "await sending a message using bot helper"},
1612178647 464 Fragmente de cod VS cel mai puternic instrument pentru cresterea

Puteți avea mai multe puncte de filă răspândite în întregul cod, ceea ce înseamnă că vă puteți completa rapid și ușor fragmentul fără a fi nevoie să faceți clic sau săgeți în fiecare punct.

Fragmente specifice limbii

Când am deschis pentru prima dată editorul de fragmente, ni s-a prezentat o listă de limbi. Am ales JavaScript, dar ați fi putut alege oricare dintre celelalte 44 de limbi. Lucrul grozav despre fragmentele de cod VS este că pot fi blocate la un anumit tip de fișier.

Dacă scrieți un fișier HTML, nu veți primi toate fragmentele JavaScript sau Python. Acest lucru înseamnă, de asemenea, că puteți avea același prefix să producă fragmente diferite în funcție de tipul de fișier în care lucrați în prezent! Dar nu vă faceți griji, puteți adăuga în continuare fragmente globale dacă doriți să le puteți folosi în orice tip de fișier.

Fragmente specifice locației

În mod similar cu fragmentele specifice limbii, puteți crea și fragmente specifice fișierelor. Acest lucru poate fi extraordinar atunci când aceeași funcție numită face un lucru diferit în două proiecte diferite.

Doar selectați New Snippet file for '...' atunci când îți alegi limba.

Crearea mai multor fragmente

Acum știți modalitățile puternice prin care fragmentele de cod VS vă pot îmbunătăți productivitatea, probabil că doriți să faceți încărcături. Din păcate, pot fi frustrante de creat. Din fericire, există două soluții:

Generator de fragmente

Generator de fragmente este un site care vă permite să lipiți un anumit cod și să îl convertiți cu ușurință în format de fragment.

Este foarte ușor de utilizat și vă permite să creați rapid fragmente pe care să le puteți copia și lipi direct în fișierele dvs. de fragmente. Va funcționa cu orice limbă și este complet gratuit.

Fragmente de cod VS cel mai puternic instrument pentru cresterea

Extensii pentru fragmente

Dacă utilizați un cadru, cum ar fi React sau Angular, există o mulțime de fragmente pe care doriți să le creați. Din fericire, aceasta este o problemă pe care au mai avut-o alte persoane, așa că au creat biblioteci de fragmente comune pentru fiecare cadru.

Căutare de snippets în piața de extensii VS Code produce sute de rezultate pe care le puteți instala. Totul, de la React, Angular și Vue la ES6 JS, C # și PHP. Acestea au adesea o gamă completă de fragmente pentru a reduce în mod dramatic timpul petrecut la tastare.

Singurul dezavantaj al acestor extensii este că va trebui să aflați care sunt prefixele (declanșatoarele), dar le veți memora rapid pe cele pe care le utilizați cel mai mult.

Vă mulțumim că ați citit această postare pentru a vă crește productivitatea de codificare cu fragmentele de cod VS. Dacă ați învățat ceva, apoi apăsați butonul de clap? Și urmați-mă pentru mai multe sfaturi, trucuri și tutoriale!

1612178647 618 Fragmente de cod VS cel mai puternic instrument pentru cresterea