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 der beliebteste Code-Editor der meisten Entwickler.

Warum VS-Code?

Entwickler lieben es, weil

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

Nachdem Sie nun die Vorteile der Verwendung von VS Code kennengelernt haben, werden in diesem Artikel die Einrichtung von VS Code und die Erweiterungen beschrieben, die bei der 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 das VS Code-Terminal einrichten.

Starten Sie nach der Konfiguration von Zsh das in VS Code integrierte Terminal Terminal> Neues 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 es Ligaturen unterstützt. Laden Sie FiraCode herunter, installieren Sie es und fügen Sie es Ihrer settings.json-Datei hinzu.

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

Starten von der Kommandozeile

Das Starten von VS Code vom Terminal aus sieht cool aus. Drücken Sie hierzu CMD + UMSCHALT + P, geben Sie den Shell-Befehl ein und wählen Sie Code-Befehl im Pfad installieren aus. Navigieren Sie anschließend über das Terminal zu einem beliebigen Projekt und geben Sie den 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, sind in der Datei settings.json enthalten. Sie können VS Code nach Ihren Wünschen 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": "richtig",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "immer",
}

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,

  • Gehen Sie zu Ansicht -> Erweiterungen
  • Suchen Sie auf dem Marktplatz nach Erweiterungen
  • Klicken Sie auf Installieren

1. Automatischer Import

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

2. Fügen Sie jsdoc-Kommentare hinzu

Dies fügt dem Code einen Kommentarblock hinzu. Markieren Sie dazu die erste Zeile der Funktion, drücken Sie CMD + UMSCHALT + P und wählen Sie Dokumentkommentare hinzufügen.

3. ESDoc MDN

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

// mdn [Objekt]. [Methode];

4. CSS-Vorschau

Wie der Name schon sagt, können Sie auf diese Weise Regeln nachvollziehen, die von einem definierten Stil innerhalb einer Codebasis und ihrer Spezifität angewendet werden. Dies ist praktisch, wenn Sie an älteren Codebasen arbeiten.

5. GitLens

GitLens steigert das, was Sie mit Git erreichen können. Es hilft Ihnen dabei, viel mehr zu tun, z. B. das nahtlose Durchsuchen von Git-Repositorys, das Einsehen von Code-Revisionen, die Urheberschaft und vieles mehr.

6. ESLint

Dadurch wird ESLint in VS Code integriert, um Ihre Codes zu fusseln. Für das Projekt, an dem Sie arbeiten, muss ESLint entweder lokal oder global installiert sein, damit Sie die Funktionen dieser Erweiterung nutzen können.

Führen Sie zum lokalen Installieren von ESLint Folgendes aus

npm installiere eslint

oder global mit

npm install -g eslint

Sie müssten auch eine .eslintrc-Konfigurationsdatei erstellen. Wenn Sie ESLint lokal installiert haben, führen Sie es aus

./node_modules/.bin/eslint --init

oder

eslint --init

für die globale Installation.

7. Debugger für Chrome

Auf diese Weise können Sie Ihren JavaScript-Code direkt im Google Chrome-Browser debuggen

8. Google Fonts

Das Hinzufügen von Google-Schriftarten ist mit dieser Erweiterung jetzt noch einfacher. Sie müssen nicht mehr im Browser nach Schriftarten suchen. Um auf eine Liste der Schriftarten zuzugreifen, drücken Sie CMD + UMSCHALT + P und suchen Sie nach Google-Schriftarten, um fortzufahren.

9. TODO-Hervorhebung

Da Sie noch viel arbeiten müssen, um Prioritäten zu setzen, kann es vorkommen, dass Sie Aufgaben vergessen, die noch erledigt werden müssen. TODO highlight macht diese leicht sichtbar, indem es sie hervorhebt.

10. Docker

Mit dieser Erweiterung können Sie Dockerfiles im laufenden Betrieb erstellen. Es bietet auch Syntax-Hervorhebung, Intellisense und vieles mehr.

Drücken Sie CMD + UMSCHALT + P und suchen Sie nach Docker-Dateien zum Arbeitsbereich hinzufügen.

11. Code-Rechtschreibprüfung

Dies ist nützlich, um Tippfehler in der Codebasis zu identifizieren.

12. Importkosten

Die Importkosten zeigen die Auswirkungen der importierten Pakete im Code. Es hilft bei der Messung von Leistungsengpässen.

13. HTMLHint

Diese Erweiterung validiert Ihren HTML-Code und hilft Ihnen dabei, standardkonformen Code zu schreiben.

14. Pfau

Mit dieser Erweiterung können Sie die Farbe Ihres Arbeitsbereichs ändern. Dies ist ideal, wenn Sie mehrere VS Code-Instanzen haben und eine bestimmte Instanz schnell identifizieren möchten.

Klicken Sie nach der Installation von Peacock auf das Einstellungssymbol> Einstellungen, wählen Sie die Registerkarte Arbeitsbereichseinstellungen aus, klicken Sie auf {} und fügen Sie den folgenden Code ein.

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

Sie können den betroffenen Elementen auch titleBar und statusBar hinzufügen und Farbanpassungen für sie im Abschnitt colorCustomizations hinzufügen.

Um eine der Standardfarben zu verwenden, drücken Sie CMD + UMSCHALT + P, geben Sie peacock ein und wählen Sie Ihr bevorzugtes Thema aus. Dadurch werden die Farbeinstellungen in der settings.json-Datei überschrieben, die für diesen Arbeitsbereich definiert ist.

15. Hübscher

Drücken Sie beim Codieren immer die Leertaste oder die Tabulatortaste? Hier kommt Hübscher zur Rettung. Es formatiert Codezeilen und macht sie lesbar.

Informieren Sie sich hier über die großartigen Funktionen von Visual Studio Code.

Fühlen Sie sich frei, zu löschen, was für Sie im Kommentarbereich arbeitet und diesen Artikel zu teilen.

Besuchen Sie auch meinen Blog für weitere Artikel.