Technical Articles
SAP Web IDE – js-beautify plugin
As the built-in beautifier in SAP Web IDE is too basic for me (especially for XML views), I decided to add support for js-beautify, a much more advanced code formatter.
js-beautify project: https://github.com/beautify-web/js-beautify
Online: https://beautifier.io
Supported file types are js, json, css, html and xml. When such file is opened, a new option is enabled in the Edit menu, bound to Shift + F1 combination.
There is an advanced set of options, which can be used by adding a .jsbeatuifyrc file in the project root folder. More about it can be found in the js-beautify documentation.
Installation
Add a new destination in the Cloud Platform Cockpit.
URL: https://sapwebidejsbeautify-p791767trial.dispatcher.hanatrial.ondemand.com
Go to Extensions in SAP Web IDE (refresh if already opened) – the extension should be available (wait some minutes if not and refresh).
Project on GitHub: https://github.com/wozjac/sap-web-ide-jsbeautify
Please take a look at my other plugin for Markdown files preview: https://blogs.sap.com/2019/02/04/sap-web-ide-markdown-.md-preview/. If you like/want to try UI5 development with Brackets editor, you can check my Brackets UI5 plugin: https://github.com/wozjac/brackets-ui5.
Hi Jacek,
Thanks for sharing! 🙂
[Edited] I had a problem with the connection check but it seems is already solvedÂ
Regards,
You're welcome!
Cool thing. Thanks for sharing with the community.
Also your other projects are a true enrichment ?
Thanks, glad to read such opinion!
Nice js-beautify plugin, sometime I use https://jsonformatter.org/jsbeautifier to beautify Javascript code.
Hi Jacek,
Thanks for sharing! ?
I have a question about how to use the advanced set of options. I want to change the format from format 1 to format 2, but it does not work.
I already added a .jsbeatuifyrc file under the project root and here is the configration. Could you help to check? Thanks.
{
"indent_size": 5,
"indent_char": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"brace_style": "expand,preserve-newlines"
}
Aidon
Hi idon Li, sorry for late reply.
Here’s a sample configuration file (.jsbeautifyrc) to play with.
The key property for your desired format is wrap_attributes.
You can play with various settings here: https://beautifier.io to find your style.
{ "html": { "eol": "\n", "end_with_newline": true, "preserve_newlines": true, "max_preserve_newlines": 10, "indent_inner_html": false, "brace_style": "collapse", "indent_scripts": "normal", "wrap_line_length": 0, "wrap_attributes": "force" } }Â
Cheers,
Jacek
Unfortunately, I receive a "404 Not Found" when I am checking the connection with your provided URL (https://sapwebidejsbeautify-p791767trial.dispatcher.hanatrial.ondemand.com).
Any suggestions on fixing this issue?
Thanks in advance
Dominic
Hi,
I’ve just tested the destination, it gives me both successful ping along with 404 result. I’m not aware of how this exactly work in SAP CP.
Anyway, I’ve removed the destination and plugin; then provided back the details for destination, added plugin – and it worked. After adding destination I had to wait approx. 10 minutes, then the extension showed up in SAP Web IDE.
Â
Best Regards,
Jacek
Â
Â