Introduction to js-beautify

js-beautify is a powerful tool designed to beautify JavaScript, HTML, and CSS code. It helps developers make their code readable and consistent with a uniform style, which is essential for maintaining high-quality code in web development projects. In this guide, we’ll explore the various APIs provided by js-beautify, complete with useful code snippets.

Getting Started with js-beautify

Before diving into the API details, let’s see how you can install js-beautify. You can install it using npm or yarn:

  npm install js-beautify -g
  yarn global add js-beautify

API Examples

Below are some useful APIs provided by js-beautify, along with code snippets and explanations:

HTML Beautifier

The html_beautify function beautifies your HTML code:

  const beautify = require('js-beautify').html;
  const options = { indent_size: 2, space_in_empty_paren: true };
  const beautifiedHtml = beautify('<div><p>Hello World</p></div>', options);
  console.log(beautifiedHtml);

JavaScript Beautifier

The js_beautify function beautifies your JavaScript code:

  const beautify = require('js-beautify').js;
  const options = { indent_size: 2, space_in_empty_paren: true };
  const beautifiedJs = beautify('function hello(){console.log("Hello World");}', options);
  console.log(beautifiedJs);

CSS Beautifier

The css_beautify function beautifies your CSS code:

  const beautify = require('js-beautify').css;
  const options = { indent_size: 2 };
  const beautifiedCss = beautify('body { display: none; }', options);
  console.log(beautifiedCss);

Customizing Beautification Options

You can customize the behavior of js-beautify by providing specific options. Here are a few more examples:

Keep Array Indentation

  const beautify = require('js-beautify').js;
  const options = { keep_array_indentation: true };
  const code = 'const array = [1, 2, 3];';
  const beautifiedJs = beautify(code, options);
  console.log(beautifiedJs);

Unescape HTML Characters

  const beautify = require('js-beautify').html;
  const options = { unescape_strings: true };
  const code = '<div>content</div>';
  const beautifiedHtml = beautify(code, options);
  console.log(beautifiedHtml);

App Example

Let’s create a simple Node.js application that reads an HTML file, beautifies it, and writes the beautified output to a new file:

  const fs = require('fs');
  const beautify = require('js-beautify').html;

  fs.readFile('index.html', 'utf8', (err, data) => {
    if (err) throw err;
    const options = { indent_size: 2, space_in_empty_paren: true };
    const beautifiedHtml = beautify(data, options);
    fs.writeFile('index.beautified.html', beautifiedHtml, (err) => {
      if (err) throw err;
      console.log('File has been beautified!');
    });
  });

In this example, we read an HTML file, beautify its content, and save it to a new file with formatting improvements.

By leveraging the power of js-beautify, you can maintain cleaner and more readable code, which enhances the overall quality of your web development projects.

Hash: 5bdf0f7bef9476e003952e5bace7c0bf18511c1d4080408299842c1bf05b67d7