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:
Sie können diese Software zunächst 30 Tage lang ohne Lizenz benutzen. 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:
Anmerkung: Auf Rechnern der Hochschule ist WebStorm bereits vorinstalliert.
Installieren Sie das Softwarepaket. Dabei werden Ihnen ein paar Fragen gestellt.
- Wählen Sie eines der beiden angebotenen UI Themes aus.
Next
- Klicken Sie bei
Markdown
aufInstall
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
Create New Project
→Empty Project
(= Vorauswahl) →Create
Toolbar
Aktivieren Sie die Toolbar:
View
→ Häkchen beiToolbar
Hier finden Sie insbesondere den Reload-Button, mit dem Sie den Dateibaum in WebStrom 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:
Configure
Wenn Sie schon ein Projekt bearbeiten, finden Sie das Konfigurations-Menü unter
File
→Default Settings
Im Folgenden gehe ich davon aus, dass Sie dieses Menü bereits geöffnet haben.
JavaScript
Verifizieren Sie, dass unter Languages & Frameworks
→ JavaScript
die JavaScript language version
auf
ECMAScript 6
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:
Language & Frameworks
→ Häckchen beiCoding assistence for WebStorm
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:
Visual guides:
:80, 100, 120
- 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
undContinuation 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
undContinuation 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
undContinuation Indent
die Zahl2
ein. - Klick auf
Other
Do not indent children of:
→ Entfernen alle Einträge bis aufhtml
.
- Tragen Sie bei
- Klick auf
JSON
im linkem Baummenü- Tragen Sie bei
Tab size
,Indent
undContinuation 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.
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 Subversion-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 sprätenstens 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 kann ich in meinen Code
TBD
einfügen und werde von WebStorm daran erinnert, bleibe aber gleichzeitig
von Meldungen verschont, an denen ich sowieso nichts ändern kann:
Editor
→TODO
→ Doppelklick auf\btodo\b.*
→ Ändern des Pattern in\btbd\b.*
Editor
→Inspections
→ im Menü rechts daneben:Internationalization issues
→non-ASCII characers
: Häkchen entfernenEditor
→Inspections
→ im Menü rechts daneben:JavaScript
→Naming conventions
→Identifiers with non-ASCII characers
: Häkchen entfernen
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
- 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)