README.md

About

This is a Sublime Text 2 and 3 plugin allowing you to format your HTML, CSS, JavaScript and JSON code. It uses a set of nice beautifier scripts made by Einar Lielmanis. The formatters are written in JavaScript, so you'll need something (node.js) to interpret JavaScript code outside the browser.

This will work with either HTML, CSS, JavaScript and JSON files.

Installation

First of all, be sure you have node.js installed in order to run the beautifier. After you've installed node.js, you will need to setup this plugin.
Each OS has a different Packages folder required by Sublime Text. Open it via Preferences -> Browse Packages, and copy this repository contents to the Sublime-HTMLPrettify folder there.

Manually

Make sure you use the right Sublime Text folder. For example, on OS X, packages for version 2 are in ~/Library/Application\ Support/Sublime\ Text\ 2, while version 3 is labeled ~/Library/Application\ Support/Sublime\ Text\ 3.

Usage

Right click in the current buffer and select HTML/CSS/JS Prettify -> Prettify Code.

-- or --

Open a HTML, CSS or JavaScript file, pop out the console in Sublime Text from View -> Show Console, and type view.run_command("htmlprettify").

Writing commands in the console is ugly. Set up your own key combo for this, by going to Preferences -> Key Bindings - User, and adding a command in that array: { "keys": ["super+shift+h"], "command": "htmlprettify" }. You can use any other command you want, thought most of them are already taken.

Oh noez, command not found!

If you get an error sh: node: command not found or similar, you don't have node in the right path. Try setting the absolute path to node in HTMLPrettify.sublime-settings.

Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X

type htmlprettify, select Set node Path

Simply using node without specifying a path sometimes doesn't work :(

For example, on Linux the path could be in /home/<user>/.nvm/<node version>/bin/node.

On Windows, the absolute path to node.exe must use forward slashes.

Be very careful on Debian!

Depending on your distribution and default package sources, apt-get install node (for example) will not install node.js, contrary to all human common sense and popular belief. You want nodejs instead. Best thing is to make it yourself from http://nodejs.org/#download.

Beautify on Save

To beautify your code when saving the document, set the format_on_save setting to true in HTMLPrettify.sublime-settings:

Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X

type htmlprettify, select Set Plugin Options

Preserving selection after formatting

To stop beautifying only the selected text, set the format_selection_only setting to false in HTMLPrettify.sublime-settings.

Using your own .jsbeautifyrc options

The plugin looks for a .jsbeautifyrc file in the same directory as the source file you're prettifying (or any directory above if it doesn't exist, or in your home folder if everything else fails) and uses those options along the default ones. Here's an example of how it can look like.

A few persistent options are always applied from a .jsbeautifyrc file located in the same directory as the plugin, if not overwritten by your own .jsbeautifyrc file. Those are defined here. You can safely add stuff to that json file if you want:

Ctrl+Shift+P or Cmd+Shift+P in Linux/Windows/OS X

type htmlprettify, select Set Prettify Preferences

Specifying your own file extensions

To add different file extensions use allowed_file_extensions in the .jsbeautifyrc file: