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 herunter:

https://code.visualstudio.com/

Anmerkung: Auf Rechnern der Hochschule ist Visual Studio Code bereits vorinstalliert.

Installieren Sie das Softwarepaket. Dabei werden Ihnen ein paar Fragen gestellt.

• Wählen Sie eines der beiden angebotenen UI Themes (Dracula oder IntelliJ) aus.
• Next: Featured Plugins
• Klicken Sie bei Markdown auf Install
• Start using WebStorm
• Wenn Sie schon eine Lizenz erhalten haben, geben Sie die Zugangsdaten entsprechend ein. Anderenfalls selektieren Sie Evaluate for free (und geben die Lizenzdaten nachträglich ein, sobald Sie sie erhalten haben).
• Activate

• Language & Frameworks → JavaScript language version: ECMAScript 6

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:

• Editor → Code Style → öffnen (Klick auf Dreieck vor den Namen)
• Im rechten Fenster: Visual guides:: 80, 100, 120
• Klick auf JavaScript im linkem Baummenü
  • Achten Sie darauf, dass Use tab character deaktiviert ist.
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
  • Klick auf Reiter Wrapping and Braces. Ö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 Braces-placement-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.)
    • Braces placement → In class declaration → Next line
    • Braces placement → In function declaration → Next line
    • Braces placement → In function expression → Next line
    • Braces placement → Other → Next line
• Klick auf HTML im linkem Baummenü
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
  • Klick auf Other
    • Do not indent children of: → Entfernen alle Einträge bis auf html.
• Klick auf JSON im linkem Baummenü
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
• Klick auf CSS im linkem Baummenü
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
  • Klick auf Other
    • Braces placement → Next line
    • Align values → On value
    • Häkchen bei Keep single-line blocks
• Klick auf Sass im linkem Baummenü
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
• Klick auf SCSS im linkem Baummenü
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
• Klick auf Other File Types im linkem Baummenü
  • Tragen Sie bei Tab size und Indent die Zahl 2 ein.
• OK

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

• File → Settings (Windows) / Preferences (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 TODO 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 TODO in TBD (to be done) ab. Dann können Sie in Ihren Code TBD 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:

• Editor → TODO → Doppelklick auf \btodo\b.* → Ändern des Pattern in \btbd\b.*

UTF-8-Zeichen in JavaScript-Bezeichnern erlauben

In JavaScript ist es möglich, in Variablen-, Funktionsbezeichnern etc. auch Umlaute und Buchstaben anderer Sprachen (wie z. B. 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:

• Editor → Inspections → im Menü rechts daneben: Internationalization → Non-ASCII characers: Häkchen entfernen
• Editor → Inspections → im Menü rechts daneben: JavaScript → Naming conventions → Identifiers with non-ASCII characers: Häkchen entfernen

-->

Quellen

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