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.

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.

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.

Installieren Sie folgende Erweiterungen:

• Live Server (ein Mini-Web-Server in VSC, um den Web-Anwendungen testen zu können)
• GitLens (Eine hilfreiche Erweiterung zur Inspektion von Git-Repositories)
• ESLint (weist auf unsaubere Syntax von EcmaScript-Code hin)
• Mark (Syntax Highlight für Markdown-Dateien wie z. B. README.md)
• markdownlint (weist auf unsaubere Syntax in Markdown-Dateien hin)
• Indent one space (ein kleiner Helfer, um ganze Codeblöcke mit Hilfe der Leertaste ein- oder auszurücken)
• Rewrap (ein kleiner Helfer, um einen Text, Kommentare etc. mit ALT-Q zu formatieren)
• German Language Pack for VSC (nicht notwendig, aber evtl. hilfreich)
• Volar (wird später im Zusammenhang mit Vue verwendet)
  • Vue Language Features (Volar)
  • TypeScript Vue Plugin (Volar)
• REST Client (Zur Entwicklung von REST- und GraphQL-Servern )
• Docker (Management von Docker-Containern; wird erst später benötigt)
• Prettier - Code formatter (evtl. zur sauberen Formatieren von Code)

settings.json

Öffnen der Datei settings.json: https://supunkavinda.blog/vscode-editing-settings-json

Ein möglicher Weg, diese Datei zu öffnen:

• Shift+Ctrl/CMD+P → Ins Suchfeld settings eingeben →
  Preferences: Open Settings (JSON) selektieren
• File/Code → Preferences → Settings
Datei → Einstellungen → Einstellungen
  oder kurz STRG/CTRL/CMD-,
  Dann solange scrollen, bis Sie auf Edit in "settings.json"/In "settings.json" bearbeiten treffen. Darauf Klicken und evtl. STRG/CTRL/CMD-Z ausführen, um den neu angelegten Eintrag zu löschen.

Fügen Sie folgenden JSON-Code vor der abschließenden Klammer ein (Achtung: Das Komma am Ende des letzten bereits vorhandenen Attributs ist wichtig):

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

Unix-Shell

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 Projektes. Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls cd <PFAD> in das Wurzelverzeichnis des Projektes 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 bereits verfügbar.

Falls nicht, müssen Sie Git installieren: https://git-scm.com/downloads.

Versuchen Sie nochmals git --version. Eventuell müssen Sie das Terminal erst schließen (Abfalleimer-Icon) und neu öffnen. Falls es nicht funktioniert, müssen Sie den Pfad in settings.json eintragen. Zum Beispiel:

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

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.

Windows only:
Unter Linux und Mac OS X benutzt VSC 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.

Dies Shell müssen Sie noch zur Standard-Shell machen:

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

Wenn Sie jetzt das Terminal öffnen, sollten Sie mit einem farbigen Prompt begrüßt werden.

Fortsetzung des Tutoriums

Sie sollten nun Node.js installieren.

Quellen

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