Using VS Code: Difference between revisions
Tanai.Marin (talk | contribs) No edit summary |
Tanai.Marin (talk | contribs) No edit summary |
||
Line 12: | Line 12: | ||
'''NOTES:''' | '''NOTES:''' | ||
# The following instructions are valid for VS Code version 1.72.0 or earlier | # The following instructions are valid for VS Code version 1.72.0 or earlier | ||
# Please download the latest version of VS Code from https://code.visualstudio.com/Download | # Please download the latest version of VS Code from https://code.visualstudio.com/Download | ||
Line 19: | Line 19: | ||
VS Code is a feature rich editor, highly customizable and always adding more functionality thanks to its modular extension-based and community driven architecture. It would be impossible to list all the features and benefits of using VS Code as editor for SysCAD PGM language. However, some specific features included in the SysCAD-PGM extension are: | VS Code is a feature rich editor, highly customizable and always adding more functionality thanks to its modular extension-based and community driven architecture. It would be impossible to list all the features and benefits of using VS Code as editor for SysCAD PGM language. However, some specific features included in the SysCAD-PGM extension are: | ||
# Language grammar syntax highlight: automatic coloring of recognized tokens: variable types, functions, comments, etc. | # Language grammar syntax highlight: automatic coloring of recognized tokens: variable types, functions, comments, etc. | ||
# Code snippets for multiple functions: if, if-else, while statements, etc. | # Code snippets for multiple functions: if, if-else, while statements, etc. | ||
# Auto-complete for SysCAD keywords and functions | # Auto-complete for SysCAD keywords and functions | ||
# Selectable coloring theme and overall look and feel, typical Light and Dark themes but many more are available to be added. | # Selectable coloring theme and overall look and feel, typical Light and Dark themes but many more are available to be added. | ||
Line 45: | Line 45: | ||
This might vary depending on where your local copy of SysCAD was installed, therefore look for the '''\Setup\VSCode_PGM_Extension\''' folder in your local installation. | This might vary depending on where your local copy of SysCAD was installed, therefore look for the '''\Setup\VSCode_PGM_Extension\''' folder in your local installation. | ||
# Double click on the SysCAD PGM extension installation script: '''syscad-pgm.cmd''' | # Double click on the SysCAD PGM extension installation script: '''syscad-pgm.cmd''' | ||
# Open VSCode and verify that the extension has been installed successfully | # Open VSCode and verify that the extension has been installed successfully | ||
[[File:SysCAD-PGM-Extension Installed.png|800 px|none|SysCAD-PGM VSCode Extension Installed]]<br> | [[File:SysCAD-PGM-Extension Installed.png|800 px|none|SysCAD-PGM VSCode Extension Installed]]<br> | ||
Alternatively, the extension can be installed manually by: | Alternatively, the extension can be installed manually by: | ||
# Opening a windows command prompt (Start / Command) | # Opening a windows command prompt (Start / Command) | ||
# Navigating to the folder where the extension (vsix file) is saved. For example by typing: ''cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension'' | # Navigating to the folder where the extension (vsix file) is saved. For example by typing: ''cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension'' | ||
# Run the following command: ''code --install-extension syscad-pgm-1.0.0.vsix'' | # Run the following command: ''code --install-extension syscad-pgm-1.0.0.vsix'' | ||
Line 62: | Line 62: | ||
== Customizing SysCAD PGM VSCode Extension == | == Customizing SysCAD PGM VSCode Extension == | ||
=== Changing | === Changing Coloring Theme === | ||
Change VS Code theme coloring by selecting: '''File / Preferences / Color Theme''' or type '''Ctrl+K Ctrl+T''' and select the Theme of your choice; | Change VS Code theme coloring by selecting: '''File / Preferences / Color Theme''' or type '''Ctrl+K Ctrl+T''' and select the Theme of your choice; | ||
=== Enabling / Disable Code Snippets === | === Enabling / Disable Code Snippets === | ||
To disable/enable code snippets | To disable/enable code snippets | ||
# Open a SysCAD-PGM file | # Open a SysCAD-PGM file | ||
# Open the command palette: ''View / Command Palette'' or press ''F1'' | # Open the command palette: ''View / Command Palette'' or press ''F1'' | ||
# Type: Insert Snippet and press enter | # Type: Insert Snippet and press enter | ||
# Select a snippet from the list or start typing the name of the snippet | # Select a snippet from the list or start typing the name of the snippet | ||
# Click on the eye icon next to the snippet to make it hidden. | # Click on the eye icon next to the snippet to make it hidden. | ||
Line 78: | Line 78: | ||
Depending on your environment or previously installed version of VSCode or even previously installed SysCAD-PGM extensions, there might be situations where the extension is not automatically installed.<br> | Depending on your environment or previously installed version of VSCode or even previously installed SysCAD-PGM extensions, there might be situations where the extension is not automatically installed.<br> | ||
To view the detailed log and result of the installation script, do the following: | To view the detailed log and result of the installation script, do the following: | ||
# Make sure you have the latest Syscad-PGM extension distribution file | # Make sure you have the latest Syscad-PGM extension distribution file | ||
# Open a Windows Command Prompt application: ''Start / Command'' and select Command Prompt | # Open a Windows Command Prompt application: ''Start / Command'' and select Command Prompt | ||
# Navigate to the folder where the extension and the installation script are saved. For example: 'cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension'' | # Navigate to the folder where the extension and the installation script are saved. For example: 'cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension'' | ||
# Run the installation script by typing: ''syscad-pgm.cmd'' and Enter | # Run the installation script by typing: ''syscad-pgm.cmd'' and Enter | ||
[[File:SysCAD-PGM-Extension Installation script.png|none|SysCAD-PGM VSCode extension installation script]]<br> | [[File:SysCAD-PGM-Extension Installation script.png|none|SysCAD-PGM VSCode extension installation script]]<br> | ||
You will see the output of the script, finalizing with and Exit code, as shown above.<br> | You will see the output of the script, finalizing with and Exit code, as shown above.<br> | ||
Line 102: | Line 102: | ||
| 5|| SysCAD-PGM extension could not be installed by VS Code || Try to install extension manually and look at the error messages | | 5|| SysCAD-PGM extension could not be installed by VS Code || Try to install extension manually and look at the error messages | ||
|- | |- | ||
| -1|| An earlier or equal version of SysCAD-PGM extension already installed || This is a warning only. If necessary to install an older version of the SysCAD-PGM extension, please install it | | -1|| An earlier or equal version of SysCAD-PGM extension already installed || This is a warning only. If necessary to install an older version of the SysCAD-PGM extension, please install it manually | ||
|} | |} |
Revision as of 20:58, 20 January 2023
Navigation: User Guide ➔ Editors and Utilities ➔ VSCode
Related Links: PGMs, PGM Introduction
Introduction
SysCAD now provides an extension package that can be used within Microsoft VS Code Editor for syntax highlight and automatic code snippets. Both SysCAD Control Program files - PGM and MP are supported in this extension.
VS Code is a rich and versatile code editor (see https://code.visualstudio.com/) offering many features and extensions supporting a large number of code languages, themes, add-ons, git integration, etc. SysCAD PGM files can now be edited and managed directly from VS Code.
NOTES:
- The following instructions are valid for VS Code version 1.72.0 or earlier
- Please download the latest version of VS Code from https://code.visualstudio.com/Download
SysCAD PGM VS Code Extension Features
VS Code is a feature rich editor, highly customizable and always adding more functionality thanks to its modular extension-based and community driven architecture. It would be impossible to list all the features and benefits of using VS Code as editor for SysCAD PGM language. However, some specific features included in the SysCAD-PGM extension are:
- Language grammar syntax highlight: automatic coloring of recognized tokens: variable types, functions, comments, etc.
- Code snippets for multiple functions: if, if-else, while statements, etc.
- Auto-complete for SysCAD keywords and functions
- Selectable coloring theme and overall look and feel, typical Light and Dark themes but many more are available to be added.
For example, the default Dark+ and Light+ Themes are shown below:
Syntax highlight and Themes
Code Snippets
Installing SysCAD PGM VSCode Extension
Step 1: Install MS Visual Studio Code
If you have not installed VSCode already, please download and install from: https://code.visualstudio.com/Download.
Step 2: Install SysCAD PGM language VS Code Extension
SysCAD PGM language extension is included with SysCAD distribution as a compiled vsix file: syscad-pgm-X.X.X.vsix
The default location of the installation script for the VSCode extension is here: C:\SysCAD139\Setup\VSCode_PGM_Extension\
This might vary depending on where your local copy of SysCAD was installed, therefore look for the \Setup\VSCode_PGM_Extension\ folder in your local installation.
- Double click on the SysCAD PGM extension installation script: syscad-pgm.cmd
- Open VSCode and verify that the extension has been installed successfully
Alternatively, the extension can be installed manually by:
- Opening a windows command prompt (Start / Command)
- Navigating to the folder where the extension (vsix file) is saved. For example by typing: cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension
- Run the following command: code --install-extension syscad-pgm-1.0.0.vsix
Note: This assumes the name of the extension is for version 1.0.0, replace the correct name as needed.
Step 3: Set VSCode as default editor in SysCAD
- Open SysCAD General Options and set VSCode as the default text editor:
Note: VS Code is normally installed in your local user account. Make sure to specify the correct user name.
Customizing SysCAD PGM VSCode Extension
Changing Coloring Theme
Change VS Code theme coloring by selecting: File / Preferences / Color Theme or type Ctrl+K Ctrl+T and select the Theme of your choice;
Enabling / Disable Code Snippets
To disable/enable code snippets
- Open a SysCAD-PGM file
- Open the command palette: View / Command Palette or press F1
- Type: Insert Snippet and press enter
- Select a snippet from the list or start typing the name of the snippet
- Click on the eye icon next to the snippet to make it hidden.
Troubleshooting
Problems installing SysCAD-PGM Extension
Depending on your environment or previously installed version of VSCode or even previously installed SysCAD-PGM extensions, there might be situations where the extension is not automatically installed.
To view the detailed log and result of the installation script, do the following:
- Make sure you have the latest Syscad-PGM extension distribution file
- Open a Windows Command Prompt application: Start / Command and select Command Prompt
- Navigate to the folder where the extension and the installation script are saved. For example: 'cd C:\SysCAD139\Setup\Setup\VSCode_PGM_Extension
- Run the installation script by typing: syscad-pgm.cmd and Enter
You will see the output of the script, finalizing with and Exit code, as shown above.
If the Exit code is different from 0, then the SysCAD-PGM extension was not installed. Here is a list of exit codes and the reason why the installation did not proceeded:
Exit code | Description | Solution |
---|---|---|
0 | Installation Successful | |
1 | VS Code is not installed | Check if VS Code is installed. if not, please install |
2 | VS Code version incompatible | Minimum VS Code required is 1.72.0, please update |
3 | VS Code version could not be determined | Check minimum VS Code version and update if necessary |
4 | SysCAD-PGM extension file (.vsix) not found | Make sure extension file is saved in the same folder as installation script |
5 | SysCAD-PGM extension could not be installed by VS Code | Try to install extension manually and look at the error messages |
-1 | An earlier or equal version of SysCAD-PGM extension already installed | This is a warning only. If necessary to install an older version of the SysCAD-PGM extension, please install it manually |