Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Format HTML, CSS and JavaScript/JSON
Emacs Lisp
branch: master

This branch is 11 commits behind yasuyk:master

Failed to load latest commit information.
image Initial commit
LICENSE Initial commit
README.md Initial commit
web-beautify.el Fix a docstring of web-beautify-js-buffer

README.md

Synopsis

Web-beautify is a formatting package of HTML, CSS and JavaScript/JSON for Emacs. It uses the command-line/node.js javascript formatter from http://jsbeautifier.org/ to format whole html, css, js or json files, or region.

Features

  • HTML, CSS, and JavaScript/JSON formatting
  • all settings are customizable (whitespace, formatting style, etc..) by .jsbeautifyrc configuration file.

Requirements

  • js-beautify installed by typing: npm -g install js-beautify

Installation

Manual

Just drop web-beautify.el. somewhere in your load-path.

(add-to-list 'load-path "~/somewhere")

MELPA

If you're an Emacs 24 user or you have a recent version of package.el you can install web-beautify.el from the MELPA repository.

Usage

Basic setup

Add the following to your emacs init file.

(require 'web-beautify) ;; Not necessary if using ELPA package
(eval-after-load 'js2-mode
  '(define-key js2-mode-map (kbd "C-c b") 'web-beautify-js))
(eval-after-load 'json-mode
  '(define-key json-mode-map (kbd "C-c b") 'web-beautify-js))
(eval-after-load 'sgml-mode
  '(define-key html-mode-map (kbd "C-c b") 'web-beautify-html))
(eval-after-load 'css-mode
  '(define-key css-mode-map (kbd "C-c b") 'web-beautify-css))

If you want to automatically format before saving a file, add the following hook to your emacs configuration:

(eval-after-load 'js2-mode
  '(add-hook 'js2-mode-hook
             (lambda ()
               (add-hook 'before-save-hook 'web-beautify-js-buffer t t))))

(eval-after-load 'json-mode
  '(add-hook 'json-mode-hook
             (lambda ()
               (add-hook 'before-save-hook 'web-beautify-js-buffer t t))))

(eval-after-load 'sgml-mode
  '(add-hook 'html-mode-hook
             (lambda ()
               (add-hook 'before-save-hook 'web-beautify-html-buffer t t))))

(eval-after-load 'css-mode
  '(add-hook 'css-mode-hook
             (lambda ()
               (add-hook 'before-save-hook 'web-beautify-css-buffer t t))))

js-beautify settings

The following js-beautify settings are available with .jsbeautifyrc. Check out the official jsbeautifier documentation for more details on the options:

  • indent_size: Indentation size [4]
  • indent_char: Indentation character [" "]
  • indent_level: Initial indentation level [0]
  • indent_with_tabs: Indent with tabs [false]
  • preserve_newlines: Preserve line-breaks [true]
  • max_preserve_newlines: Number of line-breaks to be preserved in one chunk [10]
  • space_in_paren: Add padding spaces within paren, ie. f( a, b ) [false]
  • jslint_happy: Enable jslint-stricter mode [false]
  • brace_style: [collapse|expand|end-expand] ["collapse"]
  • break_chained_methods: Break chained method calls across subsequent lines [false]
  • keep_array_indentation: Preserve array indentation [false]
  • unescape_strings: Decode printable characters encoded in xNN notation [false]
  • wrap_line_length: Wrap lines at next opportunity after N characters [0]
  • e4x: Pass E4X xml literals through untouched [false]
  • space_before_conditional: should the space before conditional statement be added [true]
  • keep_function_indentation: false
  • eval_code: false

.jsbeautifyrc files

Web-beautify supports .jsbeautifyrc JSON files.

A hierarchy of .jsbeautifyrc files is supported, where rc files at the deeper levels override the settings from rc files at higher levels. For example, given the file structure listed below, formatting /home/you/myProject/app.js would inherit settings from: default -> /home/you/myProject/.jsbeautifyrc, while formatting /home/you/myProject/tests/test.js would inherit settings from: default -> /home/you/myProject/.jsbeautifyrc -> /home/you/myProject/tests/.jsbeautifyrc

  • /home/you/myProject/.jsbeautifyrc
  • /home/you/myProject/app.js
  • /home/you/myProject/tests/.jsbeautifyrc
  • /home/you/myProject/tests/test.js

Commands

M-x web-beautify-js

Format region from if active, otherwise the current buffer. Formation is done according to the js-beautify command.

M-x web-beautify-css

Format region from if active, otherwise the current buffer. Formation is done according to the css-beautify command.

M-x web-beautify-html

Format region from if active, otherwise the current buffer. Formation is done according to the html-beautify command.

License

See LICENSE for details.

Something went wrong with that request. Please try again.