Kako postaviti VSCode za poboljšanje vaše produktivnosti

Urednici koda razvijali su se tijekom godina. Prije nekoliko godina nije postojao Visual Studio Code (VS Code). Vjerojatno ste koristili Sublime Text, Atom, Bracket itd. Ali s izdavanjem VS koda postao je omiljeni uređivač koda većine programera.

Zašto VS kod?

Programeri to vole jer

  • Prilagodljiv je
  • Jednostavno ispravljanje pogrešaka
  • Mrav
  • Proširenja
  • Git integracija
  • Integrirani terminal
  • Intellisense
  • Teme i još više ...

Sad kad ste vidjeli prednosti korištenja VS koda, ovaj će članak obuhvatiti postavljanje VS koda i proširenja potrebna za upotrebu VS koda za maksimalnu produktivnost.

Terminal

Možete postaviti svoj terminal da koristi iTerm2 i ZSh i postaviti postavku vašeg VS Code terminala da to koristi.

Nakon konfiguriranja Zsh, pokrenite VS Code integrirani terminal i Terminal > New Termipokrenite naredbu

source ~/.zshrc

ili

. ~/.zshrc

za izvršavanje sadržaja .zshrc konfiguracijske datoteke u ljusci.

Font

FiraCode izgleda cool zbog podrške za ligature. Preuzmite i instalirajte FiraCode, a zatim ga dodajte u svoju settings.jsondatoteku.

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

Pokretanje iz naredbenog retka

Pokretanje VS koda s terminala izgleda super. Da biste to učinili, pritisnite CMD + SHIFT + P, upišite naredbu ljuske i na putu odaberite naredbu Instaliraj kod . Nakon toga dođite do bilo kojeg projekta s terminala i upišite code .iz direktorija da biste pokrenuli projekt pomoću VS koda.

Konfiguracija

Konfiguracije VS koda koje nisu specifične za radni prostor smještene su unutar postavke.json. Možete konfigurirati VS kod prema vašim željama.

Da biste pokrenuli settings.json, pritisnite

CMD + ,

Kopirajte i zalijepite donji kod u datoteku 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",}

Proširenja

Ispod su korisna proširenja koja mogu poboljšati vaše iskustvo za programere prilikom rada na bazi koda.

Da biste pristupili tim proširenjima,

  • Idite na View -> Extensions
  • Potražite proširenja na tržištu
  • Kliknite Instaliraj

1. Automatski uvoz

S ovim proširenjem ne morate ručno uvoziti datoteke. Ako radite na projektu koji se temelji na komponentama, samo natipkajte naziv komponente i automatski će se uvesti.

2. Dodajte jsdoc komentare

To kôdu dodaje blok komentara. Da biste ga koristili, označite prvi redak funkcije, pritisnite CMD + SHIFT + Pi odaberite Add Doc Comments.

3. ESDoc MDN

U određenim scenarijima obično zaboravljamo kako određena stvar funkcionira. Tu ovo proširenje postaje korisno. Ne trebate pokretati web preglednik da biste saznali sintaksu. Sve što trebate je tipkati

//mdn [object].[method];

4. Zavirivanje u CSS

Kao što naziv implicira, ovo vam pomaže zaviriti u pravila koja primjenjuje definirani stil unutar baze kodova i njihove specifičnosti. Dobro dolazi kada radite na naslijeđenim bazama kodova.

5. GitLens

GitLens pojačava ono što možete postići s Gitom. Pomaže vam učiniti puno više, poput neprimjetnog istraživanja Git spremišta, zavirivanja u revizije koda, autorstva i još mnogo toga.

6. ESLint

Ovo integrira ESLint u VS kôd kako bi obložio vaše kodove. Za projekt na kojem radite ESLint mora biti instaliran lokalno ili globalno kako bi se iskoristile značajke koje ovo proširenje nudi.

Da biste lokalno instalirali ESLint, pokrenite

npm install eslint

ili globalno

npm install -g eslint

Također biste trebali stvoriti .eslintrckonfiguracijsku datoteku. Ako ste ESLint instalirali lokalno, pokrenite

./node_modules/.bin/eslint --init

ili

eslint --init

za globalnu instalaciju.

7. Program za ispravljanje pogrešaka za Chrome

To vam omogućuje otklanjanje pogrešaka u JavaScript kodu izravno iz preglednika Google Chrome

8. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

9. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

10. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker

This comes in handy to identify typographical errors within the codebase.

12. Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint

This extension validates your HTML helping you to write standards-compliant code.

14. Peacock

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

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

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

15. Prettier

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

Check out the awesome things you can do with Visual Studio Code here.

Feel free to drop what works for you in the comment section and share this article.

Also, check out my blog for more articles.