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 Zusammenspiel 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 Produkthaftungsgesetz, 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 Zusammenhang 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 Anwendungsbeispielen 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 NetzwerkSegmentierung) 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.