de Chiamaka Ikeanyi

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

Cum sa configurati VSCode pentru a va imbunatati 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.

1611911888 158 Cum sa configurati VSCode pentru a va imbunatati productivitatea
"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.

1611911888 61 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.

1611911888 577 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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];
1611911888 760 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.

1611911889 517 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.

1611911889 464 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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

1611911889 415 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.

1611911889 277 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.

1611911890 990 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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ță.

1611911890 344 Cum sa configurati VSCode pentru a va imbunatati productivitatea

13. HTMLHint

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

1611911890 260 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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ță.

1611911890 869 Cum sa configurati VSCode pentru a va imbunatati productivitatea

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.