Any support is highly appreciated!
Check the blog to get some ideas for developing with TS!
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": trueAs well it's recommended to install e.g. Prettier extension for JS/TS files formatting. The reason for it is described in Known issues
Make sure that you have excludeFolderPattern property set correctly for ui5parser. This property is critical if you have SAPUI5 libraries or any other sources which should not be parsed in your workspace.
Got new XML errors with ids and event handlers? Check out UI5 Linter Readme.
Have any ideas on how to improve MeaningAssumption variable determination? Create Feature request
- Configuration
- Completion Items
- Manifest.json schema
- Method Definitions
- XML Event Handler Definitions
- CodeLens
- XML Diagnostics
- JS/TS Diagnostics
- Properties (i18n) Diagnostics
- Code Action Provider
- JS and XML Hover Provider
- XML Formatter
- JS/TS Rename Provider
- Commands
- Move sap.ui.define to parameters
- Export to i18n
- Export to i18n (bulk)
- Switch View/Controller
- Insert Custom Class name
- Clear Cache
- UML Class Diagram generation
- JSDoc typedef generation from metadata
- (TS) Generate interfaces for XML files (id to class mapping)
- (TS) Generate interfaces for OData entities
- (TS) Generate interfaces for OData entities (Mass)
- Generate ids for all elements in view or fragment
- Automatic template insertion
- Automatic class name and class path renaming
- UI5 Explorer
- UI5 Project Data
- Hotkeys
- Proxy
- Known issues
- Things to consider using TS
- Parser instantiation logic
- Extension recommendations
VSCode extension is using UI5 Parser and UI5 Linter packages, because of that configuration is splitted into three parts:
- UI5 Parser configuration. Contains parser related configuration, e.g. UI5 Version, URL for standard library metadata preload, exclude folder patterns etc. Configuration can be done in
package.jsonor any ofrcfile types, e.g..ui5pluginrc.
Important! If
ui5parserrelated entries were changed in thepackage.jsonor any otherrcfile, VSCode should be reloaded manually
- UI5 Linter configuration. Contains linting related configuration, e.g. linter exceptions, severity, usage etc. Configuration can be done in
package.jsonor any ofrcfile types, e.g..ui5pluginrc. - VSCode preference entries. Contains VSCode specific configuration.
| VSCode Preference | Description |
|---|---|
| ui5.plugin.jsCodeLens | Should javascript CodeLens be enabled |
| ui5.plugin.jsReferenceCodeLens | Should javascript Reference CodeLens be enabled |
| ui5.plugin.xmlCodeLens | Should xml CodeLens be enabled |
| ui5.plugin.propertiesCodeLens | Should properties CodeLens be enabled |
| ui5.plugin.signatureHelp | Should UI5 Signature Help be enabled |
| ui5.plugin.moveDefineToFunctionParametersOnAutocomplete | Should sap.ui.define class names be moved to function parameters on sap.ui.define autocomplition |
| ui5.plugin.codeGeneratorStrategy | Strategy which should be used for code generation. E.g. you will get 'var' with ES5 strategy and 'let' with ES6 strategy when using override completion items. |
| ui5.plugin.UMLDiagramGenerationStrategy | Which format should be used for UML diagram generation |
| ui5.plugin.addI18nTextLengthLimitation | Should text length be added to i18n text id (e.g. #YMSG,14) |
| ui5.plugin.textTransformationStrategy | Case type which should be used for i18n text id proposal |
| ui5.plugin.askUserToConfirmI18nId | Should user confirm proposed i18n id |
| ui5.plugin.addInheritedPropertiesAndAggregations | Should inherited properties/aggregations be added in XML completion items |
| ui5.plugin.addTagAttributes | Should tag attributes be added in XML completion items |
| ui5.plugin.addTagAggregations | Should tag aggregations be added in XML completion items |
| ui5.plugin.tsEventModule | Event module for Typescript, which will be used when creating event handler from XML |
| ui5.plugin.tsEventType | Event type for Typescript, which will be used when creating event handler from XML. (e.g. type of sap/ui/base/Event is Event). |
| ui5.plugin.insertManagedObjectModule | Module which will be used for automatic insertion on custom class creation |
| ui5.plugin.insertControllerModule | Module which will be used for automatic insertion on custom controller creation |
| ui5.plugin.xmlFormatterTagEndingNewline | Should XML Formatter put tag ending (">", "/>") in newline |
| ui5.plugin.xmlFormatterSpaceAfterSelfTagEnd | Should XML Formatter leave a space between the last attribute and the self tag end ("/>") |
| ui5.plugin.umlGenerationPath | Path for file generated by UI5: Generate UML Class diagram for whole project command. Relative to project folder. Example: ../diagram/ClassDiagram.pu |
| ui5.plugin.XMLFileInterfacePath | Path for file generated by UI5: (TS) Generate types for XML files (id to class mapping) command. Relative to project folder. Example: ./types/ViewFragmentIds.d.ts |
| ui5.plugin.generateXMLFileInterfacesOnSave | Should UI5: (TS) Generate types for XML files (id to class mapping) command be executed on XML file save or not. Works only if ui5.plugin.XMLFileInterfacePath is set. Works only for TS projects. |
| ui5.plugin.TSODataInterfacesPath | Path for file generated by UI5: (TS) Generate interfaces for OData entities command. Relative to project folder. Example: ./types/ODataTypes.d.ts |
| ui5.plugin.TSODataInterfacesFetchingData | URL, username and password for UI5: (TS) Generate interfaces for OData entities command. |
| ui5.plugin.massTSODataInterfacesFetchingData | Array of URL, username and password for UI5: (TS) Generate interfaces for OData entities command (Mass). |
| ui5.plugin.ERDiagramPath | Path for file generated by UI5: Generate ER diagram from metadata.xml command. Relative to project folder. Example: ../diagram/ERDiagram.pu |
| ui5.plugin.JSTypeDefDocPath | Path for file generated by UI5: Generate JS typedef JSDoc from metadata command. Relative to project folder. Example: ./model/ModelTypedef.js |
| ui5.plugin.globalConfigurationPath | Absolute path to global any_file.json configuration file, which is used by UI5 Parser and UI5 Linter. Priority of ui5 config determination: local package.json -> global any_file.json -> default value. Example: C:\\Users\\MyUser\\Documents\\ui5config.json |
| ui5.plugin.idGenerationFormula | Formula for id generation. |
| ui5.plugin.eventHandlerGenerationFormula | Formula for event handler name generation. |
| ui5.plugin.generateIdsCommandData | Data for ui5plugin.generateIds command. Contains array of classes to be excluded from ID generation and a flag if IDs should be generated for Elements as well, or for Controls only |
| ui5.plugin.bulkExportToi18nCommandData | Data for ui5plugin.bulkExportToi18n command. Contains data about which proprties should be exported to i18n.only |
XML Completion Items for UI5 Controls.
Related preference entries:
ui5.plugin.addInheritedPropertiesAndAggregations
ui5.plugin.addTagAttributes
ui5.plugin.addTagAggregations
ui5.plugin.idGenerationFormula
_ui5.plugin.eventHandlerGenerationFormula
XML Completion Items for properties, aggregations, associations and events
Strings for import in sap.ui.define are provided.
IDs from the corresponding view of the controller are provided for view.byId or controller.byId method
Completion items which are generated dynamically depending on current variable type or method return value type. Trigger character - dot.
Schema for manifest.json properties is provided.
Definitions for custom methods are provided.
Hotkey: Ctrl + Left Click
Definitions for event handlers are provided.
Hotkey: Ctrl + Left Click
CodeLens for Internalization Texts (translations), overriden methods, event handlers and member references is provided
Related preference entries:
ui5.plugin.jsCodeLens
ui5.plugin.jsReferenceCodeLens
ui5.plugin.xmlCodeLens
ui5.plugin.propertiesCodeLens
See UI5 Linter for reference
See UI5 Linter for reference
See UI5 Linter for reference
Code Actions for UI5 modules import and inserting non-existent methods in .js/.ts files are provided.
Code Actions for creating event handlers in controllers from xml views/fragments are provided.
Code Action for renaming event handlers from xml views/fragments is provided.
Hotkey: Alt + Enter
Helpful for TS! Check out
ui5.plugin.tsEventTypepreference entry. Handy if UI5 Version1.115.1+ is used, because the preference entry can be changed to{tsEvent}, in such case the correct event will be added automatically. Example:ListBase$SelectionChangeEventwill be generated, ifCreate methodaction will be selected on non existant event handler in XML viewsap.m.List->selectionChangeevent
Related preference entries:
ui5.plugin.tsEventModule
ui5.plugin.tsEventType
Information on hover is provided.
XML Formatter is available.
Related preference entries: ui5.plugin.xmlFormatterTagEndingNewline
ui5.plugin.xmlFormatterSpaceAfterSelfTagEnd
Rename provider for js/ts is provided.
The provider renames all references to the class for JS projects, and all references for the views/fragments for both TS/JS projects.
Hotkey: F5
Related preference entries: ui5.plugin.moveDefineToFunctionParametersOnAutocomplete
Set your position to the string you want to export to i18n.properties file and execute command. Works both in XML and JS files.
Info! If there is no selection, whole string will be exported. If there is a selection, only the selected part of the string will be exported.
this.getBundle()method which returnsResourceBundleshould be defined in Controller/BaseController
Related preference entries:
ui5.plugin.askUserToConfirmI18nId
ui5.plugin.addI18nTextLengthLimitation
ui5.plugin.textTransformationStrategy
Hotkey: F4
Open view or fragment and execute command. Works for XML files only.
Important! There is no info provided by SAP regarding which property should be exportable to i18n, that is why it is not possible to fully automate this process. This command exports only properties, which are configured to be exported. If there are some properties which are not exported, but should be, it is possible to adjust
ui5.plugin.bulkExportToi18nCommandDataVSCode preference entry. If you find yourself editing the preference entry, please open a ticket in github and share what was added, so it could be included into default value and work for everyone.
Related preference entries:
ui5.plugin.bulkExportToi18nCommandData
Goes to view from controller and to controller from view
If somebody uses MVC, the command actually switches between Model (Default model, which is set as this.getView().setModel(oModel) in the controller) View and Controller
For TS projects it is possible to add
@ui5modelJSDoc to the class, which should have a class name of the model to which the command will switch to. It will improve the performance issue, because reading type of default model might take seconds. Example:
/**
* My Controller JSDoc
* @ui5model {com.test.mvc.master.model.MyMasterModel}
*/Hotkey: F3
Inserts the class name into current position
Hotkey: F6
Clears cache with SAPUI5 lib metadata
UML Class diagram generates for the project of the currently opened file.
Command name:
UI5: Generate UML Class diagram for 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.xmlfile, execute commandUI5: Generate ER diagram from metadata.xml- Execute command
UI5: Generate ER diagram from metadata.xmland enter url tometadata.xml
It is possible to select in preferences which type of diagram to generate: DrawIO or PlantUML.
However, DrawIO is not supported anymore.
Recommended VSCode extensions:
DrawIO: hediet.vscode-drawio-insiders-build
PlantUML: jebbs.plantuml
UML Diagram example:
ER Diagram example:
Related preference entries:
ui5.plugin.umlGenerationPath
There is a possibility to generate typedef JSDocs from metadata
There are two ways to generate typedefs:
- Open
metadata.xmlfile, execute commandUI5: JSDoc typedef generation from metadata - Execute command
UI5: JSDoc typedef generation from metadataand enter url tometadata.xml
Related preference entries:
ui5.plugin.JSTypeDefDocPath
There is a possibility to generate mapping TS interfaces from control id to control type
Related preference entries:
ui5.plugin.XMLFileInterfacePath
ui5.plugin.generateXMLFileInterfacesOnSave
There is a possibility to generate TS interfaces for OData entities
There are two ways to generate interfaces:
- Open
metadata.xmlfile, execute commandUI5: (TS) Generate interfaces for OData entities - Execute command
UI5: (TS) Generate interfaces for OData entitiesand enter url tometadata.xml
Related preference entries:
ui5.plugin.TSODataInterfacesPath
ui5.plugin.TSODataInterfacesFetchingData
Works the same as previous command, but can be used for multiple OData models at once. ui5.plugin.massTSODataInterfacesFetchingData preference entry should be configured for this command to work.
Related preference entries:
ui5.plugin.massTSODataInterfacesFetchingData
Command, which generates IDs for elements in views and fragments. To generate ids, open a view or fragment and execute command.
Related preference entries:
ui5.plugin.idGenerationFormula
ui5.plugin.generateIdsCommandData
Inserts initial text for .js, .ts and .xml files
Extends "sap/ui/core/mvc/Controller" if file name ends with .controller.js/.controller.ts and "sap/ui/base/ManagedObject" if file name ends with .js/.ts
Hint!
sap/ui/core/mvc/Controllercan be changed to e.g.com/my/app/BaseControllerusingui5.plugin.insertManagedObjectModulepreference entry
Related preference entries:
ui5.plugin.insertControllerModule
ui5.plugin.insertManagedObjectModule
>
Extension listens for .js/.ts file creation event (rename technically is file deletion and creation) and replaces all occurrences of class name to the new one
Custom UI5 Explorer view in VSCode panel is available
-
For JS/TS 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
Custom UI5 Project Data view in VSCode panel is available
It represents the data about the project, like UI5 Version, config path etc. It makes easier to troubleshoot the config related issues.
View is not updated automatically, in order to do that, refresh button on the top right corner should be pressed.
| 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 |
- File starts with sap.ui.define (JS)
- Your class body is in AnyUI5Class.extend("name", {here}); (JS)
- You have manifest.json with App 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
If HTTP_PROXY or HTTPS_PROXY environment variables are set, https://ui5.sap.com will be requested using the proxy.
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": trueStandard VSCode JS Formatter is not handling all formatting issues. hookyqr.beautify extension did, but it got deprecated. It's highly recommended to install some kind of formatter, e.g. Prettier, and use as JS formatter.
"[javascript]": {
"editor.defaultFormatter": "<YourFormatter>"
}For some reason ui5.sap.com sometimes might return damaged JSON when requesting standard library metadata. As a result, it is possible to get such error as:
To solve it, please run UI5: Clear cache command and reload VSCode.
- If any
.tsfiles are found andtsconfig.jsonis found, project is considered to be TS project src-genfolder is automatically excluded by extension if it's TS project. If build folder has different name, it should be added to folder exclusions in UI5 Parser configuration.- Folder with builded resources should be added to exclusions of
ui5parser. CheckexcludeFolderPatternsin package.json. - Not all linters work for TS, because TS has a lot out of the box features. E.g. Wrong field/method linter works only for JS, because TS has it's own syntax analysis for that.
ts-morphis used as TS parser and it has some drawbacks. When using typechecker to get type e.g. of the field or return type of the method,ts-morphmight hang up for about ~10s, which is not great. However, types are crucial for Reference CodeLens/Linters, specifically for fields in order to be able to distinguish them in views/fragments. As a workaround for performance issues, typechecker is not used to get field types. Because of that only simple structure is allowed.
Examples which should work as expected:
export default class Random {
formatterInstance = new Formatter(),
formatterObject = Formatter
}At the same time type detection will work if the type is specifically written, e.g.
formatter: Formatter = ...- Disabling TS standard reference code lens should be considered. This extension contains its own reference code lens, which includes references to views and fragments.
- ESLint for additional linting
- Live Share for live code sharing with colleagues
- PlantUML for viewing diagrams generated by SAPUI5 Extension
- Prettier for pretty code
- TODO Highlight to not forget about your TODOs
- Template String Converter to be even more lazy
- Version Lens for updating your tooling
- YAML to get autocomplete for
ui5.yamland.ui5pluginrc.yamlwith this preference entry:
"yaml.schemas": {
"https://raw.githubusercontent.com/iljapostnovs/VSCodeUI5Plugin/master/schema/packageSchema.json": [
".ui5pluginrc.yaml",
".ui5pluginrc.yml"
]
}- XML to get simple syntax linting
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent