HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Visual Studio Code

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

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:

• German Language Pack for Visual Studio Code (Neustart von VSC)
• Live Server (ein Mini-Web-Server in VSC, um den Web-Anwendungen testen zu können)
• 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 ein- oder auszurücken)

settings.json

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

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

• Datei → Einstellungen → Einstellungen oder kurz STRG/CTRL/CMD ,
• Text-Editor öffnen und solange scrollen, bis Sie auf In "settings.json" bearbeiten treffen.
• Darauf klicken und STRG/CTRL/CMD Z, um den neu angelegten Eintrag zu löschen.

Fügen Sie folgenden JSON-Code ein (Achtung: Das Komma am Ende der vorhandenen Attribute 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
  }
}

Quellen

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