A VSCode beállítása a termelékenység javítása érdekében

A kódszerkesztők az évek során fejlődtek. Néhány évvel ezelőtt még nem volt Visual Studio Code (VS Code). Valószínűleg Sublime Text, Atom, Bracket stb. Használta. De a VS Code kiadásával a legtöbb fejlesztő kedvenc kódszerkesztőjévé vált.

Miért VS Code?

A fejlesztők azért szeretik, mert

  • Testreszabható
  • Könnyű hibakeresés
  • Hangya
  • Hosszabbítások
  • Git integráció
  • Integrált terminál
  • Intellisense
  • Témák és még sok más…

Most, hogy látta a VS Code használatának előnyeit, ez a cikk a VS Code beállításával és kiterjesztéseivel foglalkozik, amelyek a VS Code használatához szükségesek a maximális termelékenység érdekében.

Terminál

Beállíthatja a terminált az iTerm2 és a ZSh használatára, és a VS Code terminál beállítását is megadhatja ennek használatához.

A Zsh konfigurálása után indítsa el a VS Code integrált terminált, és Terminal > New Termifuttassa a parancsot

source ~/.zshrc

vagy

. ~/.zshrc

a .zshrc konfigurációs fájl tartalmának végrehajtásához a shellben.

Betűtípus

A FiraCode hűvösnek tűnik a ligatúrák támogatása miatt. Töltse le és telepítse a FiraCode-ot, majd adja hozzá a settings.jsonfájljához.

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

Indítás a parancssorból

A VS Code elindítása a terminálról nagyon jó. Ehhez nyomja meg a CMD + SHIFT + P billentyűkombinációt, írja be a shell parancsot, és válassza a Kód telepítése parancs elérési útjának lehetőséget . Ezután navigáljon a terminál bármelyik projektjéhez, és írja code .be a könyvtárból, hogy elindítsa a projektet a VS Code használatával.

Konfiguráció

A munkaterületre nem jellemző VS-kód konfigurációk a settings.json fájlban találhatók. Konfigurálhatja a VS-kódot az Ön igényei szerint.

A settings.json elindításához nyomja meg a gombot

CMD + ,

Másolja és illessze be az alábbi kódot a settings.json fájlba:

{ "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",}

Hosszabbítások

Az alábbiakban olyan hasznos bővítmények találhatók, amelyek javíthatják a fejlesztői élményt, amikor kódbázison dolgoznak.

A bővítmények eléréséhez

  • Menj View -> Extensionsra
  • Keressen bővítményeket a piacon
  • Kattintson a Telepítés gombra

1. Automatikus importálás

Ezzel a kiterjesztéssel nem kell manuálisan importálnia a fájlokat. Ha összetevő-alapú projekten dolgozik, csak folytassa, írja be az összetevő nevét, és az automatikusan importálódik.

2. Adjon hozzá jsdoc megjegyzéseket

Ez megjegyzésblokkot ad a kódhoz. Használatához CMD + SHIFT + Pjelölje ki a függvény első sorát, nyomja meg a gombot, és válassza a Dokumentum megjegyzések hozzáadása lehetőséget.

3. ESDoc MDN

Bizonyos esetekben hajlamosak vagyunk megfeledkezni egy adott dolog működéséről. Itt válik hasznossá ez a kiterjesztés. A szintaxis megismeréséhez nem kell elindítania a webböngészőt. Csak gépelésre van szükséged

//mdn [object].[method];

4. CSS Peek

Ahogy a neve is mutatja, ez segít megnézni azokat a szabályokat, amelyeket a kódbázis egy meghatározott stílusa alkalmaz, és annak sajátosságait. Ez jól jön, ha régi kódbázisokon dolgozunk.

5. GitLens

A GitLens növeli, mit érhet el a Git segítségével. Segít még sok minden másban, például a Git-tárolók zökkenőmentes felfedezésében, a kódváltozatokba való bepillantásban, a szerzőségben és még sok másban.

6. ESLint

Ez integrálja az ESLint-et a VS Code-ba a kódok szétválásához. A projekten, amelyen dolgozik, telepítenie kell az ESLint-t lokálisan vagy globálisan, hogy kihasználhassa a kiterjesztés által kínált szolgáltatásokat.

Az ESLint helyi telepítéséhez futtassa

npm install eslint

vagy globálisan használva

npm install -g eslint

Létre kell hoznia a .eslintrckonfigurációs fájlt is. Ha helyileg telepítette az ESLint programot, futtassa

./node_modules/.bin/eslint --init

vagy

eslint --init

globális telepítéshez.

7. Hibakereső a Chrome-hoz

Ez lehetővé teszi a JavaScript-kód hibakeresését közvetlenül a Google Chrome böngészőben

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.