SAPUI5 Extension

A fork of iljapostnovs/VSCodeUI5Plugin with changes to the XML formatter and removal of features which are also present in sap/ui5-language-assistant.

Before you start working with the plugin, it will be useful to set formatOnSave setting in VSCode preferences:

"editor.formatOnSave": true

The reason for it is described in Known limitations

---

Completion Items

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

---

Code Lens

Code Lens for Internalization Texts is provided

---

XML Diagnostics

XML Diagnostics is provided
There are two linters available:

• Attribute linter, which checks for property existence, value, prefix existence, event handler existence, class existence
  
• Unused namespace linter
  

Related preference entries: ui5.plugin.xmlDiagnostics

---

JS Diagnostics

You can define diagnostic exceptions using ui5.plugin.JSLinterExceptions preference entry.

JS Diagnostics is provided
There are five linters available:

• Wrong field/method usage linter
  
• Wrong custom class name linter
  
• Wrong import path linter
  
• Unused method linter
  
• Wrong parameter usage in the methods linter, which checks for parameter quantity and data type
  

  Use jsdoc to make your parameters optional, e.g.

   /**
    *@param {string} [sOptionalString] - optional string param
    *@param {string} sMandatoryString - mandatory string param
    */

Related preference entries:
ui5.plugin.jsDiagnostics
ui5.plugin.useWrongFieldMethodLinter
ui5.plugin.useWrongClassNameLinter
ui5.plugin.useWrongImportLinter
ui5.plugin.useWrongParametersLinter
ui5.plugin.JSLinterExceptions

---

Code Action Provider

Code Actions for UI5 modules import and inserting non-existent methods in .js files are provided.

Hotkey: Alt + Enter

---

XML Formatter

XML Formatter is available.

---

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

---

UML Class Diagram generation

UML Class diagram can be generated either for currently active document or for the whole project.
The generated diagram can be imported to draw.io

---

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

---

Settings

16 settings are available for extension configuration:

---

How it works

SAPUI5 Metadata

• Standard SAPUI5 Library Metadata is fetched from ui5.sap.com and saved locally
• Extension is working for 1.60+ UI5 library versions

If you are using different versions, you might meet an unexpected behavior if the structure of the standard lib metadata is different

Custom class metadata

Custom class metadata is dynamically generated using .js and view.xml files of the project.
There are several types of variable definitions:

• Class Fields
  

this.variable

Algorithm looks for all definitions in the functions of the object which is returned in

return AnyUI5Class.extend("name", {/*here*/})

• Function parameters
  

function(oEvent) {}

Only way to find out the data type of the function parameter is JSDoc. Use @param {UI5Class} UI5ClassParameter - description if you want completion items to work for function params.
The same goes for function return data type. Use @returns {UI5Class} UI5ClassVariable - description if you want completion items to work for function return.

• Local variables
  

function() {
    var oList = new List();
}

Assumptions

• File starts with sap.ui.define
• Your class body is in AnyUI5Class.extend("name", {here});
  
• You have manifest.json in source folder
• App ID (Component name) and i18n paths are defined in manifest.json
• File is without syntax errors
• Name of the class of the UI5Class is the same as file path. (E.g. "/src/control/Text.js" => "anycomponentname.control.Text")
• You have an access to 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