web-beautify

by yasuyk

Format HTML, CSS and JavaScript/JSON by js-beautify

206 Stars 18 Forks Last release: Not found GNU General Public License v3.0 33 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

web-beautify licence travis badge melpa badge melpa stable badge

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))
;; Or if you're using 'js-mode' (a.k.a 'javascript-mode')
(eval-after-load 'js
  '(define-key js-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 'web-mode '(define-key web-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))))

;; Or if you're using 'js-mode' (a.k.a 'javascript-mode') (eval-after-load 'js '(add-hook 'js-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 'web-mode '(add-hook 'web-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:

JavaScript

Thease are JavaScript Beautifier 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

CSS

Thease are CSS Beautifier Options:

  • indent_size
    : Indentation size [4]
  • indent_char
    : Indentation character [" "]

HTML

Thease are HTML Beautifier Options:

  • indent_inner_html
    : Indent and sections. [false]
  • indent_size
    : Indentation size [4]
  • indent_char
    : Indentation character [" "]
  • brace_style
    : [collapse|expand|end-expand] ["collapse"]
  • indent_scripts
    : [keep|separate|normal] ["normal"]
  • wrap_line_length
    : Maximum characters per line (0 disables) [250]
  • preserve_newlines
    : Preserve line-breaks [true]
  • max_preserve_newlines
    : Number of line-breaks to be preserved in one chunk [10]
  • unformatted
    : List of tags (defaults to inline) that should not be reformatted

.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 if active, otherwise the current buffer. Formatting is done according to the

js-beautify
command.

M-x
web-beautify-css

Format region if active, otherwise the current buffer. Formatting is done according to the

css-beautify
command.

M-x
web-beautify-html

Format region if active, otherwise the current buffer. Formatting is done according to the

html-beautify
command.

License

See LICENSE for details.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.