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

Assigned Tags

      9 Comments
      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 

      Regards,

      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 https://jsonformatter.org/jsbeautifier 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"
      }

       

      Aidon

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

      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 (https://sapwebidejsbeautify-p791767trial.dispatcher.hanatrial.ondemand.com).

      Any suggestions on fixing this issue?

       

      Thanks in advance

      Dominic

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

      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

       

      Â