VS Code

VS Code

https://code.visualstudio.com

Open-Source-Entwicklungsumgebung

Unabhängig vom eigentlichen Visual Studio

Grundlegendes

• Öffnen eines Ordners
• Datei-Explorer

Befehlspalette

F1 oder Ctrl + Shift + P: Befehlspalette

• durchsuchbar
• zeigt Kurzbefehle an

Befehlspalette

Beispiele für Befehle:

• View: Toggle Terminal
• Format Document
• Find
• Search: Find in Files
• Preferences: Open Settings (UI)
• Toggle line comment / Toggle block comment
• Go to definition / Peek definition (nur für bestimmte Dateitypen)
• Rename symbol (nur für bestimmte Dateitypen)

Konfiguration

Via File - Preferences - Settings

Eingeteilt in User Settings und Workspace Settings

Konfigurationsmöglichkeiten

Empfehlungen:

• Accept Suggestion on Commit Character (Autovervollständigung ohne Enter): bei Verwendung von JavaScript / TypeScript deaktivieren
• Tab Size: 2 oder 4

Weitere Möglichkeiten:

• Auto Save
• Format on Save
• Word Wrap
• EOL

Extensions

VS Code Extensions für JavaScript

Extensions-Sidebar öffnen: fünftes Symbol auf der linken Seite

mögliche Extensions:

• Prettier (Code-Formatierung)
• ESLint (Linter)

Prettier

• automatische Code-Formatierung nach strikten Regeln
• für JavaScript, HTML, CSS
• Tastenkürzel: Shift + Alt + F

ESLint

Linter mit mehr Funktionalität als der Standard-Linter von VS Code

Debugging von JavaScript

Debugging von JavaScript

Möglichkeiten:

• ein node.js debug Terminal starten; JS Code von dort ausführen
• eine JavaScript-Datei im Debugger von node.js starten (konfiguriert via launch.json)
• mit dem Debugger eines Browsers verbinden (konfiguriert via launch.json)

aufrufbar mittels des Run-Tabs in der Sidebar

Debugger-Konfiguration

Debugger wird via .vscode/launch.json konfiguriert

Erstellen einer Konfigurationsdatei: In der Run-Sidebar, wähle create a launch.json file

Debugging mit node.js

Beispiel eines launch.json-Eintrages für node.js:

{
  "name": "Launch Node.js Program",
  "type": "node",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "program": "${workspaceFolder}/index.js"
}

Debugging im Browser

Beispiele für launch.json-Einträge zum Debugging in Browsern:

{
  "name": "Launch Chrome",
  "type": "pwa-chrome",
  "request": "launch",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}"
}

{
  "name": "Launch Edge for React",
  "type": "pwa-msedge",
  "request": "launch",
  "url": "http://localhost:3000"
}