Kuidas seadistada VSCode oma tootlikkuse parandamiseks

Koodiredaktorid on aastate jooksul arenenud. Mõni aasta tagasi ei olnud Visual Studio koodi (VS-koodi). Tõenäoliselt kasutasite Sublime Text, Atom, Bracket jne. Kuid VS Code'i väljaandmisega on see muutunud enamiku arendajate lemmikkoodiredaktoriks.

Miks VS kood?

Arendajatele meeldib see sellepärast

  • See on kohandatav
  • Lihtne silumine
  • Emmet
  • Laiendused
  • Giti integreerimine
  • Integreeritud terminal
  • Intellisense
  • Teemad ja palju muud ...

Nüüd, kui olete näinud VS-koodi kasutamise eeliseid, käsitletakse selles artiklis VS-koodi seadistamist ja laiendusi, mida on vaja VS-koodi kasutamiseks maksimaalse tootlikkuse saavutamiseks.

Terminal

Võite oma terminali seadistada iTerm2 ja ZSh kasutamiseks ning lasta oma VS Code terminali seadistada.

Pärast Zsh konfigureerimist käivitage integreeritud terminali VS Code naland ja Terminal > New Termikäivitage käsk

source ~/.zshrc

või

. ~/.zshrc

.zshrc konfiguratsioonifaili sisu täitmiseks kestas.

Font

FiraCode tundub ligatuuride toetamise tõttu lahe. Laadige alla ja installige FiraCode, seejärel lisage see oma settings.jsonfaili.

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

Käivitamine käsurealt

VS-koodi käivitamine terminalist tundub lahe. Selleks vajutage klahve CMD + SHIFT + P, tippige käsk shell ja valige käsk Install code in path . Seejärel navigeerige terminalist mis tahes projekti juurde ja tippige code .kataloogist projekti käivitamiseks VS-koodi abil.

Konfiguratsioon

Tööruumi mittespetsiifilised VS-koodi konfiguratsioonid asuvad seadetes.json. VS-koodi saate konfigureerida vastavalt oma eelistustele.

Settings.jsoni käivitamiseks vajutage

CMD + ,

Kopeerige ja kleepige allolev kood faili 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",}

Laiendused

Allpool on kasulikud laiendused, mis võivad teie arendaja kogemusi parandada koodibaasiga töötamisel.

Nendele laiendustele juurdepääsemiseks

  • Mine View -> Extensions
  • Otsige laiendusi turult
  • Klõpsake nuppu Install

1. Automaatne import

Selle laiendusega ei pea te faile käsitsi importima. Kui töötate komponendipõhise projektiga, sisestage lihtsalt komponendi nimi ja see imporditakse automaatselt.

2. Lisage jsdoc kommentaarid

See lisab koodile kommentaaride ploki. Selle kasutamiseks tõstke esile funktsiooni esimene rida, vajutage CMD + SHIFT + Pja valige Add Doc Comments.

3. ESDoc MDN

Teatud stsenaariumide korral kipume unustama, kuidas konkreetne asi töötab. Siin saab see laiendus kasulikuks. Süntaksist teada saamiseks pole vaja veebibrauserit käivitada. Vaja on vaid tippida

//mdn [object].[method];

4. CSS Peek

Nagu nimigi ütleb, aitab see teil piiluda reegleid, mida koodibaasis määratletud stiil rakendab, ja selle spetsiifikat. See on kasulik, kui töötate pärandkoodibaaside kallal.

5. GitLens

GitLens suurendab seda, mida saate Gitiga saavutada. See aitab teil teha palju muud, näiteks Giti hoidlate sujuvat uurimist, koodiversioonide piilumist, autorlust ja palju muud.

6. ESLint

See integreerib ESLinti VS-koodi, et koodid kokku puutuda. Projekt, millega te töötate, peab selle laienduse funktsioonide kasutamiseks installima ESLinti kas lokaalselt või globaalselt.

ESLinti lokaalseks installimiseks käivitage

npm install eslint

või globaalselt kasutades

npm install -g eslint

Samuti peate looma .eslintrckonfiguratsioonifaili. Kui installisite ESLinti lokaalselt, käivitage

./node_modules/.bin/eslint --init

või

eslint --init

ülemaailmseks installimiseks.

7. Chrome'i silur

See võimaldab teil oma JavaScripti koodi siluda otse Google Chrome'i brauseris

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.

Ühe vaikevärvi kasutamiseks vajutage klahve CMD + SHIFT + P, tippige paabulind ja valige eelistatud teema. See alistab värvi sätted selle tööruumi jaoks määratud failis settings.json.

15. ilusam

Kas vajutate kodeerimisel alati tühikuklahvi või tabulaatoriklahvi? Siit tuleb ilusam appi. See vormindab koodiread ja muudab selle loetavaks.

Vaadake siin fantastilisi asju, mida saate Visual Studio koodiga teha.

Jätke julgesti kommentaaride jaotisse see, mis teile sobib, ja jagage seda artiklit.

Vaadake ka minu blogist rohkem artikleid.