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

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

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

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

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

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

6AV2153-....1-7

Visual Studio Code

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

Node.js

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

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.

+ 11 hidden pages