de Chiamaka Ikeanyi

Cum să configurați VSCode pentru a vă îmbunătăți productivitatea

Editorii de coduri au evoluat de-a lungul anilor. Acum câțiva ani, nu exista un cod Visual Studio (VS Code). Probabil că utilizați Sublime Text, Atom, Bracket etc. Dar odată cu lansarea VS Code, a devenit editorul de cod preferat al majorității dezvoltatorilor.

De ce cod VS?

Dezvoltatorilor le place pentru că

• Este personalizabil
• Depanare ușoară
• Emmet
• Extensii
• Integrarea Git
• Terminal integrat
• Intellisense
• Teme și multe altele …

Acum că ați văzut avantajele utilizării codului VS, acest articol va acoperi configurarea codului VS și extensiile necesare atunci când utilizați codul VS pentru o productivitate maximă.

Terminal

Poti configurați terminalul să utilizați iTerm2 și ZSh și să configurați terminalul VS Code pentru a utiliza acest lucru.

După configurarea Zsh, lansați terminalul integrat VS Code Terminal > New Terminaland executați comanda

source ~/.zshrc

sau

. ~/.zshrc

pentru a executa conținutul fișierului de configurare .zshrc din shell.

Font

FiraCode arată grozav din cauza suportului pentru ligaturi. Descărcați și instalați FiraCode, apoi adăugați-l la settings.json fişier.

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

Lansarea din linia de comandă

Lansarea codului VS de la terminal arată grozav. Pentru a face acest lucru, apăsați CMD + SHIFT + P, tastați comanda shell și selectați Instalați comanda de cod în cale. Apoi, navigați la orice proiect de la terminal și tastați code .din director pentru a lansa proiectul folosind VS Code.

Configurare

Configurațiile codului VS care nu sunt specifice unui spațiu de lucru sunt adăpostite în settings.json. Puteți configura codul VS pentru a se potrivi preferințelor dvs.

Pentru a lansa settings.json, apăsați

CMD + ,

Copiați și lipiți codul de mai jos în fișierul settings.json:

{    "editor.multiCursorModifier": "ctrlCmd",    "editor.formatOnPaste": true,    "editor.wordWrap": "bounded",    "editor.trimAutoWhitespace": true,    "editor.fontFamily": "Fira Code",    "editor.fontLigatures": true,    "editor.fontSize": 14,    "editor.formatOnSave": true,    "files.autoSave": "onFocusChange",    "emmet.syntaxProfiles": {        "javascript": "jsx"    },    "eslint.autoFixOnSave": true,    "eslint.validate": [        "javascript",        "javascriptreact"    ],    "javascript.validate.enable": true,    "git.enableSmartCommit": true,    "files.trimTrailingWhitespace": true,    "editor.tabSize": 2,    "gitlens.historyExplorer.enabled": true,    "diffEditor.ignoreTrimWhitespace": false,    "workbench.sideBar.location": "right",    "explorer.confirmDelete": false,    "javascript.updateImportsOnFileMove.enabled": "always",}

Extensii

Mai jos sunt extensii utile care vă pot îmbunătăți experiența dezvoltatorului atunci când lucrați la o bază de cod.

Pentru a accesa aceste extensii,

• Mergi la View -> Extensions
• Căutați extensii pe piață
• Faceți clic pe Instalare

1. Import automat

Cu această extensie, nu este nevoie să importați manual fișiere. Dacă lucrați la un proiect bazat pe componente, continuați și tastați numele componentei și va fi importat automat.

2. Adăugați comentarii jsdoc

Aceasta adaugă un bloc de comentarii la cod. Pentru ao utiliza, evidențiați prima linie a funcției, apăsați CMD + SHIFT + P și selectați Adăugați comentarii Doc.

3. ESDoc MDN

În anumite scenarii, avem tendința de a uita cum funcționează un anumit lucru. Aici devine utilă această extensie. Nu trebuie să vă lansați browserul web pentru a afla sintaxa. Tot ce aveți nevoie este să tastați

//mdn [object].[method];

4. CSS Peek

După cum sugerează și numele, acest lucru vă ajută să aruncați o privire asupra regulilor aplicate de un stil definit într-o bază de cod și a acestuia specificitate. Este util când lucrați la baze de cod vechi.

5. GitLens

GitLens stimulează ceea ce puteți obține cu Git. Vă ajută să faceți mult mai mult, cum ar fi explorarea perfectă a depozitelor Git, analizarea reviziilor de cod, autorie și multe altele.

6. ESLint

Aceasta integrează ESLint în codul VS pentru a scăpa codurile dvs. Proiectul la care lucrați trebuie să aibă ESLint instalat local sau global pentru a profita de caracteristicile oferite de această extensie.

Pentru a instala ESLint local, rulați

npm install eslint

sau utilizând global

npm install -g eslint

De asemenea, ar trebui să creați .eslintrc Fișier de configurare. Dacă ați instalat ESLint local, rulați

./node_modules/.bin/eslint --init

sau

eslint --init

pentru instalare globală.

7. Depanator pentru Chrome

Acest lucru vă permite să depanați codul JavaScript chiar din browserul Google Chrome

8. Fonturi Google

Adăugarea fonturilor Google a devenit mai ușoară cu această extensie. Nu mai trebuie să căutați fonturi în browser. Pentru a accesa o listă de fonturi, apăsațiCMD + SHIFT + P și căutați Fonturi Google a continua.

9. Evidențiați TODO

Cu multe lucruri pe care trebuie să le acordați prioritate, uneori s-ar putea să aveți tendința de a uita sarcinile care nu au fost încă îndeplinite. Evidențierea TODO le face ușor de văzut prin evidențierea lor.

10. Docker

Cu această extensie puteți crea fișiere Docker din mers. De asemenea, oferă evidențierea sintaxei, inteligență și multe altele.

Apăsați CMD + SHIFT + P și căutați Adăugați fișiere Docker în spațiul de lucru.

11. Cod ortografic

Acest lucru este util pentru a identifica erorile tipografice din baza de cod.

12. Costul importului

Costul de import arată impactul pachetelor importate în cadrul codului. Ajută la măsurarea blocajelor de performanță.

13. HTMLHint

Această extensie vă validează codul HTML, ajutându-vă să scrieți cod conform standardelor.

14. Păun

Această extensie vă oferă posibilitatea de a schimba culoarea spațiului dvs. de lucru. Este ideal atunci când aveți mai multe instanțe de cod VS și doriți să identificați rapid o anumită instanță.

După instalarea Peacock, faceți clic pe pictograma setări> setări, selectați fila setări spațiu de lucru, faceți clic pe {} și lipiți codul de mai jos.

{    "workbench.colorCustomizations": {        "activityBar.background": "#e90b8d",        "activityBar.foreground": "#fff",        "activityBar.inactiveForeground": "#b5b5b5",    },    "peacock.affectedElements": [        "activityBar",    ]}

De asemenea, puteți adăuga titleBar și statusBar elementelor afectate și adăugați personalizări de culoare pentru acestea în secțiunea ColorCustomizations.

Pentru a utiliza una dintre culorile implicite, apăsați CMD + SHIFT + P, tastați păun și selectați tema preferată. Aceasta suprascrie setările de culoare din fișierul settings.json definit pentru acel spațiu de lucru.

15. Mai frumoasă

Apăsați întotdeauna bara de spațiu sau tasta tab atunci când codificați? Aici vine Prettier la salvare. Formatează liniile de cod și îl face lizibil.

Verifică lucrurile minunate pe care le puteți face cu Visual Studio Code aici.

Simțiți-vă liber să renunțați la ceea ce funcționează în secțiunea de comentarii și să partajați acest articol.

De asemenea, verificați blogul meu pentru mai multe articole.