Nutty Coder

This is for those who are using a IDE without js format feature by default like Editplus.

First, I want to share you a javascript beautifier: http://jsbeautifier.org/, where you can paste your js code and then beautify with some customizable options.

Also the format function is provided by various languages / library on the website. We can integrate the js format function with IDE easily. Here are steps (take Editplus as an example):

1. save the attached file and rename to .js
(1.5. view the js code in the file and customize it by your self)

2. Editplus -> Tools -> Configure User Tools

3. Tools -> User tools -> select a group -> Add Tool

4. The command is “WScript.exe” + the path of beautify.js. In my example it’s WScript.ext “E:\Software\EditPlus\js_beautify.js”, Argument is “$(CurSel)”, which means current selected text. Don’t forget check “Run as text filter”. Click OK.

5. try it: select a code block, click “Ctrl + 1″ (maybe different from groups), it’s done!

Tip: checking in a formatted code may make a huge diff. So please be careful on this at some time of the project like CCRB.

It’s almost the same to setup JSLint for your editplus, just look at the configure screen:

The difference is you need check Capture output instead of “Run as text filter”, also you need setup a Ouput Pattern (for JSLint result display), the pattern I’m using is ^.+ >>>in \[(.+)\] \[line\: ([0-9]+)\,character\: ([0-9]+)\], you can also change it as you prefer.
After invoke this on a js file, JSLint results will display in the editplus console. Double click on the record will take you to the row.

More: you can actually create more extensions for you IDE and svn with javascript. This will obviously save your time and help ensure the code quality.

One Response to “Javascript Beautifier & JSLint Integration with Editplus”