Page tree
Skip to end of metadata
Go to start of metadata

Auf dieser Seite können Tipps zur Konfiguration und coole PlugIns gesammelt werden.


Workspace anlegen

  1. VS-Code öffnen
  2. einzelne Ordner in den Arbeitsbereich ziehen (schulcloud-client, schulcloud-server, ...)
  3. Workspace speichern
  4. Durch öffnen der nun gespeicherten Datei wird alles wieder so geöffnet, wie der Workspace verlassen wurde

Attach: Zentrale Debuggingconfig außerhalb der Repo-Ordner

Mit der Methode "attach" heftet sich VS Code an eine bestehende, in einer separaten Konsole laufende SC-Instanz an. VS Code führt die Instanz nicht selber aus, sondern nur das Debugging.

/Projektverzeichnis
    /.vscode
        /launch.json
    /schulcloud-client
    /schulcloud-server
    / ...

Nur eine launch.json wird benötigt und liegt außerhalb der Repository-Verzeichnisse. Damit überleben die Configs auch ein Löschen und Neueinrichten aller Repos.

Beispielconfig Projektverzeichnis/.vscode/launch.json

{
"version""0.2.0",
"configurations"
[
    {
        "type""node",
        "request""attach",
        "name""Client",
        "port"9310,
        "skipFiles": [
            "${workspaceFolder}/schulcloud-client/node_modules/**/*.js",
            <node_internals>/**/*.js"
        ]
    },
    {
        "type""node",
        "request""attach",
        "name""Server",
        "port"5959,
        "skipFiles": [
            "${workspaceFolder}/schulcloud-server/node_modules/**/*.js",
            "<node_internals>/**/*.js"
        ]
    },   
    {
        Weitere Repos

Attach: Alternativ: Einzelne Repo-spezifische Configs innerhalb der Repo-Ordner

Mit der Methode "attach" heftet sich VS Code an eine bestehende, in einer separaten Konsole laufende SC-Instanz an. VS Code führt die Instanz nicht selber aus, sondern nur das Debugging.

/Projektverzeichnis
    /schulcloud-client
        /.vscode
            /launch.json
    /schulcloud-server
        /.vscode
            /launch.json
    / ...

Für das Debugging mit VS-Code muss für jeden der Dienste eine /.vscode/launch.json Datei im jeweiligen Ordner (schulcloud-client, ...) erstellt werden und der jeweilige Dienst mit npm run debug gestartet werden.

Beispielconfig schulcloud-client/.vscode/launch.json

{
  "version""0.2.0",
  "configurations": [
    {
      "type""node",
      "request""attach",
      "name""Client",
      "port"9310
    },
  ]
}


Disable telematry options for data privacy reasons in settings.json

~/Library/Application Support/Code/User/settings.json

{
"telemetry.enableCrashReporter"false,
 "telemetry.enableTelemetry"false
}


Für die weiteren Dienste muss im jeweiligen Ordner die gleiche Datei erstellt werden und folgende Werte angepasst werden:

Reponameport

schulcloud-server/.vscode/launch.json

"Server"5959

superhero-dashboard/.vscode/launch.json

"SuperHero-Dashboard"9311
...


Das ist auch schon alles. Jetzt kann man über das Debug-Fenster einfach den Debugger an den laufenden Service anhängen.


launch: Repo-spezifische Config

Mit der Methode "launch" startet VS Code die entsprechende Instanz + Debugging selbst, es wird kein extra Fenster geöffnet.

  1. Repository in VS Code öffnen
  2. Zu Debug-Ansicht wechseln (Icon links in der Leiste oder Ctrl + Shift + D / Cmd + Shift + D)
  3. In der Toolbar das Zahnrad-Icon ("Open launch.json") anklicken 
  4. Neue Konfiguration hinzufügen und speichern:

    launch.json
    {
      "type": "node",
      "request": "launch",
      "name": "Debug",
      "program": "${workspaceFolder}\\src\\index.js",
      "outputCapture": "std",
      "env": {
        "HOST": "http://localhost:3030",
      },
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  5. Breakpoints setzen und mit F5 oder grünem Pfeil-Icon in der Toolbar den Debugger starten

Node Version Manager

Es ist wichtig, die im entsprechenden Repository vermerkten Node-Versionen zu nutzen. Die aktuell zu verwendende Version wird in der Datei .nvmrc angegeben. Damit Visual Studio Code diese beim Ausführen auch nutzt, kann entweder die NVM-Erweiterung für VSCode verwenden oder diese manuell in der Konfiguration angeben über 

            "runtimeVersion": "8.15.0"

Dazu muss NVM installiert sein. Installieren


Plugins

Gerne erweitern. 🤗

ESLint


NameBeschreibung
ESLintZeigt Linter-Fehler basierend auf der .eslintrc.json an und kann diese automatisch korrigieren. Dazu in den Settings eslint.autoFixOnSave setzen. 

VSCode Settings

NameBeschreibung

German Language Pack for Visual Studio Code


[EDITOR] keymapPlugin um Tastenkombinationen eines geliebten Editors weiter verwenden zu können.
Bspw. "notepad++ keymap", "JetBrains IDE Keymap", ...
Settings SyncZum Synchronisieren der VS-Code Konfiguration über ein Github-Gist mit anderen Geräten und Benutzern.
"files.insertFinalNewline": true
always add an empty new line at the end of files


General-Tools

NameBeschreibung
Git BlameZeigt unten in der Statusleiste an, wann, wer die aktuelle Zeile zuletzt bearbeitet hat
Git KrakenFree Git GUI client. Simplifies complicated coimmands into drag and drop actions. 
GitHub Pull RequestsErmöglicht das Reviewen direkt im Editor. Zusätzlich gibt es super nützliche Listen wie "Waiting for my review", "Assigned to me", ...
NPM SkriptsListet alle npm run ... Befehle im Editor-Fenster auf und kann diese mit nur einem Klick starten.
Git HistoryZeigt die History einer Datei und mehr Features darin
NVMFührt Node in VS-Code unter Berücksichtigung der Versionsangaben in der .nvmrc-Datei aus.
NVM useFührt nvm use im Terminal aus

VSCode Extensions

NameBeschreibung
Auto Close TagSchließt automatisch geöffnete HTML-Tags
Auto Rename TagBenennt automatisch den schließenden HTML-Tag mit um, wenn der öffnende bearbeitet wird
Bracket Pair ColorizerNie wieder Klammer-Verwirrung
Document ThisJSdoc aus Funktionssignatur erstellen und einfach bearbeiten

Docker

Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
GitLensSupercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens
Import CostZeigt bei den meisten import statements an, wie viel Code importiert wird. Besonders nützlich bei Frontend-Skripten wo jedes Byte zählt.
Live ShareReal-time collaborative development from the comfort of your favorite tools.
PeacockSubtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which
TODO HighlightsMarkiert und listet TODOs auf.
vscode-pdf

Erlaubt das öffnen von PDFs direkt in VS-Code

vscode-iconsOrdner- und Filetype-Icons im Dateibrowser von VSCode


Copy the following code into your terminal to install the extensions listed above


code --install-extension formulahendry.auto-close-tag
code --install-extension formulahendry.auto-rename-tag
code --install-extension CoenraadS.bracket-pair-colorizer
code --install-extension ms-azuretools.vscode-docker
code --install-extension eamodio.gitlens
code --install-extension joelday.docthis
code --install-extension dbaeumer.vscode-eslint
code --install-extension ms-vsliveshare.vsliveshare
code --install-extension johnpapa.vscode-peacock
code --install-extension wayou.vscode-todo-highlight
code --install-extension tomoki1207.pdf
code --install-extension vscode-icons-team.vscode-icons









  • No labels