Loading...
WinCC Unified
JavaScript Code entwickeln und Styleguide prüfen mit Visual Studio Code
|
|
|
|
|
|
|
|
|
Siemens |
|
|
|
|
|
|
WinCC Unified V17/Scripting |
|
||
|
|
|
Industry |
|
|
|
|
|
|
|
|
|
|
Online |
|
https://support.industry.siemens.com/cs/ww/de/view/109801600 |
|
||
|
|
|
Support |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
<![endif]>© Siemens AG 2021 All rights reserved
Rechtliche Hinweise
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 Funktionsund 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, Projektierungsund 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.
UnifiedVisualStudioCode |
2 |
Beitrags-ID: 109801600, V1.0, 10/2021 |
<![endif]>© Siemens AG 2021 All rights reserved
Inhaltsverzeichnis
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 |
UnifiedVisualStudioCode |
3 |
Beitrags-ID: 109801600, V1.0, 10/2021 |
<![endif]>© Siemens AG 2021 All rights reserved
1 Einführung
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.2Funktionsweise
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
|
|
JavaScript |
|
Library for |
|
Config-File |
|
|
|
Configuration files |
|
|
|
(for code style |
|
|
|
||
|
Runtime |
|
code style |
|
|
|
|||
|
|
Environment |
|
check |
|
check) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Visual Studio Code |
|
|
||||
Code creation |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Incl. Auto complete |
|
|
||
|
|
|
|
|
|
information |
|
|
|
|
|
|
Code |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend |
|
|
|
|
|
|
|
|
|
|
Using code |
|
WinCC Unified Script editor |
|
|
|||||
|
|
|
by SIEMENS |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
by 3rd party |
1 ES steht für Ecmascript, sinngemäß die Standardisierung für JavaScript. Linter ist ein Tool zur Code-Analyse.
UnifiedVisualStudioCode |
4 |
Beitrags-ID: 109801600, V1.0, 10/2021 |
<![endif]>© Siemens AG 2021 All rights reserved
1 Einführung
1.3Verwendete Komponenten
Dieses Anwendungsbeispiel wurde mit diesen Hardund Softwarekomponenten erstellt:
Tabelle 1-1
Komponente |
Anzahl |
Artikelnummer |
Hinweis |
|
|
|
|
WinCC Unified |
1 |
6AV2153-....1-7 |
|
Engineering V17 |
|
|
|
|
|
|
|
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 |
Dieses Dokument |
|
Visual Studio Code und |
|
|
Scripting StyleGuide.pdf |
|
|
|
|
Styleguide-Konfiguration für |
Unified StyleGuide |
|
Visual Studio Code |
Umgebung.zip |
|
|
|
|
UnifiedVisualStudioCode |
5 |
Beitrags-ID: 109801600, V1.0, 10/2021 |
<![endif]>© Siemens AG 2021 All rights reserved
2 Einrichtung der Entwicklungsumgebung
2 Einrichtung der Entwicklungsumgebung
2.1Installation 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.2Installation 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.
UnifiedVisualStudioCode |
6 |
Beitrags-ID: 109801600, V1.0, 10/2021 |
Loading...