|
|
| (11 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| ==Installation von WebStorm==
| | #REDIRECT [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm]] |
| | |
| Laden Sie sich zunächst WebStorm herunter und installieren Sie es: https://www.jetbrains.com/webstorm/
| |
| | |
| '''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>
| |
| 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> → <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-Formattierungen eingestellt.
| |
| Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber 2 Leerzeichen aufgrund der weiten Verbreitung.
| |
| | |
| Um die Einstellung zu ändern klicken Sie unter „<code>Configure</code>“ → „<code>Settings</code>“ → „<code>Editor</code>“ → „<code>Code Style</code>“ jeweils auf „<code>JavaScript</code>“, „<code>CSS</code>“, „<code>HTML</code>“ und „<code>JSON</code>“ und
| |
| tragen bei „<code>Tab size</code>“, „<code>Indent</code>“ und „<code>Continuation Indent</code>“ die Zahl <code>2</code> ein.
| |
| '''Vermeiden Sie jedoch das Tab-Zeichen zu verwenden, da dies nicht genormt ist und je nach Betriebssystem anders interpretiert wird.'''
| |
| | |
| Für „<code>HTML</code>“ öffnen Sie unter dem Tab „<code>Other</code>“ das Drow-Down-Menü „<code>Do not indent children of:</code>“ und entfernen
| |
| alle Einträge bis auf „<code>html</code>“.
| |
| | |
| Stellen Sie außerdem bei „<code>JavaScript</code>“ und „<code>CSS</code>“ unter dem Tab „<code>Wrapping and Braces</code>“ bzw. „<code>Other</code>“ den Wert „<code>Next line</code>“ für die Attribute „<code>Braces placement</code>“ ein.
| |
| | |
| ====Markdown====
| |
| | |
| Anmerkungen zu den Praktikumsaufgaben sind im Repository 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]]
| |
