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) |
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.
Plugins
Stellen Sie sicher dass unter „Configure
“ → „Plugins
“ (oder, wenn die Startseite nicht angezeigt wird: „File
“ → „Settings
“ → „Plugins
“)
auf jeden Fall folgende Plugins aktiviert sind (dies sollte standardmäßig der Fall sein):
- JavaScript Support
- Subversion Integration
Verifizieren Sie außerdem, dass unter „Configure
“ bzw. „File
“ → „Settings
“ → „Languages & Frameworks
“ → „JavaScript
“ die „JavaScript language version
“ auf
„ECMAScript 6
“ eingestellt ist.
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:
Configure
/File
→Settings
→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 Zahl2
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
- Achten Sie darauf, dass „
- Klick auf
CSS
im linkem Baummenü- Tragen Sie bei „
Tab size
“, „Indent
“ und „Continuation Indent
“ die Zahl2
ein. - Klick auf
Other
Braces placement
→Next line
Align values
→On value
- Tragen Sie bei „
- Klick auf
HTML
im linkem Baummenü- Tragen Sie bei „
Tab size
“, „Indent
“ und „Continuation Indent
“ die Zahl2
ein. - Klick auf
Other
Do not indent children of:
→ Entfernen alle Einträge bis auf „html
“.
- Tragen Sie bei „
- Klick auf
JSON
im linkem Baummenü- Tragen Sie bei „
Tab size
“, „Indent
“ und „Continuation Indent
“ die Zahl2
ein.
- Tragen Sie bei „
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.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- JetBrains (WebStorm): WebStorm – The smartest JavaScript IDE; Organisation: JetBrains s.r.o.; https://www.jetbrains.com/webstorm/; Quellengüte: 3 (Web)
- 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)