Git Product home page Git Product logo

web-beautify's Introduction

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))
;; 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 '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 '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.

web-beautify's People

Contributors

phtrivier avatar purcell avatar yasuyk avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.