|
|
| Zeile 19: |
Zeile 19: |
| Installieren Sie folgende Erweiterungen: | | 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) | | * 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) | | * ESLint (weist auf unsaubere Syntax von EcmaScript-Code hin) |
| Zeile 55: |
Zeile 54: |
| } | | } |
| </source> | | </source> |
| <!--
| |
| === <code>settings.jar</code> ===
| |
|
| |
|
| Laden Sie die Datei [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/settings.jar settings.jar] herunter und speicher Sie sie lokal auf Ihrem Rechner.
| |
| Importieren Sie diese Datei in Ihre WebStorm-Umgebung:
| |
|
| |
| Wenn Sie sich auf de WebStorm-Startseite befinden:
| |
| * <code>Configure</code> → <code>Import Settings</code> → <code>settings.jar</code> selektieren → <code>OK</code> → <code>OK</code>
| |
|
| |
| Wenn Sie schon ein Projekt bearbeiten, gehen Sie bitte folgendermaßen vor:
| |
| * <code>File</code> → <code>Import Settings</code> → <code>settings.jar</code> selektieren → <code>OK</code> → <code>OK</code>
| |
|
| |
| '''Die nachfolgenden Anweisungen brauchen Sie nun nicht mehr von Hand auszuführen, da mit der vorangegangenen Anweisung bereits alle dort aufgeführten Änderungen ausgeführt wurden. Sie sollten sich aber den Text dennoch durchlesen, damit Sie die Begründungen für die einzelnen Änderungen an den Defaulteinstellungen kennenlernen.
| |
|
| |
| ===Toolbar===
| |
|
| |
| Aktivieren Sie die Toolbar:
| |
| * <code>Create New Project</code> → <code>Empty Project</code> (= Vorauswahl) → <code>Create</code> (Dieses Projekt wird eigentlich nicht gebraucht, es dient nur dazu, die Toolbar aktivierenden zu können; siehe nächsten Punkt)
| |
| * <code>View</code> → Häkchen bei <code>Toolbar</code>
| |
|
| |
| Hier finden Sie insbesondere den Reload-Button, mit dem Sie den Dateibaum in WebStorm neu laden können,
| |
| wenn dieser außerhalb von WebStorm verändert wurde.
| |
|
| |
| ===IDE-Konfiguration===
| |
|
| |
| WebStorm ist auf die Entwicklung mit HTML/CSS/JavaScript ausgelegt, wodurch sich die Konfiguration sehr einfach gestaltet.
| |
|
| |
| Anmerkungen: Die Default-Konfigurationen (Default-Settings) finden auf der WebStorm-Startseite unter dem Button:
| |
| * <code>Configure</code>
| |
| Da Sie schon ein Projekt bearbeiten, finden Sie das Konfigurationsmenü unter
| |
| * <code>File</code> → <code>Settings for New Projects...</code>
| |
| Im Folgenden gehe ich davon aus, dass Sie dieses Menü bereits geöffnet haben.
| |
|
| |
| ====JavaScript====
| |
|
| |
| Verifizieren Sie, dass unter <code>Languages & Frameworks</code> → <code>JavaScript</code> die <code>JavaScript language version</code> auf
| |
| <code>ECMAScript 6</code> eingestellt ist. <! --Sie sollten außerdem die “Coding assistence for WebStorm” aktivieren, da Sie anderenfalls
| |
| bei jedem SVN-Commit eine Warnung angezeigt bekommen, dass Sie dies nicht gemacht haben:-- >
| |
|
| |
| * <code>Language & Frameworks</code> → JavaScript language version: <code>ECMAScript 6</code>
| |
|
| |
| ====Code-Style====
| |
|
| |
| Standardmäßig sind WebStorm in 4 Leerzeichen als Einrückung für Code-Formatierungen eingestellt.
| |
| Eine allgemeingültige Regel für einen sinnvollen Wert gibt es nicht, aber ich empfehle, lediglich
| |
| 2 Leerzeichen zu verwenden. Damit ist es leichter möglich, die maximale Anzahl auf
| |
| 80 Zeichen pro Zeile zu begrenzen, was einen deutlich lesbareren Code zur Folge hat als überbreite Zeilen.
| |
|
| |
| Grundsätzlich gilt: '''Verwenden Sie bei Programmieren niemals Tabulatorzeichen zum Einrücken von Text, sondern immer nur Leerzeichen.'''
| |
| In den meisten Texteditoren kann man einstellen, dass beim Drücken der Tabulatortaste Leerzeichen an Stelle von Tabulatorzeichen erzeugt werden sollen.
| |
| Der Grund ist, dass ein Programmcode, der Tabulatorzeichen enthält, mit ziemlicher Sicherheit vollkommen anders aussieht, wenn man ihn in einem anderen Editor oder in einem HTML-Browser öffnet.
| |
|
| |
| Passen Sie die nachfolgenden Einstellungen an:
| |
|
| |
| * <code>Editor</code> → <code>Code Style</code> → öffnen (Klick auf Dreieck vor den Namen)
| |
| * Im rechten Fenster: <code>Visual guides:</code>: <code>80, 100, 120</code>
| |
| * Klick auf <code>JavaScript</code> im linkem Baummenü
| |
| ** Achten Sie darauf, dass <code>Use tab character</code> deaktiviert ist.
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| ** Klick auf Reiter <code>Wrapping and Braces</code>. '''Öffnende Klammern sollten sich aus Gründen der Lesbarkeit immer an derselben Position innerhalb der Zeile befinden wie die zugehörige schließende Klammer.''' (Üblicherweise wird dies heute nicht mehr so gemacht, um eine Zeile Platz zu sparen. Sie können natürlich alle nachfolgenden <code>Braces</code>-<code>placement</code>-Modifikationen überspringen, wenn Sie die öffnende Klammer lieber am Ende der zugehörigen Anweisung platzieren möchten. Glauben Sie aber einen erfahrenem [[Lisp]]-Programmierer. Die andere Variante ist besser.)
| |
| *** <code>Braces placement</code> → <code>In class declaration</code> → <code>Next line</code>
| |
| *** <code>Braces placement</code> → <code>In function declaration</code> → <code>Next line</code>
| |
| *** <code>Braces placement</code> → <code>In function expression</code> → <code>Next line</code>
| |
| *** <code>Braces placement</code> → <code>Other</code> → <code>Next line</code>
| |
| * Klick auf <code>HTML</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| ** Klick auf <code>Other</code>
| |
| ***<code>Do not indent children of:</code> → Entfernen alle Einträge bis auf <code>html</code>.
| |
| * Klick auf <code>JSON</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| * Klick auf <code>CSS</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| ** Klick auf <code>Other</code>
| |
| *** <code>Braces placement</code> → <code>Next line</code>
| |
| ***<code>Align values</code> → <code>On value</code>
| |
| *** Häkchen bei <code>Keep single-line blocks</code>
| |
| * Klick auf <code>Sass</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| * Klick auf <code>SCSS</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code>, <code>Indent</code> und <code>Continuation Indent</code> die Zahl <code>2</code> ein.
| |
| * Klick auf <code>Other File Types</code> im linkem Baummenü
| |
| ** Tragen Sie bei <code>Tab size</code> und <code>Indent</code> die Zahl <code>2</code> ein.
| |
| * <code>OK</code>
| |
|
| |
| '''Nochmals: Vermeiden Sie es, Tab-Zeichen an Stelle von Leerzeichen zu verwenden, da die Tabulatorbreite nicht genormt ist und je nach Editor anders interpretiert wird.'''
| |
|
| |
| ===IDE-Konfiguration===
| |
|
| |
| Weitere Setups können Sie unter
| |
| * <code>File</code> → <code>Settings</code> (Windows) / <code>Preferences</code> (Mac OS X)
| |
| vornehmen. Im Folgenden gehe ich davon aus, dass Sie dieses Menü bereits geöffnet haben.
| |
|
| |
| ====TODO-Erinnerung====
| |
| Bei einem [[Repository]]-Commit überprüft WebStorm vor dem eigentlichen Sichern des Projekt
| |
| den Code. Wenn dabei irgendwelche Fehler entdeckt werden, fragt WebStorm sicherheitshalber
| |
| noch einmal nach, ob man die Fehler wirklich nicht vor dem Sichern beheben will. Das ist
| |
| eine sehr sinnvolle Funktionalität. Allerdings fügt mindestens ein [[webpack]]-Modul den Kommentar
| |
| <code>TODO</code> in den generierten Code ein. Wenn WebStorm diesen Kommentar liest,
| |
| wird ebenfalls nachgefragt, ob man diese Änderung nicht noch erledigen will, bevor man den
| |
| Code speichert. Dies ist sehr lästig, da man den Code ja gar nicht selbst geschrieben hat
| |
| und auch gar nicht ändern kann, da spätestens beim erneuten Generieren des Codes dieser
| |
| Kommentar wieder enthalten ist. Als Workaround ändere ich den Todo-String, nach dem WebStorm sucht,
| |
| von <code>TODO</code> in <code>TBD</code> (to be done) ab. Dann können Sie in Ihren Code
| |
| <code>TBD</code> einfügen und werden von WebStorm bei einem Commit daran erinnert, bleiben aber gleichzeitig
| |
| von Meldungen verschont, an denen Sie sowieso nichts ändern können:
| |
|
| |
| * <code>Editor</code> → <code>TODO</code> → Doppelklick auf <code>\btodo\b.*</code> → Ändern des Pattern in <code>\btbd\b.*</code>
| |
|
| |
| ====UTF-8-Zeichen in JavaScript-Bezeichnern erlauben====
| |
|
| |
| In JavaScript ist es möglich, in Variablen-, Funktionsbezeichnern etc. auch Umlaute und Buchstaben anderer Sprachen (wie {{zB}} Griechisch) zu verwenden. Defaultmäßig ist dies in WebStorm nicht erlaubt. Sie können aber WebStorm so konfigurieren, dass Sie keine Warnmeldungen mehr erhalten, wenn Sie Nicht-SCII-Zeichen in Bezeichnern verwenden:
| |
|
| |
| * <code>Editor</code> → <code>Inspections</code> → im Menü rechts daneben: <code>Internationalization </code> → <code>Non-ASCII characers</code>: Häkchen entfernen
| |
| * <code>Editor</code> → <code>Inspections</code> → im Menü rechts daneben: <code>JavaScript</code> → <code>Naming conventions</code> → <code>Identifiers with non-ASCII characers</code>: Häkchen entfernen
| |
| -->
| |
| ==Fortsetzung des Tutoriums== | | ==Fortsetzung des Tutoriums== |
|
| |
|
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:
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)
- 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 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)
