Форматирования HTML, CSS, JS с помощью Js-beautify. Документация на русском с примерами

В этой документации мы расскажем вам, как использовать библиотеку js-beautify для форматирования HTML кода.

js-beautify - это библиотека на JavaScript, которая позволяет автоматически форматировать код HTML, CSS и JavaScript. Это полезно для улучшения читабельности кода и упрощения его дальнейшей поддержки.

Установка

js-beautify можно установить с помощью npm (Node Package Manager):

npm install js-beautify

Использование

Пример использования js-beautify для форматирования HTML кода:

const beautify = require('js-beautify').html;
const uglyHtml = '<html><head><title>Test</title></head><body><h1>Hello World</h1></body></html>';
const beautifiedHtml = beautify(uglyHtml);
console.log(beautifiedHtml);

В этом примере мы используем метод html из библиотеки js-beautify, чтобы отформатировать неформатированный HTML код, который мы передали в переменную uglyHtml. Отформатированный код сохраняется в переменной beautifiedHtml, которая затем выводится в консоль.

Конфигурация

js-beautify позволяет настраивать различные параметры форматирования, такие как отступы, размер отступа, использование кавычек, расположение тегов и т.д.

Пример настройки параметров:

const beautify = require('js-beautify').html;
const uglyHtml = '<html><head><title>Test</title></head><body><h1>Hello World</h1></body></html>';

const options = {
    indent_size: 4,
    indent_char: ' ',
    wrap_attributes: 'auto',
    wrap_attributes_indent_size: 4
};

const beautifiedHtml = beautify(uglyHtml, options);
console.log(beautifiedHtml);

В этом примере мы используем объект options для установки параметров форматирования. В данном случае мы устанавливаем размер отступа в 4 пробела, задаем использование пробелов в качестве символа отступа, автоматически переносим атрибуты на новую строку и устанавливаем размер отступа для перенесенных атрибутов в 4 пробела.

Другие параметры форматирования могут быть установлены с помощью объекта опций.

Опции библиотеки js-beautify

В этом списке представлены основные опции библиотеки js-beautify для форматирования HTML кода и их краткое пояснение.

indent_size: число пробелов, используемых для отступа. По умолчанию равно 4.
indent_char: символ, используемый для отступа. По умолчанию используется пробел.
indent_with_tabs: если установлено в true, отступ будет производиться с помощью символов табуляции, в противном случае используются пробелы. По умолчанию установлено в false.
eol: символ перевода строки. По умолчанию используется символ \n.
end_with_newline: если установлено в true, в конце файла будет добавлен символ перевода строки. По умолчанию установлено в false.
indent_inner_html: если установлено в true, содержимое элементов будет отформатировано со сдвигом относительно элемента-родителя. По умолчанию установлено в false.
preserve_newlines: если установлено в true, пустые строки между элементами будут сохранены. По умолчанию установлено в true.
max_preserve_newlines: максимальное количество сохраняемых пустых строк между элементами. По умолчанию установлено в 2.
indent_handlebars: если установлено в true, шаблоны Handlebars будут отформатированы. По умолчанию установлено в false.
wrap_line_length: максимальная длина строки перед переносом содержимого элемента на новую строку. По умолчанию установлено в 0, что означает отключение переноса строк.
wrap_attributes: режим переноса атрибутов на новую строку. Доступны следующие значения: auto (автоматический выбор), force (все атрибуты будут перенесены на новую строку), force-aligned (все атрибуты будут выровнены), force-expand-multiline (многострочные атрибуты будут перенесены на новую строку). По умолчанию установлено в auto.
wrap_attributes_indent_size: количество пробелов, используемых для отступа при переносе атрибутов на новую строку. По умолчанию равно значению параметра indent_size.
unformatted: список тегов, содержимое которых не будет отформатировано. По умолчанию содержит теги script, style, pre, textarea.
content_unformatted: список тегов, содержимое которых не будет от

Реалистичные примеры использования js-beautify

Вот несколько реалистичных примеров использования js-beautify для форматирования HTML кода:

Форматирование HTML-кода для вашего редактора

При разработке веб-страниц можно использовать js-beautify, чтобы форматировать неформатированный HTML код для улучшения читаемости и поддержки. Например, вот как вы можете использовать js-beautify в своей IDE (Integrated Development Environment) для автоматического форматирования кода при сохранении:

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

const options = {
  indent_size: 2,
  wrap_attributes: 'auto',
  end_with_newline: true,
};

fs.watch('./index.html', function (event, filename) {
  if (filename) {
    fs.readFile('./index.html', function (err, data) {
      if (err) {
        throw err;
      }
      const beautifiedHtml = beautify(data.toString(), options);
      fs.writeFile('./index.html', beautifiedHtml, function (err) {
        if (err) {
          throw err;
        }
        console.log('HTML файл отформатирован и сохранен.');
      });
    });
  }
});

В этом примере мы используем библиотеку fs из Node.js для отслеживания изменений файла index.html. Когда файл сохраняется, мы считываем его содержимое, форматируем его с помощью js-beautify и сохраняем отформатированный код в тот же файл.

Тестирование веб-страниц

js-beautify может использоваться для проверки того, что веб-страницы отображаются правильно в различных браузерах. Например, вот как вы можете использовать js-beautify и puppeteer для автоматического тестирования веб-страниц:

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

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const pageHtml = await page.content();
  const beautifiedHtml = beautify(pageHtml, { indent_size: 2 });
  console.log(beautifiedHtml);
  await browser.close();
})();

В этом примере мы используем puppeteer для загрузки веб-страницы https://example.com и получения ее HTML-кода. Затем мы используем js-beautify, чтобы отформатировать HTML-код, и выводим его в консоль. Это может быть полезно при отладке и тестировании веб-страниц.

Конвертация HTML кода

js-beautify может использоваться для конвертации неформатированного HTML кода в форматированный. Например, вот как вы можете использовать js-beautify для конвертации HTML кода из файла index-ugly.html в форматированный код и сохранения его в файл index-beautiful.html:

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

fs.readFile('./index-ugly.html', function (err, data) {
  if (err) {
    throw err;
  }
  const beautifiedHtml = beautify(data.toString(), { indent_size: 2 });
  fs.writeFile('./index-beautiful.html', beautifiedHtml, function (err) {
    if (err) {
      throw err;
    }
    console.log('HTML файл успешно отформатирован и сохранен.');
  });
});

В этом примере мы считываем содержимое файла index-ugly.html, отформатировываем его с помощью js-beautify, сохраняем отформатированный код в файл index-beautiful.html и выводим сообщение об успешном сохранении.

Все эти примеры демонстрируют различные способы использования js-beautify для форматирования HTML кода в реальных сценариях. Это может быть полезно при разработке веб-страниц, тестировании и отладке, а также конвертации HTML кода в удобочитаемый формат.

Комментарии (0)

Напишите первый комментарий