Why use WebStorm? Some background
Today, Eclipse has grown to quite a robust and widely used Java IDE, however it lacks severely in the Web / Javascript department. For web development -- not only SAPUI5 / OpenUI5, but in my opinion any webdevelopment -- I strongly feel we should look further than Eclipse.
The same is true for text editors like Sublime Text and Atom, which -- although they have plugins that allow for rudimentary syntax highlighting and code checking -- don't have the context knowledge of the Javascript code you are writing, let alone check for syntax errors, unused variables/functions, type checking, and function signature mismatches, to name just a few.
JetBrains WebStorm actually does all that: it is aware of your code, it does a good job at inspecting and analyzing your code, and has terrific support for other HTML5/CSS related stuff (for instance, it does refactoring across multiple file types such as *.js and *.css). And if you add JsDoc comments to your code, you even benefit from proper type checking! You really have to try it to believe it.
And once you complete the steps described in this blog, you will benefit from excellent UI5 coding support as well!
An small example showcasing WebStorms' awesomeness when developing UI5 code can be seen in the image below (click image to enlarge):
WebStorm isn't Open Source like Eclipse, but a personal license costs a mere 44 EUR and as such is worth it every penny.
Unfortunately, it currently has no support yet from SAP or the Open Source community for UI5, but according to some of the topics on SCN and Stackoverflow regarding UI5 development with WebStorm, it seems quite in demand. This blog tries to fill the gap and help you set up WebStorm for use with UI5 development.
Prerequisites
In order to use XML validation and code completion when using XML Views, we need the XML definition for the UI5 libraries. For reasons unknown, these definitions aren’t included in the OpenUI5 download, but they are included in the UI5 plugin for Eclipse. So we need to have Eclipse installed with the UI5 plugin.
And of course, you need to have WebStorm installed :wink:
Step 1 : Include UI5 libraries
After you have installed WebStorm, we need to make it OpenUI5-aware. First, we include the UI5 libraries. Since I mainly use the sap.ui.core and sap.m libraries, I will use these now as well. If you need other libraries, you can include these in the same way.
Step 2 - Add XML definitions
Now, we need to add the XML definitions for use with XML Views.
Step 3 - Test our new configuration
Now it's time to see if what we have configured is actually working and useful.
Additional step: Create UI5 file templates
Now, if you use the Eclipse with the UI5 plugin, the initial content for the controller and view files are generated, but in WebStorm we have to write it ourselves. Luckily, WebStorm provides a mechanism called 'File and Code templates'. In here, I have defined placeholder templates for UI5 index.html file, and controller / view files. Using 'File Template Variables' I have used predefined variables ( ‘${NAME}’ for getting the filename without extension) as well as custom defined variables (‘${UI5_Namespace}’ in which I specify the namespace for the current file):
If you have defined such templates yourself, you can now right-click a project web folder and you’ll see the file templates listed in the context menu:
If I now choose my custom ‘UI5 Controller’, after you specify the File name and UI5 Namespace:
...the new file is created using the specified properties:
Summary
This is just the basics of making WebStorm UI5 aware, and I’m all ears for any other methods or additional configuration to make UI5 development as easy and streamlined as possible!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
5 | |
5 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 |