UI5 and Webstorm IDE. Get Set Go….
Hi Folks. Eclipse IDE may be a stable and powerful tool to develop UI5 applications. But there are many other powerful tools like Jetbrains Webstorm, aptana, komodo etc. Webstorm is a powerful IDE which understands web technologies and it provides easy to use user interface. It has a powerful prediction feature which accelerates web developments. Also comes in handy when working with nodeJS.
I had always been a big fan of webstorm IDE for web development. So I was looking for a way to make webstorm compatible with UI5. I found a blog “Configuring JetBrains WebStorm for UI5 development” by Robin van het hof. He has provided a sequence of steps to integrate UI5 with webstorm. It was very helpful for code completions. Now there is a plugin available for UI5 which can be used to create new ui5 project, ui5 templates and ui5 api search. This means, now you can directly install the plugin and kick start your UI5 development hassle free. Thanks to the author “Sebak” for providing this plugin.
So I thought of sharing this here. I will be providing steps to install this plugin in Webstorm. Also I will be using UI5SplitApp-Boilerplate by 6of5 which is readily available for download in github as initial skeleton. UI5 Boilerplate is a skeleton for building Apps based on OpenUI5. This will also save time in building the skeleton of UI5 mobile applications.
Pre Requisites:
1) Jetbrains Webstorm 9 IDE
2) UI5 Boilerplate
Steps:
1) Open webstorm IDE. File->Settings
2) Navigate to Plugins->Browse Repositories
3) Search for OpenUI5 and install the plugin.
4) Restart Webstorm for the changes to take effect.
Now that you have successfully added UI5 plugin to webstorm, We can import the boilerplate to Webstorm and kick start with UI5 mobile development.
Steps:
1) Files->Open->Navigate to the boilerplate extracted folder->Open.
Download Links:
BoilerPlate: https://github.com/6of5/UI5SplitApp-Boilerplate/archive/master.zip
After installing the plugin, you can find these features included in webstorm.
Hope this post was useful.
Regards,
Safiyu
Thanks safiyudeen for sharing 🙂 Do you mind me asking what exactly this plugin brings? code completion? I had it installed but didn't notice there's code completion.
Great to see community effort regarding 3rd party editors and plugins for UI5 development!
However...
safiyudeen Vattaparambil, could you elaborate a bit more on what this plugin is supposed to to or how we should use it? Or is this plugin still a work in progress?
Hi Tylr Wu and Robin
I have added few more screenshots. Like adding new ui5 projects, ui5 file templates and api search. I forgot to mention this doesnt help in code completion. Hope i had answered your questions.
Regards,
Safiyu
Ok, so unfortunately at this stage you still need to manually add the UI5 libraries as described in my blog..
Nevertheless, I really appreciate the plugin author's effort, and hopefully he can make it into a truly useful plugin of which the greater UI5 community can only benefit from!
Hi Robin,
Yes. We need to add it manually. Hopefully the author may come up with adding libraries in later releases.
Regards,
Safiyu
Hi there,
check this: Configuring JetBrains WebStorm for UI5 development
At least according to the screenshots code completion works.
Best,
Anton
Hi Anton,
In my experiece, this particular plugin does nothing more than create boilerplate files for you, and you could achieve the same with the out-of-the-box available File Templates.
If you follow the configuration in my blog you mentioned, yuo will indeed have intelligent SAPUI5 code completion in both Javascript files as well as XMLView files
Git Git Hurray: Web IDE, WebStorm and Git