Installation von WebStorm - Versionsgeschichte

Kowa: Weiterleitung nach HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm erstellt

2017-10-05T10:55:45Z

Weiterleitung nach HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm erstellt

← Nächstältere Version		Version vom 5. Oktober 2017, 10:55 Uhr
Zeile 1:		Zeile 1:
	{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:~~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.~~

	~~==Quellen==~~
	~~# {{Quelle\|JetBrains (WebStorm)}}~~
	~~# {{Quelle\|JetBrains (WebStorm 2017)}}~~

	~~[[Kategorie:Kapitel:Web-Programmierung]]~~
	~~[[Kategorie:Web-Programmierung-HowTo]]~~
	~~[[Kategorie:Praktikum:MMProg~~]]

Kowa am 3. August 2017 um 14:45 Uhr

2017-08-03T14:45:37Z

← Nächstältere Version		Version vom 3. August 2017, 14:45 Uhr
Zeile 1:		Zeile 1:
	{{HTML5-Tutorium:JavaScript:~~WebStorm~~:Menü}}		{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}
	==Installation von WebStorm==		==Installation von WebStorm==

Kowa am 2. August 2017 um 11:51 Uhr

2017-08-02T11:51:28Z

← Nächstältere Version		Version vom 2. August 2017, 11:51 Uhr
Zeile 73:		Zeile 73:
	==Quellen==		==Quellen==
	# {{Quelle\|JetBrains (WebStorm)}}		# {{Quelle\|JetBrains (WebStorm)}}
			# {{Quelle\|JetBrains (WebStorm 2017)}}

	[[Kategorie:Kapitel:Web-Programmierung]]		[[Kategorie:Kapitel:Web-Programmierung]]
	[[Kategorie:Web-Programmierung-HowTo]]		[[Kategorie:Web-Programmierung-HowTo]]
	[[Kategorie:Praktikum:MMProg]]		[[Kategorie:Praktikum:MMProg]]

Kowa am 2. August 2017 um 11:43 Uhr

2017-08-02T11:43:42Z

← Nächstältere Version		Version vom 2. August 2017, 11:43 Uhr
Zeile 70:		Zeile 70:
	suchen dort via Lupe nach "Markdown support" und klicken anschließend auf <code>Search in Repositories</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.		Dort erscheint dann ein Plugin namens "Markdown support". Installieren Sie dieses und starten WebStorm danach neu.

			==Quellen==
			# {{Quelle\|JetBrains (WebStorm)}}

	[[Kategorie:Kapitel:Web-Programmierung]]		[[Kategorie:Kapitel:Web-Programmierung]]
	[[Kategorie:Web-Programmierung-HowTo]]		[[Kategorie:Web-Programmierung-HowTo]]
	[[Kategorie:Praktikum:MMProg]]		[[Kategorie:Praktikum:MMProg]]

Kowa am 2. August 2017 um 11:25 Uhr

2017-08-02T11:25:02Z

← Nächstältere Version		Version vom 2. August 2017, 11:25 Uhr
Zeile 1:		Zeile 1:
			{{HTML5-Tutorium:JavaScript:WebStorm:Menü}}
	==Installation von WebStorm==		==Installation von WebStorm==

Kowa am 14. Februar 2017 um 07:49 Uhr

2017-02-14T07:49:07Z

← Nächstältere Version		Version vom 14. Februar 2017, 07:49 Uhr
Zeile 70:		Zeile 70:
	Dort erscheint dann ein Plugin namens "Markdown support". Installieren Sie dieses und starten WebStorm danach neu.		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:Kapitel:Web-Programmierung]]
			[[Kategorie:Web-Programmierung-HowTo]]
			[[Kategorie:Praktikum:MMProg]]

Kowa: /* Installation von WebStorm */

2016-10-06T07:59:20Z

Installation von WebStorm

← Nächstältere Version		Version vom 6. Oktober 2016, 07:59 Uhr
Zeile 1:		Zeile 1:
	==Installation von WebStorm==		==Installation von WebStorm==

	Laden Sie sich zunächst WebStorm herunter ~~und installieren Sie es:~~ https://www.jetbrains.com/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.		'''Anmerkung:''' Auf Rechnern der Hochschule ist WebStorm bereits vorinstalliert.
Zeile 29:		Zeile 30:
	====Code-Style====		====Code-Style====

	Standardmäßig sind 4 Leerzeichen als Einrückung für Code-~~Formattierungen~~ eingestellt.		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.		Eine Vorgabe dafür gibt es nicht, die Empfehlung sind aber 2 Leerzeichen aufgrund der weiten Verbreitung.

	Passen Sie dies ~~Einstellungn~~ an:		Passen Sie dies Einstellungen an:

	* <code>Configure</code>/<code>File</code> → <code>Settings</code> → <code>Editor</code → <code>Code Style</code> → ~~öffen~~ (Klick auf Dreiecke vor den Namen)		* <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ü		* 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.		** Tragen Sie bei „<code>Tab size</code>“, „<code>Indent</code>“ und „<code>Continuation Indent</code>“ die Zahl <code>2</code> ein.
Zeile 59:		Zeile 60:
	* <code>OK</code>		* <code>OK</code>

	'''Vermeiden Sie es Tab-Zeichen an Stelle von Leerzeichen zu verwenden, da die ~~Tabbreite~~ nicht genormt ist und je nach Editor anders interpretiert wird.'''		'''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====		====Markdown====
Zeile 67:		Zeile 68:
	Dazu gehen Sie auf <code>Configure</code> → <code>Plugins</code>,		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>.		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.		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:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]

Kowa: /* Markdown */

2016-09-22T08:57:36Z

Markdown

← Nächstältere Version		Version vom 22. September 2016, 08:57 Uhr
Zeile 63:		Zeile 63:
	====Markdown====		====Markdown====

	Anmerkungen zu den Praktikumsaufgaben sind im Repository als Markdown-Dokumente abgespeichert.		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.		Für Syntax-Highlighting und eine Vorschauansicht müssen Sie das entsprechende Plugin installieren.
	Dazu gehen Sie auf <code>Configure</code> → <code>Plugins</code>,		Dazu gehen Sie auf <code>Configure</code> → <code>Plugins</code>,

Kowa: /* Code-Style */

2016-09-22T08:57:01Z

Code-Style

← Nächstältere Version		Version vom 22. September 2016, 08:57 Uhr
Zeile 57:		Zeile 57:
	***Hier gibt es leider kein „<code>Braces placement</code> → <code>Next line</code>“ :-(		***Hier gibt es leider kein „<code>Braces placement</code> → <code>Next line</code>“ :-(
	***<code>Align values</code> → <code>On value</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 Tabbreite nicht genormt ist und je nach Editor anders interpretiert wird.'''		'''Vermeiden Sie es Tab-Zeichen an Stelle von Leerzeichen zu verwenden, da die Tabbreite nicht genormt ist und je nach Editor anders interpretiert wird.'''

Kowa: /* Code-Style */

2016-09-22T08:55:16Z

Code-Style

@@ Zeile 32: / Zeile 32: @@
 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:
-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)
-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.'''
 ====Markdown====