CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-js-beautify

A comprehensive code beautification library for JavaScript, CSS, and HTML with extensive formatting options and cross-platform support

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

JS Beautify

JS Beautify is a comprehensive code beautification library that reformat and re-indent JavaScript, CSS, and HTML code. It provides extensive formatting options, supports multiple environments (Node.js, browsers, CLI), and offers both programmatic APIs and command-line interfaces for consistent code formatting across development workflows.

Package Information

  • Package Name: js-beautify
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install js-beautify

Core Imports

// Default import - beautifies JavaScript by default
const beautify = require('js-beautify');

// Named imports for specific beautifiers
const { js, css, html } = require('js-beautify');
const { js_beautify, css_beautify, html_beautify } = require('js-beautify'); // Legacy names

ESM:

import beautify from 'js-beautify';
// Access via beautify.js(), beautify.css(), beautify.html()

Basic Usage

const beautify = require('js-beautify');

// Beautify JavaScript (default)
const uglifiedJS = 'function test(){var a=1;var b=2;return a+b;}';
const beautifiedJS = beautify(uglifiedJS, { indent_size: 2 });

// Beautify CSS  
const uglifiedCSS = 'body{margin:0;padding:0;}div{color:red;}';
const beautifiedCSS = beautify.css(uglifiedCSS, { indent_size: 4 });

// Beautify HTML
const uglifiedHTML = '<div><p>Hello</p><span>World</span></div>';
const beautifiedHTML = beautify.html(uglifiedHTML, { 
  indent_size: 2, 
  wrap_line_length: 80 
});

Architecture

JS Beautify is built around several key components:

  • Unified API: Single entry point with language-specific methods (js, css, html)
  • Beautifier Engines: Separate parsing and formatting engines for each language
  • Options System: Hierarchical configuration with language-specific overrides
  • CLI Integration: Command-line tools for each beautifier with file processing capabilities
  • Cross-Platform: Works in Node.js, browsers, and provides Python bindings

Capabilities

JavaScript Beautification

Core JavaScript code formatting with support for various syntactic constructs, brace styles, and ES6+ features. Includes support for deobfuscation and unpacking of minified code.

/**
 * Beautify JavaScript source code
 * @param {string} js_source_text - JavaScript code to beautify
 * @param {Object} options - Formatting options (optional)
 * @returns {string} Beautified JavaScript code
 */
function js_beautify(js_source_text, options);

/**
 * Get default options for JavaScript beautifier
 * @returns {Object} Default options object
 */
js_beautify.defaultOptions();

JavaScript Beautification

CSS Beautification

CSS code formatting with support for selectors, rules, and various CSS syntaxes. Handles formatting of nested structures and preserves important whitespace.

/**
 * Beautify CSS source code
 * @param {string} source_text - CSS code to beautify  
 * @param {Object} options - Formatting options (optional)
 * @returns {string} Beautified CSS code
 */
function css_beautify(source_text, options);

/**
 * Get default options for CSS beautifier
 * @returns {Object} Default options object
 */
css_beautify.defaultOptions();

CSS Beautification

HTML Beautification

HTML code formatting with support for various HTML elements, attributes, and embedded JavaScript/CSS. Includes template language support and configurable element handling.

/**
 * Beautify HTML source code with optional JS/CSS beautification
 * @param {string} html_source - HTML code to beautify
 * @param {Object} options - Formatting options (optional)
 * @param {Function} js_beautify - Custom JavaScript beautifier function (optional)
 * @param {Function} css_beautify - Custom CSS beautifier function (optional)
 * @returns {string} Beautified HTML code
 */
function html_beautify(html_source, options, js_beautify, css_beautify);

/**
 * Get default options for HTML beautifier
 * @returns {Object} Default options object
 */
html_beautify.defaultOptions();

HTML Beautification

Configuration Options

Comprehensive configuration system with base options shared across all beautifiers and language-specific extensions. Supports EditorConfig integration and hierarchical option inheritance.

/**
 * Get default options for any beautifier
 * @returns {Object} Default configuration object with base options
 */
function defaultOptions();

Configuration

Command Line Interface

Command-line tools for each beautifier supporting file processing, glob patterns, and configuration files. Includes support for stdin/stdout processing and batch operations.

# JavaScript beautification
js-beautify [options] <file1> [file2] ...

# CSS beautification  
css-beautify [options] <file1> [file2] ...

# HTML beautification
html-beautify [options] <file1> [file2] ...

Command Line Interface

Types

/**
 * Main beautify function (JavaScript by default)
 * @param {string} src - Source code to beautify
 * @param {Object} config - Formatting options (optional)
 * @returns {string} Beautified code
 */
function beautify(src, config);

// Available beautifier methods
beautify.js = js_beautify;           // Short alias for JavaScript
beautify.css = css_beautify;         // Short alias for CSS
beautify.html = html_beautify;       // Short alias for HTML
beautify.js_beautify = js_beautify;  // Legacy alias
beautify.css_beautify = css_beautify; // Legacy alias
beautify.html_beautify = html_beautify; // Legacy alias

docs

cli.md

configuration.md

css.md

html.md

index.md

javascript.md

tile.json