Siemens WinCC Unified JavaScript Code User Manual

WinCC Unified JavaScript Code entwickeln und Styleguide prüfen mit Visual Studio Code

WinCC Unified V17/Scripting

https://support.industry.siemens.com/cs/ww/de/view/109801600

Siemens
Industry
Online
Support

Rechtliche Hinweise

UnifiedVisualStudioCode
Beitrags-ID: 109801600, V1.0, 10/2021

2

© Siemens

AG 2021 All rights reserved

Rechtliche Hinweise

Nutzung der Anwendungsbeispiele

In den Anwendungsbeispielen wird die Lösung von Automatisierungsaufgaben im Zusammen­spiel mehrerer Komponenten in Form von Text, Grafiken und/oder Software-Bausteinen
beispielhaft dargestellt. Die Anwendungsbeispiele sind ein kostenloser Service der Siemens AG

und/oder einer Tochtergesellschaft der Siemens AG („Siemens“). Sie sind unverbindlich und

erheben keinen Anspruch auf Vollständigkeit und Funktionsfähigkeit hinsichtlich Konfiguration
und Ausstattung. Die Anwendungsbeispiele stellen keine kundenspezifischen Lösungen dar,
sondern bieten lediglich Hilfestellung bei typischen Aufgabenstellungen. Sie sind selbst für den
sachgemäßen und sicheren Betrieb der Produkte innerhalb der geltenden Vorschriften
verantwortlich und müssen dazu die Funktion des jeweiligen Anwendungsbeispiels überprüfen
und auf Ihre Anlage individuell anpassen.
Sie erhalten von Siemens das nicht ausschließliche, nicht unterlizenzierbare und nicht
übertragbare Recht, die Anwendungsbeispiele durch fachlich geschultes Personal zu nutzen.
Jede Änderung an den Anwendungsbeispielen erfolgt auf Ihre Verantwortung. Die Weitergabe an
Dritte oder Vervielfältigung der Anwendungsbeispiele oder von Auszügen daraus ist nur in
Kombination mit Ihren eigenen Produkten gestattet. Die Anwendungsbeispiele unterliegen nicht
zwingend den üblichen Tests und Qualitätsprüfungen eines kostenpflichtigen Produkts, können
Funktions- und Leistungsmängel enthalten und mit Fehlern behaftet sein. Sie sind verpflichtet, die
Nutzung so zu gestalten, dass eventuelle Fehlfunktionen nicht zu Sachschäden oder der
Verletzung von Personen führen.

Haftungsausschluss

Siemens schließt seine Haftung, gleich aus welchem Rechtsgrund, insbesondere für die
Verwendbarkeit, Verfügbarkeit, Vollständigkeit und Mangelfreiheit der Anwendungsbeispiele,
sowie dazugehöriger Hinweise, Projektierungs- und Leistungsdaten und dadurch verursachte
Schäden aus. Dies gilt nicht, soweit Siemens zwingend haftet, z.B. nach dem Produkthaftungs­gesetz, in Fällen des Vorsatzes, der groben Fahrlässigkeit, wegen der schuldhaften Verletzung
des Lebens, des Körpers oder der Gesundheit, bei Nichteinhaltung einer übernommenen
Garantie, wegen des arglistigen Verschweigens eines Mangels oder wegen der schuldhaften
Verletzung wesentlicher Vertragspflichten. Der Schadensersatzanspruch für die Verletzung
wesentlicher Vertragspflichten ist jedoch auf den vertragstypischen, vorhersehbaren Schaden
begrenzt, soweit nicht Vorsatz oder grobe Fahrlässigkeit vorliegen oder wegen der Verletzung
des Lebens, des Körpers oder der Gesundheit gehaftet wird. Eine Änderung der Beweislast zu
Ihrem Nachteil ist mit den vorstehenden Regelungen nicht verbunden. Von in diesem Zusammen­hang bestehenden oder entstehenden Ansprüchen Dritter stellen Sie Siemens frei, soweit
Siemens nicht gesetzlich zwingend haftet.
Durch Nutzung der Anwendungsbeispiele erkennen Sie an, dass Siemens über die beschriebene
Haftungsregelung hinaus nicht für etwaige Schäden haftbar gemacht werden kann.

Weitere Hinweise

Siemens behält sich das Recht vor, Änderungen an den Anwendungsbeispielen jederzeit ohne
Ankündigung durchzuführen. Bei Abweichungen zwischen den Vorschlägen in den Anwendungs­beispielen und anderen Siemens Publikationen, wie z. B. Katalogen, hat der Inhalt der anderen
Dokumentation Vorrang.
Ergänzend gelten die Siemens Nutzungsbedingungen (https://support.industry.siemens.com).

Securityhinweise

Siemens bietet Produkte und Lösungen mit Industrial Security-Funktionen an, die den sicheren
Betrieb von Anlagen, Systemen, Maschinen und Netzwerken unterstützen.
Um Anlagen, Systeme, Maschinen und Netzwerke gegen Cyber-Bedrohungen zu sichern, ist es
erforderlich, ein ganzheitliches Industrial Security-Konzept zu implementieren (und kontinuierlich
aufrechtzuerhalten), das dem aktuellen Stand der Technik entspricht. Die Produkte und Lösungen
von Siemens formen nur einen Bestandteil eines solchen Konzepts.
Der Kunde ist dafür verantwortlich, unbefugten Zugriff auf seine Anlagen, Systeme, Maschinen
und Netzwerke zu verhindern. Systeme, Maschinen und Komponenten sollten nur mit dem
Unternehmensnetzwerk oder dem Internet verbunden werden, wenn und soweit dies notwendig
ist und entsprechende Schutzmaßnahmen (z.B. Nutzung von Firewalls und Netzwerk­Segmentierung) ergriffen wurden.
Zusätzlich sollten die Empfehlungen von Siemens zu entsprechenden Schutzmaßnahmen
beachtet werden. Weiterführende Informationen über Industrial Security finden Sie unter:

https://www.siemens.com/industrialsecurity.

Die Produkte und Lösungen von Siemens werden ständig weiterentwickelt, um sie noch sicherer
zu machen. Siemens empfiehlt ausdrücklich, Aktualisierungen durchzuführen, sobald die
entsprechenden Updates zur Verfügung stehen und immer nur die aktuellen Produktversionen zu
verwenden. Die Verwendung veralteter oder nicht mehr unterstützter Versionen kann das Risiko
von Cyber-Bedrohungen erhöhen.
Um stets über Produkt-Updates informiert zu sein, abonnieren Sie den Siemens Industrial
Security RSS Feed unter: https://www.siemens.com/industrialsecurity.

Inhaltsverzeichnis

UnifiedVisualStudioCode
Beitrags-ID: 109801600, V1.0, 10/2021

3

© Siemens AG

2021 All rights reserved

Inhaltsverzeichnis

Rechtliche Hinweise .................................................................................................... 2

1 Einführung .......................................................................................................... 4

1.1 Überblick............................................................................................... 4

1.2 Funktionsweise ..................................................................................... 4

1.3 Verwendete Komponenten ................................................................... 5

2 Einrichtung der Entwicklungsumgebung ....................................................... 6

2.1 Installation von Visual Studio Code ...................................................... 6

2.2 Installation von Node.js ........................................................................ 6

2.3 Öffnen der Konfigurationsdateien ........................................................ 7

2.4 Installieren der zusätzlichen Pakete ..................................................... 9

2.5 Installieren der ESLint Erweiterung .................................................... 10

3 Beispiele ........................................................................................................... 11

3.1 Nutzen der Entwicklungsumgebung ................................................... 11

3.2 Autovervollständigung ........................................................................ 12

3.3 Autokorrektur ...................................................................................... 12

4 Wissenswertes ................................................................................................. 15

4.1 Visual Studio Code ............................................................................. 15

4.2 Node.js ............................................................................................... 15

5 Anhang.............................................................................................................. 16

5.1 Service und Support ........................................................................... 16

5.2 Industry Mall ....................................................................................... 17

5.3 Links und Literatur .............................................................................. 17

5.4 Änderungsdokumentation .................................................................. 17

1 Einführung

UnifiedVisualStudioCode
Beitrags-ID: 109801600, V1.0, 10/2021

4

© Siemens AG

2021 All rights

reserved

1 Einführung

1.1 Überblick

Visual Studio Code ist ein leistungsfähiger Code Editor und bietet eine
umfangreiche Autovervollständigung.

Weiterhin bietet Visual Studio Code mit Hilfe einer von uns bereitgestellten
Styleguide-Konfiguration (ESLinter1) die Überprüfung und automatische Korrektur
von Programmierrichtlinien an.

Das Anwendungsbeispiel zeigt Ihnen, wie Sie mit Visual Studio Code die vorzügen
eines Quelltext-Editors nutzen können. Damit erstellen Sie einen übersichtlichen,
leicht lesbaren Code.

Arbeiten mehrere Entwickler an Scripts, erstellen Sie damit einen einheitlichen
Code.

1.2 Funktionsweise

Visual Studio Code wird zusammen mit Konfigurationsdateien als Umgebung für
die Erstellung von Code genutzt. Dieser Code kann daraufhin in die
Entwicklungsumgebung des TIA Portals kopiert werden. Damit ist sichergestellt,
dass der Code im TIA Portal leicht lesbar und einheitlich ist.

Abbildung 1-1

WinCC Unified Script editor

Configuration files

Visual Studio Code

Code creation

Using code

Incl. Auto complete

information

Config-File

(for code style

check)

JavaScript

Runtime

Environment

Legend

by SIEMENS

by 3rd party

Library for
code style

check

Code

1

ES steht für Ecmascript, sinngemäß die Standardisierung für JavaScript. Linter ist ein Tool zur

Code-Analyse.

1 Einführung

UnifiedVisualStudioCode
Beitrags-ID: 109801600, V1.0, 10/2021

5

© Siemens AG

2021 All rights

reserved

1.3 Verwendete Komponenten

Dieses Anwendungsbeispiel wurde mit diesen Hard- und Softwarekomponenten
erstellt:

Tabelle 1-1

Komponente

Anzahl

Artikelnummer

Hinweis

WinCC Unified
Engineering V17

1

6AV2153-....1-7

Visual Studio Code

1

https://code.visualstudi
o.com/Download

Node.js

1

https://nodejs.org/de/do
wnload/

Dieses Anwendungsbeispiel besteht aus folgenden Komponenten:

Tabelle 1-2

Komponente

Dateiname

Hinweis

Dokumentation

Autovervollständigung in
Visual Studio Code und
Scripting StyleGuide.pdf

Dieses Dokument
Styleguide-Konfiguration für
Visual Studio Code

Unified StyleGuide
Umgebung.zip

2 Einrichtung der Entwicklungsumgebung

UnifiedVisualStudioCode
Beitrags-ID: 109801600, V1.0, 10/2021

6

© Siemens AG

2021 All rights

reserved

2 Einrichtung der Entwicklungsumgebung

2.1 Installation von Visual Studio Code

Als Entwicklungsumgebung wird hier Visual Studio Code von Microsoft benutzt.
Visual Studio Code ist Open Source und wird unter folgendem Link zum Download

angeboten:

https://code.visualstudio.com/Download

1. Laden Sie das Programm. Achten Sie auf die für Ihr Betriebssystem passende
Installationsdatei.

2. Installieren Sie Visual Studio Code.
Sie müssen Visual Studio Code nicht starten.

2.2 Installation von Node.js

Unter folgendem Link können Sie Node.js herunterladen:

https://nodejs.org/de/download/

1. Laden Sie das Programm. Achten Sie auf die für Ihr Betriebssystem passende
Installationsdatei.

2. Starten Sie die Installation.

3. Wählen Sie im gezeigten Installationsschritt die markierte Option.

Abbildung 2-1

4. Fahren Sie mit den Installationsschritten fort.
Zum Abschluss wird eine PowerShell-Instanz geöffnet und die abschließende
Installationsschritte ausgeführt.