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

configuration.mddocs/

Configuration Options

Comprehensive configuration system for JS Beautify with base options shared across all beautifiers and language-specific extensions. Supports EditorConfig integration, hierarchical option inheritance, and multiple configuration sources.

Capabilities

Base Options Interface

Core configuration options shared by all beautifiers (JavaScript, CSS, HTML).

/**
 * Base configuration options shared by all beautifiers
 * @typedef {Object} BaseOptions
 * @property {boolean} [disabled=false] - Disable beautification entirely - returns source unchanged
 * @property {string} [eol='auto'] - Character(s) to use as line terminators (auto-detect or '\n')
 * @property {boolean} [end_with_newline=false] - End output with newline
 * @property {number} [indent_size=4] - Indentation size in spaces
 * @property {string} [indent_char=' '] - Character used for indentation
 * @property {number} [indent_level=0] - Initial indentation level
 * @property {boolean} [preserve_newlines=true] - Preserve existing line-breaks
 * @property {number} [max_preserve_newlines=32786] - Maximum number of line-breaks to preserve in one chunk
 * @property {boolean} [indent_with_tabs=false] - Use tabs for indentation, overrides indent_size and indent_char
 * @property {number} [wrap_line_length=0] - Wrap lines that exceed N characters (0 disables)
 * @property {boolean} [indent_empty_lines=false] - Keep indentation on empty lines
 * @property {string[]} [templating=['auto']] - List of templating languages to support: 'auto', 'none', 'angular', 'django', 'erb', 'handlebars', 'php', 'smarty'
 */

Default Options Function

Returns default configuration for any beautifier.

/**
 * Get default options for a beautifier
 * @returns {Object} BaseOptions with default values
 */
function defaultOptions();

Usage Example:

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

// Get default options for JavaScript
const jsDefaults = beautify.js.defaultOptions();

// Get default options for CSS  
const cssDefaults = beautify.css.defaultOptions();

// Get default options for HTML
const htmlDefaults = beautify.html.defaultOptions();

// All return objects with BaseOptions plus language-specific options
console.log(jsDefaults.indent_size); // 4
console.log(jsDefaults.preserve_newlines); // true

Configuration Sources

Direct Options Object

Pass options directly to beautifier functions:

const beautified = beautify.js(code, {
  indent_size: 2,
  brace_style: 'expand',
  preserve_newlines: false
});

Environment Variables (JavaScript Only)

Any environment variable prefixed with jsbeautify_ is used as configuration:

export jsbeautify_indent_size=2
export jsbeautify_brace_style=expand
node my-script.js

Configuration Files (JavaScript Only)

JSON-formatted configuration can be loaded from:

Command Line Config

js-beautify --config /path/to/config.json file.js

.jsbeautifyrc Files

Automatically loaded from current directory or parent directories:

{
  "indent_size": 2,
  "brace_style": "expand",
  "html": {
    "indent_size": 4,
    "wrap_attributes": "force"
  }
}

EditorConfig Support

When editorconfig: true is set, reads formatting settings from .editorconfig files:

# .editorconfig
[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

[*.html]  
indent_size = 4

Usage:

const beautified = beautify.js(code, { 
  editorconfig: true 
});

Hierarchical Configuration

Language-Specific Overrides

Base options can be overridden for specific languages:

{
  "indent_size": 4,
  "preserve_newlines": true,
  "js": {
    "indent_size": 2,
    "brace_style": "expand"
  },
  "css": {
    "indent_size": 2,
    "newline_between_rules": false
  },
  "html": {
    "indent_size": 4, 
    "wrap_attributes": "force",
    "js": {
      "indent_size": 2
    },
    "css": {
      "indent_size": 2
    }
  }
}

Inheritance Behavior:

  • JavaScript files inherit indent_size: 2 and brace_style: 'expand'
  • CSS files inherit indent_size: 2 and newline_between_rules: false
  • HTML files use indent_size: 4 and wrap_attributes: 'force'
  • JavaScript inside HTML uses indent_size: 2
  • CSS inside HTML uses indent_size: 2

Configuration Priority

Configuration sources are applied in order of precedence (highest to lowest):

  1. Direct options object passed to function
  2. Environment variables (jsbeautify_*)
  3. Command line --config file
  4. .jsbeautifyrc file in current/parent directories
  5. Default options

Common Configuration Patterns

Tab Indentation

const options = {
  indent_with_tabs: true,
  indent_size: 4  // Tab width for display
};

Strict Line Length

const options = {
  wrap_line_length: 80,
  preserve_newlines: false,
  max_preserve_newlines: 1
};

Minimal Formatting

const options = {
  preserve_newlines: false,
  max_preserve_newlines: 0,
  indent_empty_lines: false,
  end_with_newline: false
};

Development vs Production

// Development - preserve developer formatting
const devOptions = {
  preserve_newlines: true,
  max_preserve_newlines: 10,
  indent_empty_lines: true
};

// Production - compact formatting  
const prodOptions = {
  preserve_newlines: false,
  max_preserve_newlines: 1,
  wrap_line_length: 120,
  end_with_newline: false
};

Option Validation and Normalization

Option Name Normalization

Dashes in option names are automatically converted to underscores:

// These are equivalent:
{ 'indent-size': 2, 'brace-style': 'expand' }
{ 'indent_size': 2, 'brace_style': 'expand' }

Type Coercion

Options are automatically coerced to appropriate types:

// String numbers become integers
{ indent_size: '2' } // becomes { indent_size: 2 }

// String booleans become booleans  
{ preserve_newlines: 'false' } // becomes { preserve_newlines: false }

Invalid Option Handling

Invalid options throw descriptive errors:

// This will throw an error
beautify.js(code, { 
  brace_style: 'invalid-style' 
});
// Error: Invalid Option Value: The option 'brace_style' can only be one of the following values:
// collapse,expand,end-expand,none,preserve-inline
// You passed in: 'invalid-style'

Template Language Configuration

Auto Detection

{
  templating: ['auto']  // Default for HTML, detects all supported templates
}

Specific Languages

{
  templating: ['handlebars', 'django']  // Only these templates
}

Disable Templates

{
  templating: ['none']  // No template processing
}

Supported Templates:

  • angular - Angular template syntax {{ }}
  • django - Django template syntax {% %}, {{ }}
  • erb - ERB template syntax <% %>, <%= %>
  • handlebars - Handlebars syntax {{ }}, {{# }}
  • php - PHP syntax <?php ?>, <? ?>
  • smarty - Smarty syntax {$var}, {if}

docs

cli.md

configuration.md

css.md

html.md

index.md

javascript.md

tile.json