Sfaturi și trucuri VSCode pentru utilizatorii cu putere

De ce aș vrea să fiu un utilizator puternic al Visual Studio?

A deveni un utilizator cu putere este o altă modalitate de a rămâne în frunte. Dezvoltatorii vorbesc adesea despre cum rămân în vârful jocului lor și despre cum învață constant lucruri noi și continuă să-și perfecționeze abilitățile. Aceasta este o întrebare frecvent pusă la interviu, deoarece angajatorii tind să prefere talentul dedicat extinderii setului de abilități. Stăpânirea IDE-ului și a computerului ar putea fi una dintre cele mai bune investiții în dezvoltarea ta profesională.

Dezvoltatorii caută mereu un nou blog care să-i facă mai buni în munca lor. Indiferent de IDE-ul pe care îl utilizați, probabil că are un blog: Abonați-vă!

Un alt motiv este că pur și simplu economisește timp. Investirea timpului în îmbunătățirea fluxului de lucru poate aduce rezultate mai mari ca productivitate mai mare sau mai mult timp pentru a vă distra. Astăzi, vom arunca o privire mai atentă asupra Visual Studio și VSCode și vom discuta modalități de îmbunătățire a abilităților până la punctul de a deveni un utilizator cu putere.

Cum devin un utilizator cu putere VSCode?

Iată ce diferențiază un utilizator obișnuit de un utilizator cu putere :

• Cunoștințe intime despre IDE-ul tău: VSCode are o documentație excelentă, citește-o!
• Personalizare: utilizatorii puternici își adaptează fluxul de lucru pentru a se potrivi nevoilor lor specifice.
• Automatizați toate sarcinile plictisitoare și repetitive.
• Îmbunătățiți-vă continuu fluxul de lucru și urmăriți evoluția IDE-ului dvs.

În acest articol, intenționez să explic cum am abordat eu însumi fiecare dintre aceste puncte și să vă elaborez cunoștințele necesare pentru a o face pe cont propriu. Ceea ce fac nu va funcționa neapărat pentru tine, cel puțin nu în totalitate. Oamenii lucrează în medii și proiecte diferite (pentru mine, în principal lucrează cu React.js și TypeScript pe Windows), dar abordarea generală este valabilă pentru toată lumea.

Testează cu Jest

Scriu câte un test, ceea ce înseamnă că am nevoie de o modalitate de a rula câte un test. Cu toate acestea, soluția nativă regex este destul de greoaie. De aceea folosesc Jest Runner. Această extensie utilă vă permite să executați sau să depanați suite sau teste individuale.

Videoclipul de mai jos arată că tot ce trebuie să faceți este să faceți clic dreapta pe numele testului și să utilizați meniul contextual pentru al rula.

Testarea cu Pact

Partea cea mai consumatoare de timp a scrierii unui test de contract este, probabil, potrivirea. Am rezolvat acest lucru creând fragmente utile pentru a automatiza acțiunile repetitive. Acestea sunt unele pe care le-am făcut, nu ezitați să le folosiți (adică, pur și simplu copiați și lipiți-le în /snippets/typescript.json al lui /snippets/typescript.json ).

Videoclipul de mai jos arată cum să utilizați aceste fragmente:

1. Selectați toate aparițiile de același tip, adică selectați toate șirurile, timpul și alte valori.
2. Utilizați combinarea de taste predefinită sau invocați Insert Snippet și selectați fragmentul relevant sau începeți pur și simplu să tastați prefixul fragmentului pe care doriți să îl utilizați.

Git

Majoritatea dezvoltatorilor folosesc Git și GitHub zilnic, la fel și eu. Cu toate acestea, încerc să evit să folosesc terminalul sau github.com.

Solicitările și problemele GitHub Pull îmi permit să deschid, să editez și să revizuiesc PR-uri în confortul VSCode. Consider că IDE-ul meu este un loc mai bun pentru a revizui codul decât aplicațiile web sau desktop ale GitHub. Unii dezvoltatori ar putea să nu fie de acord, dar apreciez consistența și confortul de a face acest lucru în IDE-ul meu.

Git poate face atât de multe, dar am memorat atât de puține dintre comenzile sale. Dar de ce să memorezi ceva în primul rând? Memorarea prea multor aspecte granulare ale rutinei tale nu este prea productivă.

GitLens expune o multitudine de funcții uimitoare la îndemâna dumneavoastră. Datorită acesteia, rareori trebuie să ajung la terminal pentru a folosi Git.

Personalizarea terminalului

Indiferent de sistemul de operare pe care îl utilizați, puteți face mai bine decât terminalul implicit. Folosesc Windows Terminal + cmder. Dacă sunteți utilizator Unix, căutați iTerm (macOS) sau Oh My Zsh (Linux și macOS). Le-am integrat cu VSCode și am adăugat multe alias-uri (comenzi rapide) care mă scutesc de timp de la scrierea comenzilor.

De exemplu:

• ys = yarn start - mă ajută să pornesc o aplicație cu doar două caractere
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - șterge directorul furnizat și afișează un mesaj de succes când este gata
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - șterge toate ramurile locale, cu excepția master

Salvarea câtorva personaje ici și colo ar putea părea o prostie, dar aceste funcții care economisesc timp se adaugă pe termen lung. Găsesc un avantaj secundar în a face aliasuri — să petrec mai puțin timp tastându-le mă ajută să rămân concentrat și să nu-mi pierd trenul de gândire pentru că nu încerc să-mi amintesc cum să invoc comanda.

Generarea codului

Crearea unei noi componente, pagini etc. este ceva ce fac frecvent și este destul de simplu, așa cum vor ști majoritatea cititorilor. Dar crearea unui folder nou și inițializarea fișierelor în el poate fi plictisitoare. Deci, am automatizat acest proces.

Videoclipul de mai jos arată Supercharge React în uz. Folosind New Component , pot specifica numele și locația noii componente. Extensia rulează apoi un script care creează un folder și inițializează această nouă componentă.

IntelliSense

VSCode are IntelliSense puternic și, de cele mai multe ori, nu trebuie să vă gândiți să îl utilizați. Cu toate acestea, atunci când răsfoiți sugestii, puteți apăsa Ctrl+Space pentru a vedea documentația despre fiecare opțiune disponibilă.

IntelliSense poate fi personalizat suplimentar pentru a se potrivi fluxului de lucru și preferințelor personale.

Comenzi rapide de la tastatură

Sunt sigur că utilizați comenzi rapide precum Ctrl+S și Ctrl+F . Toate sunt bine documentate și, dacă nu sunteți prea familiarizat cu gama largă de comenzi rapide ale VSCode, vă îndemn să schimbați acest lucru și să faceți eforturi suplimentare pentru a le stăpâni. O anumită legare este prea greoaie? O comandă pe care o invoci adesea durează prea mult timp pentru a o tasta? Deschideți editorul de tastatură al lui VSCode pentru a crea comenzi rapide.

Dacă vă întrebați dacă o comandă a fost atribuită unei anumite combinații de taste, faceți clic pe butonul de la tastatură din bara de căutare, unde puteți înregistra apăsările de taste. Veți vedea apoi ce/dacă comenzile au fost asociate cu acestea.

Comenzi rapide pentru mouse

Deseori dezvoltatorilor li se spune că, pentru a fi productivi, trebuie să învețe să-și urască mouse-ul și să-și iubească tastatura . Acest lucru ar putea fi valabil dacă lucrați la fișiere mici și dense. Dar într-o epocă a formatării automate a codului și a fișierelor care conțin sute de linii de cod, aș susține că aceasta este mai mult o excepție decât regula.

Nu numai că îmi folosesc în mod activ mouse-ul, dar l-am personalizat pentru a se potrivi fluxului meu de lucru folosind Logitech Options. Am programat tastele speciale de pe mouse pentru a efectua anumite comenzi în VSCode.

Iată cum vă puteți „învăța” mouse-ul să facă ceva mai mult decât să muteți cursorul și să faceți clic:

1. Selectați VSCode din meniul din dreapta sus.
2. Faceți clic pe butonul pe care doriți să îl personalizați.
3. Selectați Alocarea tastei din lista de acțiuni din stânga.
4. Introduceți o comandă rapidă predefinită în VSCode.

Setări de backup și sincronizare

Nu prea are rost să personalizați ceva dacă nu îl puteți face o copie de rezervă și îl reutilizați oricând aveți nevoie din nou.

Soluția nativă este disponibilă momentan doar pentru persoane din interior. Cu toate acestea, Sincronizarea setărilor vă ajută să vă salvați setările codului ca Gist și vă permite să vă sincronizați fluxul de lucru între mai multe mașini. Aveți nevoie de un token GitHub pentru a-l configura, dar ulterior, trebuie doar să rulați o singură comandă pentru a încărca și descărca setările.

Extensii VSCode recomandate

Am menționat deja mai multe extensii și am explicat cum le folosesc. Iată câteva mențiuni notabile:

• Surround: trebuie să împachetați un cod selectat într-o funcție de săgeată sau poate un bloc try-catch? Această extensie o va face pentru tine!
• Căutați node_modules: chiar dacă nu ați exclus node_modules din exploratorul VSCode pentru o creștere a performanței, acel folder este atât de mare încât este imposibil de navigat. Această extensie vă permite să căutați ceea ce căutați în loc să derulați la nesfârșit.
• Glean și React Refactor oferă câteva instrumente utile de refactorizare pentru fișierele dvs. JSX.
• Eticheta de închidere automată adaugă automat eticheta de închidere pentru fișierele HTML/JSX/TSX.
• File Utils: o modalitate convenabilă de a crea, duplica, muta, redenumește și șterge fișiere și directoare. Este, de asemenea, personalizabil.
• JavaScript Booster automatizează unele acțiuni comune de refactorizare.

rezumat

Nu fi un utilizator obișnuit. În schimb, fiți un utilizator cu putere. Mergeți întotdeauna cu un pas mai departe decât ceilalți și vedeți unde vă duce. Luați întotdeauna notă de ineficiențe și încercați să le atenuați.

Soluția mea la acest lucru ar trebui să fie familiară pentru majoritatea dezvoltatorilor: o placă Kanban . De fiecare dată când observ ceva care mă încetinește, îl notez ca de făcut. Ori de câte ori am ceva timp de liber, încerc să găsesc o remediere.

Dacă ați găsit această postare copleșitoare și nu știți de unde să începeți, citiți documentele, vă va oferi cel mai bun ROI ! Știu că citirea documentației oficiale sună plictisitoare, dar promit că va da roade pe termen lung. Nu numai că te va învăța cum să fii mai productiv, dar vei învăța cum ar trebui să fie scrisă documentația.

Pentru a fi mai ușor, am compilat această listă de părți care trebuie citite din documente:

• Sfaturi și trucuri: Unele sunt evidente și probabil că știți deja, deși vă pot garanta că veți găsi ceva despre care nu știați.
• Hack-uri de editare: Aceste hack-uri de editare sunt incredibil de puternice, iar învățarea lor vă va aduce beneficii zilnic.
• Reduceți/Extindeți codul: Încercați această comandă rapidă când faceți asociere cu un alt dezvoltator, pentru a-i impresiona!
• Legături de taste: Aflați cum funcționează legăturile de taste și cum să le personalizați, este una dintre pietrele de temelie ale stăpânirii IDE-ului dvs.
• Sute de limbaje de programare acceptate: Aflați ce caracteristici specifice are VSCode pentru limba aleasă.