What is JS Beautify?

JS Beautify is a powerful command-line utility and online tool designed to format and prettify code written in JavaScript, JSON, CSS, and HTML. It helps developers improve the readability and maintainability of their code by automatically applying consistent indentation, spacing, and syntax rules. Whether you're dealing with minified code or code written by multiple developers with different styles, JS Beautify ensures a clean and uniform appearance.

How to Use JS Beautify

JS Beautify offers flexible usage options, allowing you to format code directly from your terminal or by piping content through it. Here are some common commands:

Beautifying Files

To beautify a JavaScript file and modify it in place, use the -r flag:

# Beautify a JavaScript file in place
js-beautify file.js -r

To beautify a file and save the formatted output to a new file:

# Beautify a JavaScript file and output to a new file
js-beautify file.js -o beautified-file.js

You can also beautify multiple files in a directory:

# Beautify all JavaScript files in a directory and replace them
js-beautify *.js -r

Beautifying JSON, CSS, and HTML

JS Beautify works seamlessly with other code formats:

# Beautify a JSON file in place
js-beautify file.json -r

Using Standard Input/Output

For quick formatting of code snippets or when working with pipes:

# Beautify HTML content from standard input and output to standard output
cat file.html | js-beautify

# Beautify CSS content from standard input and output to a new file
cat file.css | js-beautify -o beautified-file.css

Customizing Formatting

JS Beautify allows for customization of indentation and tab replacement:

# Beautify a file with specific indentation size of 4 spaces
js-beautify file.js -r --indent-size 4

# Convert tabs to spaces when beautifying a file
js-beautify file.js -r --replace-tabs

Benefits of Code Formatting

• Improved Readability: Well-formatted code is easier to read and understand, reducing cognitive load for developers.
• Easier Debugging: Consistent code structure helps in identifying errors and bugs more quickly.
• Enhanced Collaboration: Standardized code style across a team leads to smoother collaboration and fewer style-related merge conflicts.
• Reduced Errors: Proper indentation and spacing can prevent syntax errors that might arise from poorly structured code.

For more advanced options and configurations, refer to the official JS Beautify GitHub repository.