HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Visual Studio Code

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 2 (wichtige Fakten fehlen)

Quellenangaben: 2 (wichtige Quellen fehlen)

Quellenarten: 3 (gut)

Konformität: 5 (ausgezeichnet)

Vorlesung WebProg

Inhalt | Visual Studio Code | Node.js

Zur Erstellung von Web-Anwendungen kann Visual Studio Code eingesetzt werden. Zunächst müssen Sie diese IDE installieren und konfigurieren. Es handelt sich um eine frei Software von Microsoft, die mittels Open-Source-Tools implementiert wurde und wird. Allerdings sammelt Microsoft Daten. Gemäß der Lizenz kann man die Datensammelwut einschränken, aber nicht vollständig abschalten.

Unix-Shell

Installieren Sie Git: https://git-scm.com/downloads.

Mac OS X and Unix (Linux, FreeBSD ...) only:
Unter Mac OS X kann es aber sein, dass Sie das Paket nicht installieren können, weil es nicht aus einer vertrauenswürdigen Quelle stammt. Evtl. funktioniert dann eine andere Methode: Geben Sie im Terminal den Befehl git ein. Sofern Git noch nicht installiert wurde, sollten Sie gefragt werden, ob das nun gemacht werden soll. Diese Frage sollten Sie natürlich mit “Yes” beantworten.

Mac OS X only:
Mac OS X wird standardmäßig mit einer vollkommen veralteten Bash-Version ausgeliefert (Bash 3.x). Aktualisieren Sie diese Version bitte auf Bash 5.x: https://www.shell-tips.com/mac/upgrade-bash/

Windows only:
Unter Linux und Mac OS X benutzt Visual Studio Code standardmäßig eine Unix-Shell (Unix: bash, Mac OS X: terminal). Web-Entwickler verwenden i. Allg. auch unter Windows lieber ein Terminal, das eine Unix-Shell simuliert, als die Standard-Windows-Shell cmd.

Mit Git haben Sie automatisch auch die „Git bash“ installiert. Das ist eine Terminal-Anwendung, die eine Linux-bash emuliert und zahlreiche nützliche Befehle wie which, vi ( :-) ) etc. zur Verfügung stellt.

Installation von Visual Studio Code

Laden Sie sich zunächst Visual Studio Code (VSC) herunter:

https://code.visualstudio.com/

Installieren Sie das Softwarepaket. Dabei werden Ihnen ein paar Fragen gestellt. Sie können jeweils den Defaultwert übernehmen.

Die nachfolgend beschriebenen Konfigurationen können Sie einfach mittels des folgenden Profils in VLS integrieren: WebProg.code-profile

Installation:

• Klick auf das Zahnrad-Icon links unten → Profiles (Default) → Import Profile...

oder

• Klick auf das Zahnrad-Icon links unten → Profile (Standard) → Profil importieren...

Erweiterungen

Für VSC gibt es zahlreiche Erweiterungen (Extensions). Eine Erweiterung installieren Sie, indem Sie im linken Randmenü auf das Extension-Icon (vier kleine Quadrate, die fast ein großes Quadrat bilden) klicken. Dort geben Sie im Suchfeld jeweils den Namen der Erweiterung ein und aktivieren diese dann, indem Sie auf den Install-Button hinter der gefundenen Erweiterung klicken. Einige Erweiterungen sind erst nach einen Neustart aktiv.

Mit dem obigen Import-Befehl haben Sie folgende Erweiterungen installiert:

• Auto Complete Tag (fügt automatisch schließende HTML/XML-Tags hinzu und benennt HTML/XML-Tag-Paare gleichzeitig um)
• Auto-Save on Window Change (speichert geänderte Dateien automatisch)
• Docker (Management von Docker-Containern; wird erst später benötigt)
• DotEnv (.env syntax higlighting)
• ESLint (weist auf unsaubere Syntax von EcmaScript-Code hin)
• German Language Pack for VSC (nicht notwendig, aber evtl. hilfreich)
• Git Graph (grafische Darstellung des Verlaufs eines Git-Repositories)
• GitLens - Git supercharged (Eine hilfreiche Erweiterung zur Inspektion von Git-Repositories)
• Indent one space (ein kleiner Helfer, um ganze Codeblöcke mit Hilfe der Leertaste ein- oder auszurücken)
• Live Server (ein Mini-Web-Server in VSC, um den Web-Anwendungen testen zu können)
• Mark (Syntax Highlight für Markdown-Dateien wie z. B. README.md)
• markdownlint (weist auf unsaubere Syntax in Markdown-Dateien hin)
• Path Intellisense (Autovervollständigung von Dateinamen)
• Prettier - Code formatter (evtl. zur sauberen Formatieren von Code, verwende ich nicht)
• REST Client (Zur Entwicklung von REST- und GraphQL-Servern)
• Rewrap (ein kleiner Helfer, um einen Text, Kommentare etc. mit ALT-Q zu formatieren)
• SCSS Formatter - Code formatter (SCSS/SASS)
• Vue - Official (unterstützt die Entwickling von Vue-Projekten)

settings.json

Öffnen der Datei settings.json. Ein möglicher Weg, diese Datei zu öffnen:

• Shift+Strg/Ctrl/CMD+P → Ins Suchfeld settings.json eingeben
• Preferences: Open User Settings (JSON) öffnen

Mit dem obigen Import-Befehl haben Sie folgende Konfigurationseinstellungen vorgenommen:

{ "files.watcherExclude": 
  { "**/build/**": true,
    "**/doc/**": true,
    "**/web/**": true,
    "**/node_modules/**": true
  },
  "eslint.lintTask.enable": true,
  "eslint.onIgnoredFiles": "warn",
  "eslint.codeAction.disableRuleComment": 
  { "enable": false },
  "eslint.codeAction.showDocumentation": 
  { "enable": true },
  "markdownlint.config": 
  { "MD041": false,
    "MD013": false
  },
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "liveServer.settings.root": "/web",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "git.ignoreRebaseWarning": true,
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

Die Zeile "terminal.integrated.defaultProfile.windows": "Git Bash", ist unter MacOS oder Linux natürlich unnötig. Aber sie stört nicht.

Die Zeile "liveServer.settings.root": "/web" sorgt dafür, dass das VSC-Live-Server-Plugin die Web-App im Ordner web erwartet. Er liefert die Web-Dateien (HTML, CSS etc.), die sich in diesem Ordner befinden, an die Clients (Browser) aus.

Terminal

Unter Visual Studio Code (VSC) steht Ihnen ein Terminal zur Verfügung, in dem Sie Kommandozeilen-Befehle absetzen können:

• Menü am oberen Fensterrand: Klick auf Terminal → New Terminal/Neues Terminal

Wenn Sie das VSC-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen Projekts. Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls cd <PFAD> in das Wurzelverzeichnis des Projekts wechseln, wenn Sie Befehle absetzen wollen, die sich auf ein bestimmtes Projekt beziehen.

Geben Sie ins Terminal git --version ein. Wenn eine Versionnummer ausgegeben wird, ist Git auf Ihrem Rechner verfügbar. Falls es nicht funktioniert, müssen Sie den Pfad in settings.json eintragen. Zum Beispiel (für Windows):

"git.path": "C:\\Program Files\\Git\\bin\\git.exe",

Wenn Sie unter Windows das Terminal öffnen, sollten Sie mit einem farbigen Prompt begrüßt werden. Sollte das niht der Fall sein, können Sie die Bash zur Standard-Shell machen:

• STRG/CTRL/CMD-,
• Ins Suchfeld default shell eingeben
• Terminal > Integrated > Default Profile: Windows: Git Bash wählen

Fortsetzung des Tutoriums

Sie sollten nun Node.js installieren.

Quellen

1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)