Sådan opsættes VSCode for at forbedre din produktivitet

Kode redaktører har udviklet sig gennem årene. For et par år siden var der ingen Visual Studio-kode (VS-kode). Du brugte sandsynligvis Sublime Text, Atom, Bracket osv. Men med udgivelsen af ​​VS Code er det blevet favoritkodeditor for de fleste udviklere.

Hvorfor VS-kode?

Udviklere elsker det fordi

  • Det kan tilpasses
  • Nem fejlfinding
  • Emmet
  • Udvidelser
  • Git-integration
  • Integreret terminal
  • Intellisense
  • Theming og mere ...

Nu hvor du har set fordelene ved at bruge VS-kode, vil denne artikel dække VS-kodeopsætning og udvidelser, der er nødvendige, når du bruger VS-kode til maksimal produktivitet.

Terminal

Du kan indstille din terminal til at bruge iTerm2 og ZSh og have din VS Code terminalopsætning til at bruge det.

Efter konfiguration af Zsh, start den VS Code integrerede terminal Terminal > New Terminaland kør kommandoen

source ~/.zshrc

eller

. ~/.zshrc

for at udføre indholdet af .zshrc-konfigurationsfilen i skallen.

Skrifttype

FiraCode ser cool ud på grund af understøttelse af ligaturer. Download og installer FiraCode, og tilføj den derefter til din settings.jsonfil.

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

Start fra kommandolinjen

Lancering af VS-kode fra terminalen ser cool ud. For at gøre dette skal du trykke på CMD + SHIFT + P, skrive shell-kommando og vælge Installer kode-kommando i sti . Bagefter skal du navigere til ethvert projekt fra terminalen og skrive code .fra biblioteket for at starte projektet ved hjælp af VS-kode.

Konfiguration

VS-kodekonfigurationer, der ikke er specifikke for et arbejdsområde, er anbragt i settings.json. Du kan konfigurere VS-kode, så den passer til dine præferencer.

For at starte settings.json skal du trykke på

CMD + ,

Kopier og indsæt koden nedenfor i filen 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",}

Udvidelser

Nedenfor er nyttige udvidelser, der kan forbedre din udvikleroplevelse, når du arbejder på en codebase.

For at få adgang til disse udvidelser,

  • Gå til View -> Extensions
  • Søg efter udvidelser på markedet
  • Klik på Installer

1. Automatisk import

Med denne udvidelse behøver du ikke importere filer manuelt. Hvis du arbejder på et komponentbaseret projekt, skal du bare gå videre og skrive komponentnavnet, så importeres det automatisk.

2. Tilføj jsdoc-kommentarer

Dette tilføjer en kommentarblok til koden. For at bruge den skal du fremhæve den første linje i funktionen, trykke på CMD + SHIFT + Pog vælge Tilføj dokumentkommentarer.

3. ESDoc MDN

I visse scenarier har vi en tendens til at glemme, hvordan en bestemt ting fungerer. Det er her, denne udvidelse bliver nyttig. Du behøver ikke at starte din webbrowser for at finde ud af syntaksen. Alt hvad du behøver er at skrive

//mdn [object].[method];

4. CSS-kig

Som navnet antyder, hjælper dette dig med at kigge på regler, der anvendes af en defineret stil inden for en kodebase og dens specificitet. Det er nyttigt, når du arbejder på ældre kodebaser.

5. GitLens

GitLens øger det, du kan opnå med Git. Det hjælper dig med at gøre meget mere, såsom at sømløse udforske Git-arkiver, kigge ind i kodeversioner, forfatterskab og meget mere.

6. ESLint

Dette integrerer ESLint i VS-kode for at fnise dine koder. Det projekt, du arbejder med, skal have ESLint installeret enten lokalt eller globalt for at drage fordel af de funktioner, som denne udvidelse tilbyder.

For at installere ESLint lokalt skal du køre

npm install eslint

eller globalt ved hjælp af

npm install -g eslint

Du skal også oprette .eslintrckonfigurationsfil. Hvis du har installeret ESLint lokalt, skal du køre

./node_modules/.bin/eslint --init

eller

eslint --init

til global installation.

7. Fejlfinding til Chrome

Dette giver dig mulighed for at fejle din JavaScript-kode direkte fra Google Chrome-browseren

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.

For at bruge en af ​​standardfarverne skal du trykke på CMD + SKIFT + P, skrive påfugl og vælge dit foretrukne tema. Dette tilsidesætter farveindstillingerne i den indstillinger.json-fil, der er defineret for det pågældende arbejdsområde.

15. Pænere

Trykker du altid mellemrumstasten eller tabulatortasten, når du koder? Her kommer Prettier til undsætning. Det formaterer kodelinjer og gør det læsbart.

Tjek de fantastiske ting, du kan gøre med Visual Studio Code her.

Du er velkommen til at droppe det, der fungerer for dig i kommentarfeltet og dele denne artikel.

Tjek også min blog for flere artikler.