HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm

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 WebStorm eingesetzt werden. Zunächst müssen Sie diese IDE installieren und konfigurieren. Es handelt sich um eine kommerzielle Software, aber als Student erhalten Sie eine kostenlose Lizenz.

Installation von WebStorm

Laden Sie sich zunächst WebStorm herunter (https://www.jetbrains.com/webstorm/) und installieren Sie das Softwarepaket. Sie können diese Software zunächst 30 Tage lang ohne Lizenz benutzen.

Anmerkung: Auf Rechnern der Hochschule ist WebStorm bereits vorinstalliert.

Lizenz

Als Student der Hochschule Augsburg erhalten Sie mit Ihrer Hochschul-E-Mail-Adresse eine kostenlose Studentenlizenz. Füllen Sie dazu das Formular auf der Antragsseite aus: https://www.jetbrains.com/estore/students/

Anmerkung: Falls Sie an einem Rechner der Hochschule arbeiten, können Sie die Hochschullizenz verwenden.

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 den Button Configure. Wenn Sie sich schon schon ein Projekt bearbeiten, finden Sie Konfigurations-Menü unter File → Default Settings. Im Folgenden gehe ich davon aus, dass Sie dieses Menü bereits geöffnet haben.

Plugins

Stellen Sie sicher dass unter Plugins auf jeden Fall folgende Plugins aktiviert sind (dies sollte standardmäßig der Fall sein):

• JavaScript Support
• Subversion Integration

JavaScript

Verifizieren Sie , dass unter Languages & Frameworks → JavaScript die JavaScript language version auf ECMAScript 6 eingestellt ist.

Aktivieren Sie außerdem die WebStorm-Node.js-coding-assitence, da Sie anderenfalls bei jedem SVN-Commit eine Warnung angezeigt bekommen, dass Sie dies nicht gemacht haben:

Language & Frameworks → Node.js and NPM → Node.js Core library is not enabled. Enable

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.

Passen Sie dies Einstellungen an:

• Editor → Code Style → öffnen (Klick auf Dreiecke vor den Namen)
• Im Rechten Fenster: Right margins (columns): 80
• Klick auf JavaScript im linkem Baummenü
  • Achten Sie darauf, dass Use tab character deaktiviert ist. (Ganz wichtig, da die Anzahl der Leerzeichen, für die das Tab-Symbol steht, nicht normiert ist und daher Code mit Tab-Zeichen in anderen Editoren unlesbar sein kann.)
  • Tragen Sie bei Tab size, Indent und Continuation Indent die Zahl 2 ein.
  • Klick auf Wrapping and Braces
    • 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 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
• 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.
• 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.

Markdown

Anmerkungen zu den Praktikumsaufgaben sind im Repository evtl. als Markdown-Dokumente abgespeichert. Für Syntax-Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren. Dazu gehen Sie auf Plugins, suchen dort via Lupe nach Markdown support und klicken anschließend auf Search in Repositories. Dort erscheint dann ein Plugin namens Markdown support. Installieren Sie dieses und starten WebStorm danach neu.

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
2. JetBrains (WebStorm): WebStorm – The smartest JavaScript IDE; Organisation: JetBrains s.r.o.; https://www.jetbrains.com/webstorm/; Quellengüte: 3 (Web)
3. JetBrains (WebStorm 2017): Meet WebStorm – Welcome to WebStorm help!; Organisation: JetBrains s.r.o.; https://www.jetbrains.com/help/webstorm/meet-webstorm.html; 2017; Quellengüte: 3 (Web)