Installation von WebStorm: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Zeile 32: Zeile 32:
Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber 2 Leerzeichen aufgrund der weiten Verbreitung.
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>File</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
Passen Sie dies Einstellungn an:
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.'''


Stellen  Sie außerdem bei „<code>JavaScript</code>“ unter dem Tab „<code>Wrapping and Braces</code>“ den Wert „<code>Next line</code>“ für die Attribute unter „<code>Braces placement</code>“ ein. Unter dem Tab „<code>Other</code>“ den stellen Sie für „<code>Align object properties</code>“ den Wert „<code>On value</code>“ ein.  Selektieren Sie außerdem „<code>Align multiple 'var' statements and assignments</code>“
* <code>Configure</code>/<code>File</code> → <code>Settings</code> → <code>Editor</code → <code>Code Style</code> → öffen (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>


Für „<code>CSS</code>“ stellen Sie unter dem Tab den Wert „<code>Next line</code>“ für „<code>Braces placement</code>“ sowie
'''Vermeiden Sie es Tab-Zeichen an Stelle von Leerzeichen zu verwenden, da die Tabbreite nicht genormt ist und je nach Editor anders interpretiert wird.'''
„<code>On value</code>“ für „<code>Algin values</code>“ ein.
 
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>“.


====Markdown====
====Markdown====

Version vom 22. September 2016, 08:55 Uhr

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.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=Installation_von_WebStorm&oldid=40818“