SAPUI5 Extension
v0.14.0 update
Part of current extension was splitted into two npm packages: ui5plugin-parser and ui5plugin-linter.
As a result, all parser and linter related documentation moved there. Now it is possible to install linter npm package and run it globally without Visual Studio Code (which comes handy for building lint/test CI pipelines).
Major changes
Linter
As a result of migrating to npm packages, all linter related Visual Studio Code preferences were removed and now package.json is a source for linter configuration (see Config in ui5plugin-linter). This opens some flexibility for multiple folder workspaces, because each folder can contain different linter configuration which was not an option before. Additionally, now it is possible to control severity of the errors.
Parser
Parser related preference entries stays in Visual Studio Code for several technical reasons.
UI5 version, exclude folder patterns, data source, reject unauthorized and libs to load are still configured through Visual Studio Code and passed to ui5plugin-parser afterwards.
This plugin contains perks for UI5 developers.
Before you start working with the plugin, it will be useful to set formatOnSave setting in VSCode preferences:
"editor.formatOnSave": true
As well it's recommended to install hookyqr.beautify extension for formatting JS files.
The reason for it is described in Known limitations
Make sure that you have ui5.plugin.excludeFolderPattern property set correctly. This property is critical if you have SAPUI5 libraries in your workspace.
Completion Items
XML
XML Completion Items for UI5 Controls.
Check ui5.plugin.addInheritedPropertiesAndAggregations preference if you want to generate less properties and aggregations
XML Completion Items for properties, aggregations, associations and events
JS
sap.ui.define
Strings for import in sap.ui.define are provided.
Control ID Completion Items
IDs from the corresponding view of the controller are provided for view.byId or controller.byId method
Dynamic Completion Items
Completion items which are generated dynamically depending on current variable type or method return value type. Trigger character - dot.
Manifest.json
Schema for manifest.json properties is added.
Method Definitions
Definitions for custom methods are provided.
Hotkey: Ctrl + Left Click
XML Event Handler Definitions
Definitions for event handlers are provided.
Hotkey: Ctrl + Left Click
CodeLens
CodeLens for Internalization Texts, overriden methods, event handlers and references is provided
Related preference entries:
ui5.plugin.jsCodeLens
ui5.plugin.jsReferenceCodeLens
ui5.plugin.xmlCodeLens
XML Diagnostics
See UI5 Linter for reference
To make XML Linter ignore attribute errors of next tag, you can use <-- @ui5ignore --> comment right above the tag
JS Diagnostics
See UI5 Linter for reference
To make Unused method, public member, wrong parameter usage and wrong field/method linters ignore some methods or fields, you can use @ui5ignore JSDoc param
Properties (i18n) Diagnostics
See UI5 Linter for reference
Code Action Provider
Code Actions for UI5 modules import and inserting non-existent methods in .js files are provided.
Code Actions for creating event handlers in controllers from xml views are provided.
Hotkey: Alt + Enter
JS and XML Hover Provider
Information on hover is provided.
XML Formatter is available.
JS Rename Provider
Rename provider for js is provided.
Commands
Move sap.ui.define to parameters
Hotkey: F5
Related preference entries: ui5.plugin.moveDefineToFunctionParametersOnAutocomplete
Export to i18n
Set your position to the string you want to export to i18n.properties file and execute command. Works both in XML and JS files.
this.getBundle() method which returns ResourceBundle should be defined in Controller/BaseController
Related preference entries:
ui5.plugin.askUserToConfirmI18nId
ui5.plugin.addI18nTextLengthLimitation
ui5.plugin.textTransformationStrategy
Hotkey: F4
Switch View/Controller
Goes to view from controller and to controller from view
Hotkey: F3
Insert Custom Class name
Inserts the class name into current position
Hotkey: F6
Clear Cache
Clears cache with SAPUI5 lib metadata
Automatic template insertion
Inserts initial text for .js and .xml files
Extends "sap/ui/core/mvc/Controller" if file name ends with .controller.js and "sap/ui/base/ManagedObject" if file name ends with .js
Automatic class name and class path renaming
Extension listens for .js file creation event (rename technically is file deletion and creation) and replaces all occurrences of class name to the new one
UI5 Explorer
Custom UI5 Explorer in VSCode panel is available
For JS files tree view contains fields and methods
Coloring for methods is based on lines count and references count.
- Red color appears if there are more than 100 lines in one method
- Orange color appears if there are more than 50 lines in one method or there are 0 references (reference count is ignored if method is overriden)
- Green color appears for the rest of the cases
For XML files tree view contains class tag list
UML Class Diagram generation
UML Class diagram can be generated either for currently active document or for the whole project.
Also it is possible to generate ER diagram for opened metadata.xml file.
There are two ways to generate ER diagram:
- Open metadata.xml file, execute command "UI5: Generate ER diagram from metadata.xml"
- Execute command "UI5: Generate ER diagram from metadata.xml" and enter url to metadata.xml
It is possible to select in preferences which type of diagram to generate: DrawIO or PlantUML.
Recommended VSCode extensions:
DrawIO: hediet.vscode-drawio-insiders-build
PlantUML: jebbs.plantuml
UML Diagram example:
ER Diagram example:
There is a possibility to generate typedef JSDocs from metadata
Hotkeys
| Hotkey |
Command |
| Alt + Enter |
Quick Fix Action |
| F3 |
Switch View/Controller |
| F4 |
Export string to i18n |
| F5 |
Move sap.ui.define imports to parameters |
| F6 |
Insert custom class name |
Assumptions
- File starts with sap.ui.define
- Your class body is in AnyUI5Class.extend("name", {here});
- You have manifest.json with app/lib id
- App ID (Component name) and i18n paths are defined in manifest.json
- File is without syntax errors
- Name of the UI5Class is written accordingly to file path. (E.g. "/src/control/Text.js" => "anycomponentname.control.Text")
- You have an access to https://ui5.sap.com for standard lib metadata preload
Proxy
If HTTP_PROXY or HTTPS_PROXY environment variables are set, ui5.sap.com will be requested using the proxy.
Known limitations
acorn-loose
acorn-loose is used as JS parser. It has issues if you have mixed spaces and tabs.
Example:
function() {
var oModel = this.getModel();
var asd;
}
There is an unnecessary space before var oModel and acorn is parsing it incorrectly.
As a result - the file will not be parsed as expected and you might not get JS completion items and get errors in xml views regarding wrong values for event handlers.
Keep your code clean, it will help you to have the plugin working correctly :)
It's highly recommended to set formatting on save in your VS Code preferences, it will help to avoid such issues.
"editor.formatOnSave": true
Standard VSCode JS Formatter is not handling all formatting issues, however hookyqr.beautify extension does. It's highly recommended to install it and use as JS formatter.
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
}
