Skip to Content
Technical Articles
Author's profile photo Jacek Wozniczak

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:


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.


Add a new destination in the Cloud Platform Cockpit.

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:

Please take a look at my other plugin for Markdown files preview: If you like/want to try UI5 development with Brackets editor, you can check my Brackets UI5 plugin:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Jorge Cabanas
      Jorge Cabanas

      Hi Jacek,

      Thanks for sharing! 🙂

      [Edited] I had a problem with the connection check but it seems is already solved 


      Author's profile photo Jacek Wozniczak
      Jacek Wozniczak
      Blog Post Author

      You're welcome!


      Author's profile photo Margot Wollny
      Margot Wollny

      Cool thing. Thanks for sharing with the community.

      Also your other projects are a true enrichment ?

      Author's profile photo Jacek Wozniczak
      Jacek Wozniczak
      Blog Post Author

      Thanks, glad to read such opinion!


      Author's profile photo Shanker Prajapati
      Shanker Prajapati

      Nice js-beautify plugin, sometime I use to beautify Javascript code.

      Author's profile photo Aidon Li
      Aidon Li

      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"



      Author's profile photo Jacek Wozniczak
      Jacek Wozniczak
      Blog Post Author

      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: 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"




      Author's profile photo Dominic Gantz
      Dominic Gantz

      Unfortunately, I receive a "404 Not Found" when I am checking the connection with your provided URL (

      Any suggestions on fixing this issue?


      Thanks in advance


      Author's profile photo Jacek Wozniczak
      Jacek Wozniczak
      Blog Post Author


      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,