HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Visual Studio Code: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
(46 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 6: | Zeile 6: | ||
Allerdings sammelt Microsoft Daten. Gemäß der [https://code.visualstudio.com/License/ Lizenz] | Allerdings sammelt Microsoft Daten. Gemäß der [https://code.visualstudio.com/License/ Lizenz] | ||
kann man die Datensammelwut einschränken, aber nicht vollständig abschalten. | kann man die Datensammelwut einschränken, aber nicht vollständig abschalten. | ||
===Unix-Shell=== | |||
Installieren Sie Git: <code>https://git-scm.com/downloads</code>. | |||
'''Mac OS X and Unix (Linux, FreeBSD ...) only''':<br/> | |||
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 <code>git</code> 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''':<br/> | |||
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''':<br/> | |||
Unter Linux und Mac OS X benutzt Visual Studio Code standardmäßig eine Unix-Shell (Unix: bash, Mac OS X: terminal). | |||
Web-Entwickler verwenden {{iAllg}} auch unter Windows lieber ein Terminal, das eine [[Unix]]-[[Shell]] simuliert, als die Standard-Windows-Shell <code>cmd</code>. | |||
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 <code>which</code>, <code>[[vi]]</code> ( :-) ) etc. zur | |||
Verfügung stellt. | |||
==Installation von Visual Studio Code== | ==Installation von Visual Studio Code== | ||
Zeile 14: | Zeile 34: | ||
<!--'''Anmerkung:''' Auf Rechnern der Hochschule ist Visual Studio Code bereits vorinstalliert.--> | <!--'''Anmerkung:''' Auf Rechnern der Hochschule ist Visual Studio Code bereits vorinstalliert.--> | ||
Installieren Sie das Softwarepaket. Dabei werden Ihnen ein paar Fragen gestellt. Sie können jeweils den Defaultwert übernehmen. | 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: | |||
[https://glossar.hs-augsburg.de/beispiel/tutorium/2024/WebProg.code-profile WebProg.code-profile] | |||
Installation: | |||
* Klick auf das Zahnrad-Icon links unten → <code>Profiles (Default)</code> → <code>Import Profile...</code> | |||
oder | |||
* Klick auf das Zahnrad-Icon links unten → <code>Profile (Standard)</code> → <code>Profil importieren...</code> | |||
=== 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. | 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) | * Live Server (ein Mini-Web-Server in VSC, um den Web-Anwendungen testen zu können) | ||
* Mark (Syntax Highlight für Markdown-Dateien wie {{zB}} README.md) | * Mark (Syntax Highlight für Markdown-Dateien wie {{zB}} README.md) | ||
* markdownlint (weist auf unsaubere Syntax in Markdown-Dateien hin) | * 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 <code>ALT-Q</code> zu formatieren) | * Rewrap (ein kleiner Helfer, um einen Text, Kommentare etc. mit <code>ALT-Q</code> zu formatieren) | ||
* | * SCSS Formatter - Code formatter (SCSS/SASS) | ||
* | * Vue - Official (unterstützt die Entwickling von Vue-Projekten) | ||
=== <code>settings.json</code> === | === <code>settings.json</code> === | ||
Öffnen der Datei <code>settings.json</code>: | Öffnen der Datei <code>settings.json</code>. Ein möglicher Weg, diese Datei zu öffnen: | ||
*<code>Shift+Strg/Ctrl/CMD+P</code> → Ins Suchfeld <code>settings.json</code> eingeben | |||
*<code>Preferences: Open User Settings (JSON)</code> öffnen | |||
Mit dem obigen Import-Befehl haben Sie folgende Konfigurationseinstellungen vorgenommen: | |||
<source lang="json"> | <source lang="json"> | ||
{ | { "files.watcherExclude": | ||
{ "**/build/**": true, | { "**/build/**": true, | ||
"**/doc/**": true, | "**/doc/**": true, | ||
Zeile 57: | Zeile 93: | ||
{ "MD041": false, | { "MD041": false, | ||
"MD013": 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" | |||
} | } | ||
</source> | </source> | ||
=== | Die Zeile <code>"terminal.integrated.defaultProfile.windows": "Git Bash",</code> ist unter MacOS oder Linux natürlich unnötig. | ||
Aber sie stört nicht. | |||
Die Zeile <code>"liveServer.settings.root": "/web"</code> sorgt dafür, dass das VSC-Live-Server-Plugin die Web-App im Ordner <code>web</code> erwartet. | |||
Er liefert die Web-Dateien (HTML, CSS etc.), die sich in diesem Ordner befinden, an die Clients (Browser) aus. | |||
=== Terminal === | |||
Unter [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung Visual Studio Code|Visual Studio Code]] (VSC) steht Ihnen ein Terminal zur Verfügung, | Unter [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung Visual Studio Code|Visual Studio Code]] (VSC) steht Ihnen ein Terminal zur Verfügung, | ||
in dem Sie Kommandozeilen-Befehle absetzen können: | in dem Sie Kommandozeilen-Befehle absetzen können: | ||
* Menü am oberen Fensterrand: Klick auf <code>Terminal → New Terminal</code> | * Menü am oberen Fensterrand: Klick auf <code>Terminal → New Terminal</code>/<code>Neues Terminal</code> | ||
Wenn Sie das VSC-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen | 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 <code>cd <PFAD></code> in das Wurzelverzeichnis des | Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls <code>cd <PFAD></code> in das Wurzelverzeichnis des | ||
Projekts wechseln, wenn Sie Befehle absetzen wollen, die sich auf ein bestimmtes Projekt beziehen. | |||
Geben Sie ins Terminal <code>git --version</code> ein. Wenn eine Versionnummer ausgegeben wird, ist Git auf Ihrem Rechner | Geben Sie ins Terminal <code>git --version</code> ein. Wenn eine Versionnummer ausgegeben wird, ist Git auf Ihrem Rechner verfügbar. | ||
Falls es nicht funktioniert, müssen Sie den Pfad in <code>settings.json</code> eintragen. Zum Beispiel (für Windows): | |||
<source lang="json"> | |||
"git.path": "C:\\Program Files\\Git\\bin\\git.exe", | |||
</source> | |||
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: | |||
* <code>STRG/CTRL/CMD-,</code> | |||
* Ins Suchfeld <code>default shell</code> eingeben | |||
* <code>Terminal > Integrated > Default Profile: Windows</code>: Git Bash wählen | |||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== | ||
Zeile 109: | Zeile 141: | ||
<references/> | <references/> | ||
<ol> | <ol> | ||
<li value="1"> {{Quelle|Kowarschick | <li value="1">{{Quelle|Kowarschick (WebProg)}}</li> | ||
<!-- | <!-- | ||
<li>{{Quelle|JetBrains (WebStorm)}}</li> | <li>{{Quelle|JetBrains (WebStorm)}}</li> |
Aktuelle Version vom 19. März 2024, 14:40 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.
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:
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 Suchfeldsettings.json
eingebenPreferences: 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
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)