Monday, April 8, 2013

Run js-beautify, css-beautify and html-beautify from Notepad++

I discovered a way to integrate js-beautify with Notepad++. This way, you can beautify your HTML, CSS and JavaScript directly in Notepad++. There are other plugins for beautifying web code for Notepad++, but js-beautify is the best in my opinion. Since it has no plugin available for Notepad++, we'll have to kludge together our own solution.
  1. First, install the js-beautify program. Here I posted instructions how to install it on Windows.
  2. Download and install NppExec for Notepad++, get it here
  3. Install NppExec by putting the DLL file into Notepad++'s plugins folder. Then restart Notepad++ to finish the installation.
  4. In Notepad++, open the plugins menu, select NppExec, then select Execute.
  5. Add the following code:
    NPE_CONSOLE v+
    set NODE = $(SYS.PROGRAMFILES)\nodejs\node.exe
    set JSBEAUTIFY = $(SYS.APPDATA)\npm\node_modules\js-beautify\bin\html-beautify.js
    set INPUTFILE = $(SYS.TEMP)\npp_sel.txt
    SEL_SAVETO $(INPUTFILE) :a 
    $(NODE) "$(JSBEAUTIFY)" -t -f "$(INPUTFILE)"
    SEL_SETTEXT $(OUTPUT)
    NPE_CONSOLE v-
    
    Note that you may have to adjust your paths accordingly, but if you installed node.js with default settings, the paths should be fine. Also note that I use html-beautify, but you can also use js-beautify or css-beautify if you only want to beautify JavaScript or CSS. Html-beautify will beautify a HTML file containing CSS and JavaScript.
  6. After you pasted the code, save the script and click cancel.
  7. Select some text in your document (or press CTRL+A to select all text), press F6 to bring up NppExec's execute dialog, and press OK to run the script you just created. The selected text should now be replaced with the output of html-beautify.

No comments:

Post a Comment