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)

settings.json

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

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

• File/Code → Preferences → Settings oder kurz STRG/CTRL/CMD-,
• Text-Editor öffnen und solange scrollen, bis Sie auf Edit in "settings.json" treffen.
• Darauf klicken und STRG/CTRL/CMD-Z, 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": 
  { "**/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

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:

• STRG/CMD/CTRL-, (Einstellungen öffnen)
• Suchen: git path
• Edit in "settings.json"

Da Sie im Praktikum mit Git arbeiten werden, müssen auch Sie Git installieren.
Unter https://git-scm.com/downloads können Sie das Paket herunterladen.

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.

Deren Pfad müssen Sie noch in die settings.json eintragen. Am einfachsten geht dies, indem Sie in VSC ein Terminal öffnen. Dort git es ein Drop-Down-Menü, in dem angezeigt wird, welche Shell derzeit ausgewählt ist (Powershell o. Ä.). Wählen Sie in diesem Menü Select Default Shell. Ihen wird dann eine Liste mit alle verfügbaren Shells angezeigt, in der auch die Git bash enthalten sein müsste. Selektieren Sie diese.

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)