HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Visual Studio Code: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 37: | Zeile 37: | ||
Fügen Sie folgenden JSON-Code vor der abschließenden Klammer ein (Achtung: Das Komma am Ende des letzten bereits vorhandenen Attributs ist wichtig): | Fügen Sie folgenden JSON-Code vor der abschließenden Klammer ein (Achtung: Das Komma am Ende des letzten bereits vorhandenen Attributs ist wichtig): | ||
<source lang="json"> | <source lang="json"> | ||
{ | { | ||
"**/doc/**": true, | ..., | ||
"files.watcherExclude": | |||
{ "**/doc/**": true, | |||
}, | "**/web/**": true, | ||
"eslint.lintTask.enable": true, | "**/node_modules/**": true | ||
"eslint.onIgnoredFiles": "warn", | }, | ||
"eslint.codeAction.disableRuleComment": | "eslint.lintTask.enable": true, | ||
{ "enable": false }, | "eslint.onIgnoredFiles": "warn", | ||
"eslint.codeAction.showDocumentation": | "eslint.codeAction.disableRuleComment": | ||
{ "enable": true }, | { "enable": false }, | ||
"markdownlint.config": | "eslint.codeAction.showDocumentation": | ||
{ "MD041": false, | { "enable": true }, | ||
"markdownlint.config": | |||
{ "MD041": false, | |||
"MD013": false | |||
} | |||
} | } | ||
</source> | </source> |
Version vom 24. März 2021, 09:33 Uhr
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) |
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:
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
- 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:
File
→Preferences
→Settings
oder kurzSTRG/CTRL/CMD+,
Text-Editor
öffnen und solange scrollen, bis Sie aufEdit 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
}
}
Fortsetzung des Tutoriums
Sie sollten nun Node.js installieren.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)