Developing WinCC Unified JavaScript Code and Checking Style Guide with Visual Studio Code

Legal Information

Application examples illustrate the solution of automation tasks through an interaction of several components in the form of text, graphics and/or software modules. These examples are a free service by Siemens AG and/or its subsidiaries. They are non-binding and do not claim completeness or functionality. They offer help with typical tasks but do not constitute customer-specific solutions. Users are responsible for the proper and safe operation of products in accordance with applicable regulations and must customize the application examples for their systems.

Siemens grants a non-exclusive, non-sublicensable, non-transferable right to use the application examples by technically trained personnel. Any changes are the user's responsibility. Sharing or copying these examples is permitted only in combination with your own products.

The application examples are not subject to customary tests and quality inspections of chargeable products and may have functional or performance defects. Users are responsible for ensuring that malfunctions do not result in property damage or injury.

Disclaimer of Liability

Siemens assumes no liability for the usability, availability, completeness, or freedom from defects of the application examples or related information. This does not apply to mandatory liability cases (e.g., under the German Product Liability Act), intent, gross negligence, or culpable loss of life, bodily injury, or damage to health. Claims for damages from breaches of material contractual obligations are limited to foreseeable damage typical of the agreement type, unless arising from intent, gross negligence, or personal injury. The burden of proof is not altered to your detriment. Users indemnify Siemens against third-party claims, except where Siemens is mandatorily liable.

By using the application examples, users acknowledge that Siemens is not liable for damages beyond these provisions.

Other Information

Siemens reserves the right to make changes to application examples without notice. In case of discrepancies, other Siemens publications (e.g., catalogs) take precedence. The Siemens terms of use (https://support.industry.siemens.com) also apply.

Security Information

Siemens provides products and solutions with Industrial Security functions to support secure operation of plants, systems, machines, and networks. A holistic, state-of-the-art industrial security concept is necessary to protect against cyber threats. Siemens' products are one element of this concept. Customers are responsible for preventing unauthorized access. Systems should only be connected to enterprise networks or the Internet when necessary and with appropriate security measures (e.g., firewalls, network segmentation). For more information, visit https://www.siemens.com/industrialsecurity.

Siemens products undergo continuous development for security. Updates should be applied promptly. Using unsupported versions or failing to apply updates increases cyber threat exposure. Subscribe to the Siemens Industrial Security RSS Feed at: https://www.siemens.com/industrialsecurity.

Introduction

Overview

Visual Studio Code is a powerful code editor with comprehensive auto-completion. It supports style guide configuration (ESLint) for verification and automatic correction of programming style guides. This application example demonstrates using Visual Studio Code as a source text editor to write clean, legible, and uniform code, especially when multiple developers are involved.

Principle of Operation

Visual Studio Code is used with configuration files as a development environment. The code created can then be copied into the TIA Portal development environment, ensuring legibility and uniformity.

Figure 1-1: Principle of operation diagram. It shows configuration files (JavaScript Runtime Environment, Library for code style check, Config-File) feeding into Visual Studio Code, which generates code with auto-complete information. This code is then used in the WinCC Unified Script editor. A legend indicates items provided by SIEMENS and by 3rd party.

Components Used

The following hardware and software components were used:

This application example consists of the following components:

Setting Up the Development Environment

Installing Visual Studio Code

Visual Studio Code will be used as the development environment. It is open source and can be downloaded from https://code.visualstudio.com/Download. Download and install the program, ensuring you select the correct installation file for your operating system. Launching Visual Studio Code is not required immediately after installation.

Installing Node.js

Node.js can be downloaded from https://nodejs.org/en/download/. Download and install the program for your operating system. During installation, select the highlighted option in the Node.js Setup dialog (Figure 2-1) to automatically install necessary tools, including Chocolatey. A PowerShell script will run to complete the installation. Continue with the installation steps and restart your computer when prompted.

Figure 2-1: Node.js Setup dialog showing the 'Tools for Native Modules' option. The option 'Automatically install the necessary tools' is highlighted, with a note that it also installs Chocolatey and runs a script. An alternative method is linked.

Opening the Configuration Files

1. Download and extract the file Unified StyleGuide Umgebung.zip.

2. Start Visual Studio Code (or restart it if already running after installing Node.js).

3. Open the extracted folder, Unified StyleGuide Umgebung, by clicking File > Open folder or selecting Open folder from the welcome screen (Figure 2-3).

Figure 2-3: Visual Studio Code welcome screen with options like 'New File...', 'Open File...', 'Open Folder...', and 'Run a Command...'.

4. Navigate to your extracted folder and click Select Folder (Figure 2-4).

Figure 2-4: 'Open Folder' dialog showing the 'Unified StyleGuide Umgebung' folder selected for opening.

Figure 2-5: Visual Studio Code File Explorer view displaying the contents of the 'Unified StyleGuide Umgebung' folder, including configuration files (.eslintrc.json, jsconfig.json, package.json) and script files (ua_rt_device.d.ts, unified_index.js).

Installing Additional Packages

1. Open a new terminal within Visual Studio Code (Figure 2-6).

Figure 2-6: Visual Studio Code terminal menu with 'New Terminal' highlighted.

2. Enter the command npm install in the terminal to install the project's required packages (Figure 2-7).

Figure 2-7: Visual Studio Code terminal output after running 'npm install', showing package installation progress, warnings, and audit results.

Installing the ESLint Extension

1. In Visual Studio Code, navigate to Extensions.

2. Search for the ESLint extension by Dirk Baeumer.

3. Click Install to add the extension.

4. Enable the ESLint extension by clicking its icon in the status bar and allowing its use (Figure 2-9).

Figure 2-8: Visual Studio Code Extensions view showing the ESLint extension details and installation button.

Figure 2-9: Visual Studio Code status bar indicating the development environment is set up, with the ESLint icon visible.

Examples

Using the Development Environment

1. Open the file unified_index.js in your project folder within Visual Studio Code (Figure 3-1).

Figure 3-1: The 'unified_index.js' file open in Visual Studio Code, showing code comments and the file explorer structure.

2. This is where you can write code for your Unified project, benefiting from autocomplete and autocorrect features (Figure 3-2).

Figure 3-2: The 'unified_index.js' file in Visual Studio Code, illustrating code writing with AI assistance.

3. Once the code is complete and formatted, copy it to TIA Portal.

Autocomplete

Visual Studio Code offers autocomplete suggestions when you enter a defined object (Figure 3-3).

Figure 3-3: Visual Studio Code autocomplete popup showing suggestions for properties of a 'Screen' object, such as 'Items', 'Layers', 'Name', etc.

Autocorrect

Autocorrect helps create uniformly formatted code for your Unified project.

Example 1

1. The 'if' block in the code (lines 8-9 in Figure 3-4) is not indented according to the Unified Style Guide.

2. The error is underlined in red.

Figure 3-4: Code snippet in 'unified_index.js' showing an indentation error in an 'if' block, marked with a red underline.

Move the mouse cursor over the error and click Quick Fix... to apply a solution (Figures 3-5, 3-6, and 3-7).

Figure 3-5: Autocorrect popup offering 'Quick Fix...' for the detected indentation error.

Figure 3-6: Suggested solutions for the indentation problem, including 'Fix this indent problem'.

Figure 3-7: The 'unified_index.js' code after the formatting error has been automatically fixed.

Example 2

The formatting error in line 9 (an empty line within the 'if' block) can be corrected similarly (Figure 3-8).

Figure 3-8: Code snippet in 'unified_index.js' showing a formatting error in line 9 of the 'if' block.

Figure 3-9: The 'unified_index.js' code with the formatting error corrected, resulting in fully formatted code.

Useful Information

Visual Studio Code

Visual Studio Code is a lean, powerful code editor supporting JavaScript, TypeScript, and Node.js. With extensions, it can support virtually any programming language and framework. Documentation is available at https://code.visualstudio.com/docs.

Node.js

Node.js is a JavaScript runtime environment. Documentation is available at https://nodejs.org/en/docs/.

Appendix

Service and Support

Industry Online Support

Siemens Industry Online Support offers 24/7 access to service and support information, including product information, manuals, downloads, FAQs, and application examples. Access it at support.industry.siemens.com.

Technical Support

Siemens Industry Technical Support provides fast, competent support for technical queries. Submit queries via the web form at support.industry.siemens.com/cs/my/src.

SITRAIN – Digital Industry Academy

Siemens offers globally available training courses for industry. For more information, visit siemens.com/sitrain.

Service Offer

Siemens' services include:

• Plant data services
• Spare parts services
• Repair services
• On-site and maintenance services
• Retrofitting and modernization services
• Service programs and contracts

Detailed information is available in the service catalog at support.industry.siemens.com/cs/sc.

Industry Online Support App

The 'Siemens Industry Online Support' app is available for iOS and Android at support.industry.siemens.com/cs/ww/en/sc/2067.

Industry Mall

The Siemens Industry Mall is the platform for the entire Siemens Industry product portfolio, enabling complete purchasing processing online. Visit mall.industry.siemens.com.

Links and Literature

Change Documentation