Friday, February 1, 2013

Beautifying JavaScript/HTML Code

Beautifying JavaScript/HTML Code

It is important that developers format their code in an effective manner irrespective of the language they use. The confusing part of source code formatting is some will use space and some will use tabs in an inconsistent manner in source code for manual formatting. A Front-End developer always works with minified resources and needs some special tools to make the minified source readable either for troubleshooting or for familiarizing with the source.

JS Beautifier (https://github.com/einars/js-beautify) is a great tool for anyone who wants to format their JavaScript/HTML source code in an efficient and quick manner. There is a web hosted solution of this tool at http://jsbeautifier.org/
Instead of using the web hosted solution you can download this tool and host it in your own web server and use it for beautifying your JavaScript/HTML code
The installation procedure is pretty simple. Download the files from the above mentioned github repository (a zip file), unzip it and place it in your local web server's web root folder. There is an index.html file in the newly placed folder and access it from your local webserver over any browser. Now you should be able to see something similar to the following in your browser.


You can put your JavaScript/HTML code in the textbox and click on the Beautify button placed on top of the textbox.
There are some options available in the page that you can use based on your requirements. The options are self explanatory and does not need any descriptions about them.
This tool comes with a Python library that can perform source code formatting from command line. This will be possible only if your PC has Python installed in it. 

No comments:

Post a Comment