Skip to Content
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.

9 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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