|
|
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| {{HTML5-Tutorium:JavaScript:WebStorm:Menü}}
| | #REDIRECT [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm]] |
| ==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 „<code>Configure</code>“ → „<code>Plugins</code>“ (oder, wenn die Startseite nicht angezeigt wird: „<code>File</code>“ → „<code>Settings</code>“ → „<code>Plugins</code>“)
| |
| auf jeden Fall folgende Plugins aktiviert sind (dies sollte standardmäßig der Fall sein):
| |
| | |
| * JavaScript Support
| |
| * Subversion Integration
| |
| | |
| Verifizieren Sie außerdem, dass unter „<code>Configure</code>“ bzw. „<code>File</code>“ → „<code>Settings</code>“ → „<code>Languages & Frameworks</code>“ → „<code>JavaScript</code>“ die „<code>JavaScript language version</code>“ auf
| |
| „<code>ECMAScript 5.1</code>“ eingestellt ist.
| |
| | |
| ====Code-Style====
| |
| | |
| Standardmäßig sind 4 Leerzeichen als Einrückung für Code-Formatierungen eingestellt.
| |
| Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber 2 Leerzeichen aufgrund der weiten Verbreitung.
| |
| | |
| Passen Sie dies Einstellungen an:
| |
| | |
| * <code>Configure</code>/<code>File</code> → <code>Settings</code> → <code>Editor</code → <code>Code Style</code> → öffnen (Klick auf Dreiecke vor den Namen)
| |
| * Klick auf <code>JavaScript</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>Wrapping and Braces</code>
| |
| *** <code>Wrapping and Braces</code> → <code>In function declaration</code> → <code>Next line</code>
| |
| *** <code>Wrapping and Braces</code> → <code>Other</code> → <code>Next line</code>
| |
| ** Klick auf <code>Other</code>
| |
| ***<code>Align object properties</code> → <code>On value</code>
| |
| ***<code>Align multiple 'var' statements and assignments</code> selektieren
| |
| * 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>
| |
| * 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>Other</code>
| |
| ***Hier gibt es leider kein „<code>Braces placement</code> → <code>Next line</code>“ :-(
| |
| ***<code>Align values</code> → <code>On value</code>
| |
| * <code>OK</code>
| |
| | |
| '''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 <code>Configure</code> → <code>Plugins</code>,
| |
| suchen dort via Lupe nach "Markdown support" und klicken anschließend auf <code>Search in Repositories</code>.
| |
| Dort erscheint dann ein Plugin namens "Markdown support". Installieren Sie dieses und starten WebStorm danach neu.
| |
| | |
| [[Kategorie:Kapitel:Web-Programmierung]]
| |
| [[Kategorie:Web-Programmierung-HowTo]]
| |
| [[Kategorie:Praktikum:MMProg]]
| |
