Installation von WebStorm

Installation von 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 „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 5.1“ 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.

Passen Sie dies Einstellungn an:

• Configure/File → Settings → Editor</code → Code Style → öffen (Klick auf Dreiecke vor den Namen)
• Klick auf JavaScript im linkem Baummenü
  • Tragen Sie bei „Tab size“, „Indent“ und „Continuation Indent“ die Zahl 2 ein.
  • Klick auf Wrapping and Braces
    • Wrapping and Braces → In function declaration → Next line
    • Wrapping and Braces → Other → Next line
  • Klick auf Other
    • Align object properties → On value
    • Align multiple 'var' statements and assignments selektieren
• 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.
  • Klick auf Other
    • Hier gibt es leider kein „Braces placement → Next line“  :-(
    • Align values → On value

Vermeiden Sie es Tab-Zeichen an Stelle von Leerzeichen zu verwenden, da die Tabbreite nicht genormt ist und je nach Editor anders interpretiert wird.

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 Configure → 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.