So richten Sie VSCode ein, um Ihre Produktivität zu verbessern

Code-Editoren haben sich im Laufe der Jahre weiterentwickelt. Vor einigen Jahren gab es keinen Visual Studio-Code (VS-Code). Sie haben wahrscheinlich Sublime Text, Atom, Bracket usw. verwendet. Mit der Veröffentlichung von VS Code ist es jedoch zum bevorzugten Code-Editor der meisten Entwickler geworden.

Warum VS Code?

Entwickler lieben es, weil

  • Es ist anpassbar
  • Einfaches Debuggen
  • Emmet
  • Erweiterungen
  • Git-Integration
  • Integriertes Terminal
  • Intellisense
  • Theming und mehr…

Nachdem Sie die Vorteile der Verwendung von VS-Code erkannt haben, werden in diesem Artikel die Einrichtung und die Erweiterungen von VS-Code behandelt, die bei Verwendung von VS-Code für maximale Produktivität erforderlich sind.

Terminal

Sie können Ihr Terminal für die Verwendung von iTerm2 und ZSh einrichten und Ihr VS-Code-Terminal dafür einrichten.

Starten Sie nach der Konfiguration von Zsh das integrierte VS Code-Terminal Terminal > New Terminal und führen Sie den Befehl aus

source ~/.zshrc

oder

. ~/.zshrc

um den Inhalt der .zshrc-Konfigurationsdatei in der Shell auszuführen.

Schriftart

FiraCode sieht cool aus, weil Ligaturen unterstützt werden. Laden Sie FiraCode herunter, installieren Sie es und fügen Sie es Ihrer settings.jsonDatei hinzu.

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

Starten über die Befehlszeile

Das Starten von VS Code vom Terminal aus sieht cool aus. Drücken Sie dazu CMD + UMSCHALT + P, geben Sie den Shell-Befehl ein und wählen Sie den Befehl Code installieren im Pfad . Navigieren Sie anschließend vom Terminal zu einem beliebigen Projekt und geben Sie es code .aus dem Verzeichnis ein, um das Projekt mit VS Code zu starten.

Aufbau

VS-Code-Konfigurationen, die nicht für einen Arbeitsbereich spezifisch sind, befinden sich in der Datei settings.json. Sie können VS Code entsprechend Ihren Einstellungen konfigurieren.

Drücken Sie, um die Datei settings.json zu starten

CMD + ,

Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei settings.json ein:

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

Erweiterungen

Im Folgenden finden Sie nützliche Erweiterungen, die Ihre Entwicklererfahrung bei der Arbeit an einer Codebasis verbessern können.

Um auf diese Erweiterungen zuzugreifen,

  • Gehe zu View -> Extensions
  • Suchen Sie nach Erweiterungen auf dem Marktplatz
  • Klicken Sie auf Installieren

1. Automatischer Import

Mit dieser Erweiterung müssen Sie Dateien nicht manuell importieren. Wenn Sie an einem komponentenbasierten Projekt arbeiten, geben Sie einfach den Komponentennamen ein und dieser wird automatisch importiert.

2. Fügen Sie jsdoc-Kommentare hinzu

Dies fügt dem Code einen Kommentarblock hinzu. Um es zu verwenden, markieren Sie die erste Zeile der Funktion, drücken Sie CMD + SHIFT + Pund wählen Sie Dokumentkommentare hinzufügen.

3. ESDoc MDN

In bestimmten Szenarien vergessen wir häufig, wie eine bestimmte Sache funktioniert. Hier wird diese Erweiterung nützlich. Sie müssen Ihren Webbrowser nicht starten, um die Syntax herauszufinden. Alles was Sie brauchen, ist zu tippen

//mdn [object].[method];

4. CSS Peek

As the name implies, this helps you peek on rules applied by a defined style within a codebase and its specificity. It comes in handy when working on legacy codebases.

5. GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more, such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

6. ESLint

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.

To install ESLint locally, run

npm install eslint

or globally using

npm install -g eslint

You would also need to create .eslintrc configuration file. If you installed ESLint locally, run

./node_modules/.bin/eslint --init

or

eslint --init

for global installation.

7. Debugger for Chrome

This lets you debug your JavaScript code right from the Google Chrome browser

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.