Я создаю инструменты для жизни, и единственное самое распространенное, что я делаю перед чтением кого-либо's фронтэнд запускает свой HTML через форматировщик. шаблоны серверов выплевывают разметку на одну строку. Бандлеры свертывают его. приходит фрагмент, который кто-то вставляет в Slack, с тремя уровнями вложенности, сплющенными в стену угловых скобок. Я не могу отладить то, что не могу прочитать, поэтому первый ход всегда один и тот же: вставить его, нажать на украшение и позволить структуре раскрыть себя. Это руководство - это то, которое я хотел бы передать самому молодому себе, который раньше повторно отсылал разметку вручную и половину времени ошибался.
TL;DR: Форматер HTML повторно отступает разметку, чтобы вы могли прочитать его структуру, и минифицирует его обратно вниз, чтобы он поставлялся малым. используйте beautify, пока вы строите и отлаживаете, minify для производства.The Форматтер HTML на Toolz.dev делает и то, и другое в вашем браузере, сохраняет ваш сценарий, стиль и предварительный байт контента и никогда ничего не загружает.
Что такое HTML-форматер?
Форматировщик HTML - это инструмент, который анализирует вашу разметку в дереве тегов и печатает ее обратно с последовательным отступом, по одному уровню на глубину вложения. Это направление beautify. реверс, minify, лишает незначительное пробелы между тегами, чтобы файл был как можно меньше, не меняя, как браузер его отображает. Большинство хороших форматировщиков, включая тот, что на Toolz.dev, делают и то, и другое с одного и того же входа.
Слово & quot;незначительный& quot; делает реальную работу в этом предложении.В HTML некоторые пробелы имеют значение, а некоторые нет. новая строка и два пространства, которые вы ставите между закрытием </li> и следующий <li> ничего не меняйте в отображаемой странице, поэтому форматировщик может добавлять, удалять или нормализовать их. Но пробелы внутри a <pre> блок, или единое пространство между двумя рядными <a> элементы, являются частью того, что видит пользователь Форматировщик, который не понимает, что разница с радостью сломает ваш макет Это грань между форматировщиком, который помогает, и тем, которому вы учитесь не доверять.
Если вы использовали Красивее в вашем редакторе вы уже знаете ощущение: вы перестаете заботиться об отступе, потому что инструмент гарантирует это. Форматировщик на основе браузера дает вам такую же гарантию для разовых фрагментов, сгенерированного вывода и разметки, которую вы не контролируете, без настройки проекта.
Почему HTML вообще оказывается беспорядочным?
Это помогает узнать, откуда взялся беспорядок, поскольку говорит вам, что нужно для выживания форматировщику.
Первый источник - рендеринг сервера. шаблон PHP, представление Rails или файл Blade излучает HTML с любым пробелом, который, по ощущениям, создавал механизм шаблонов, и после запуска промежуточного программного обеспечения для минификации это часто одна строка длиной в тысячи символов. когда что-то выглядит не так в браузере и вы нажмете & quot;Просмотреть исходный код, & quot; вот что вы получаете.
Второй источник - копирование и вставка. вы хватаете компонент из системы проектирования, фрагмент из CMS или шаблон электронной почты, который кто-то вам отправил, и он несет в себе любой интервал между используемым источником: смешанные вкладки и пробелы, непоследовательное вложение, конечные пробелы. Я провожу много своей недели внутри WordPress и безголовый вывод CMS, и CMS-генерируемая разметка является одной из худших, потому что она собрана из фрагментов, каждый из которых был отформатирован по-разному.
Третий источник - это сгенерированная разметка. инструменты сборки, редакторы WYSIWYG и функции экспорта создают HTML, который никогда не предназначался для чтения человеком. Это правильно, но непрозрачно. Форматировщик превращает его обратно в то, что вы можете проверить.
Общая нить заключается в том, что ни один из этих источников не заботится о том, можете ли вы прочитать результат. Это ваша работа, и форматировщик - самый быстрый способ сделать это.
Как мне отформатировать HTML онлайн?
Рабочий процесс на Toolz.dev занимает около десяти секунд:
- откройте Форматтер HTML и вставить свою разметку в панель ввода Неважно, минифицирована ли она на одну строку, вдавлена непоследовательно или оголенный фрагмент.
- Выберите Beautify, чтобы расширить его, или Minify, чтобы сжать его.
- Для украшения выберите отступ: 2 пробела, 4 пробела или вкладки. Два пробела - это обычное веб-отрешение по умолчанию.
- Опционально отметьте & quot;Удалить комментарии& quot; чтобы удалить HTML-комментарии из вывода.
- Скопируйте результат или загрузите его как
.htmlпилка
Все работает на стороне клиента. синтаксический анализатор JavaScript в вашем браузере, поэтому разметка никогда не касается сервера. это имеет большее значение, чем предполагают люди, к чему я вернусь.
В чем разница между украшением и миниатюрой?
Это противоположные операции, которые используют общий синтаксический анализатор, и знание того, когда дотянуться до каждой из них, является большей частью навыка.
Украшение для людей. он добавляет разрывы строк и углубления, чтобы было видно гнездо, что и нужно при редактировании, отладке, распространении двух версий или просмотре запроса на вытягивание. Когда я охочусь за ошибкой макета, я сначала украшаю, чтобы увидеть, какой элемент незакрыт или вложен на один уровень слишком глубоко.
Минификация для машин. она удаляет пробелы, которые браузер игнорирует, поэтому файл меньше и быстрее для передачи. вы минифицируете HTML по той же причине, по которой вы минифицируете CSS или JavaScript: байты в течение времени стоимости провода, а на большой странице пробелы суммируются. если вы уже опираетесь на HTML-минификатор для сжатия производства форматировщик - это инструмент, который вы используете для повторного чтения этого вывода, когда что-то ломается.
Вот как эти два направления сравниваются с решениями, которые на самом деле различаются:
| Аспект | окрашивать | минимизировать |
|---|---|---|
| мишень | читабельность | Наименьший файл |
| Пробел между тегами | Добавлено и нормализовано | не имеющий |
| Размер вывода | Больший | Меньше |
| Когда использовать | Редактирование, отладка, обзор | Производство, передача |
| Отступ | 2 пробела, 4 пробела или вкладки | ни один |
| Отображенный результат | идентичный | идентичный |
Последняя строка является важной Ни одна из операций не меняет, как выглядит страница Только пробелы браузер относится как незначительные изменения, Если форматировщик когда-либо изменяет ваш визуализированный вывод, то это ошибка в форматировщике, а не свойство форматирования.
Нарушит ли форматирование мой JavaScript, CSS или предварительно отформатированный текст?
Это вопрос, который отделяет игрушку от инструмента, и именно поэтому я придирчива к тому, какой форматировщик я использую.
Определенные элементы содержат контент, в котором пробелы и символы значимы и к ним нельзя прикасаться. The Стандарт HTML WHATWG классифицирует script а style в качестве необработанных текстовых элементов и textarea а title как удаляемые необработанные текстовые элементы. Внутри них форматировщик должен рассматривать контент как непрозрачный. Если он попытается повторно отступить JavaScript в a script тег, он может сдвинуть содержимое шаблона литерал, изменить регулярное выражение или переместить строку внутрь многострочной строки, и теперь ваш код ведет себя по-другому Это не изменение форматирования, это ошибка, которую ввел форматировщик.
выше pre элемент - это связанный случай. все его цель - сохранить пробелы, поэтому его текстовое содержимое отображается точно так же, как написано. Форматировщик, который повторно отступает внутрь <pre> заметно меняет страницу.
Форматировщик Toolz.dev обрабатывает все это путем обработки script, style, pre, textarea, и title в качестве необработанного контента: он повторно отступает HTML вокруг них, но копирует их внутренний текст дословно. Ваш код и предварительно отформатированный текст выходят побайтно идентичными. когда я тестировал это при его создании, панель принятия была простой: a <script> содержащий if(a<b){x=1} должен выжить нетронутым, и это так. если вы работаете с разметкой, которая содержит встроенные сценарии или стили, это свойство, которое необходимо проверить, прежде чем доверять любому форматировщику.
Может ли форматировщик обрабатывать сломанный или неполный HTML?
Настоящий HTML редко хорошо формируется, как XML, и форматировщик, требующий совершенства, бесполезен. Браузеры, как известно, толерантны: the Алгоритм анализа HTML определяет, как именно обращаться с опущенными конечными тегами и ошибочно вложенными элементами, поэтому страница отсутствует </li> все еще делает хорошо Хороший форматировщик заимствует тот же допуск.
Самый распространенный случай - необязательные конечные теги. HTML позволяет опустить закрывающий тег на таких элементах, как li, p, td, tr, и option, потому что спецификация говорит об открытии li неявно закрыт, когда следующий li начинается. Так <ul><li>a<li>b</ul> является действительным, и форматировщик Toolz.dev применяет эти правила подразумеваемого закрытия для производства <li>a</li> а <li>b</li> по своим линиям, точно так же, как браузер построил бы дерево. А <p> закрывается автоматически, когда внутри него открывается элемент блока, поскольку абзац не может содержать содержимое блока.
Второй случай действительно разбитая разметка: тег открыт и никогда не закрывается, или случайный закрывающий тег без совпадающих открытых. форматировщик закрывает все, что осталось висеть в конце документа, и сообщает об этом как предупреждение, так что вы знаете, что ввод был неполным, а не молчаливым. Эти предупреждения часто являются самым быстрым способом найти точную ошибку, которую вы пришли исправить.
Сравните такое поведение со строгим форматировщиком и с тем, чтобы делать это вручную:
| подход | Опущенные конечные теги | Незакрытые теги | торопить |
|---|---|---|---|
| Толерантный форматировщик (Toolz.dev) | Применяет правила подразумеваемого закрытия | Автозакрывается и предупреждает | мгновение |
| Строгий форматировщик в стиле XML | Часто ошибки | Ошибки нарушаются | Мгновенно, когда это работает |
| Ручной реиндентирование | Вы сами отслеживаете | Легко пропустить | Медленный и подверженный ошибкам |
Раньше я был в этом нижнем ряду, отступал от руки и пропускал незакрытый div три раза из десяти. терпимый инструмент выигрывает, потому что настоящая наценка беспорядочна, и вы хотите, чтобы беспорядок всплыл, а не был отвергнут.
Когда мне следует использовать форматировщик по сравнению с моим редактором?
Если у вас есть файл, и он находится в вашем проекте, ваш редактор плюс Prettier или его эквивалент - это подходящий дом для форматирования, потому что он работает при сохранении и остается последовательным во всей команде. Я не предлагаю вам заменять это.
Браузерный форматировщик зарабатывает свое место в пробелах, которые оставляет рабочий процесс Вы вставляете фрагмент из отчета об ошибке и должны прочитать его прямо сейчас Вы находитесь на машине, которая не является вашим dev box Вы смотрите на CMS вывод, шаблон электронной почты, или сгенерированная разметка, которая никогда не жила в репо Вы хотите минифицировать один фрагмент без подключения этапа сборки. во всех этих случаях открытие вкладки происходит быстрее, чем настройка проекта, и результат тот же.
Есть также угол конфиденциальности, что не мелочь Потому что анализатор Toolz.dev работает полностью в вашем браузере, разметка, которая содержит внутренние URL, неизданная копия, ответы API, встроенные в шаблон, или данные клиента 's никогда не покидают ваше устройство. много онлайн-форматоров POST ваш ввод на сервер для выполнения работы. для чего-либо из рабочей кодовой базы, то есть экспозиция данных, которую вам не нужно принимать. Я забочусь об этом настолько, что это правило дизайна для каждого инструмента на сайте, о котором я написал больше в Набор инструментов для веб-разработчиков и руководство к Конфиденциальность данных в онлайн-инстру, йо-
Практический рабочий процесс, который сэкономил мне часы
Вот цикл, который я на самом деле запускаю, когда макет плохо себя ведет. украсьте разметку, чтобы вложение было видно. отсканируйте отступ для уровня, который выглядит неправильно, потому что случайный дополнительный отступ почти всегда означает тег, который никогда не закрывался. читайте предупреждения форматировщика, которые часто называют точный незакрытый элемент. Исправьте его в источнике. если фрагмент предназначен для производства, сократите его на обратном пути. весь цикл - это минута, и большую часть этой минуты я читаю, а не борюсь с инструментом.
Тот же цикл работает для аудита контента. когда я проверяю разметку на доступность или SEO, я сначала украшаю, чтобы я мог увидеть структуру заголовка и элементы ориентира с первого взгляда, затем я извлекаю определенные части в другие инструменты: преобразование фрагмента в Markdown для документации с помощью HTML-маркет преобразователь, или формирование таблицы сравнения с Генератор таблиц Markdown. Форматирование - это шаг, который делает структуру достаточно разборчивой для работы. Если вы хотите, чтобы эти инструменты вписывались в более широкую процедуру, Инструменты повышения производительности разработчик гид излагает.
Часто задаваемые вопросы
Как мне отформатировать HTML онлайн?
Вставьте свой HTML в панель ввода, выберите Beautify, выберите ширину отступов и нажмите Format. инструмент анализирует дерево тегов и повторно отступает к нему, а затем позволяет скопировать или загрузить результат. Вся обработка происходит в вашем браузере, поэтому ничего не загружается.
В чем разница между украшением и минитированием HTML?
Украшение добавляет разрывы строк и отступы, поэтому вложение легко читается, что идеально подходит для редактирования и отладки. минификация удаляет незначительное пробелы между тегами, чтобы создать меньший файл для производства. Оба сохраняют один и тот же результат рендеринга; изменяется только пробелы.
Изменит ли форматирование внешний вид моей страницы?
Нет. Форматировщик изменяет пробелы только между тегами, а не между элементами, атрибутами или текстом. Содержимое, в котором пробелы значимы, например, пре, текстовая область и встроенный текст, сохраняется, поэтому страница отображает его до и после форматирования.
Переформатирует ли форматировщик мой JavaScript и CSS?
Нет. Содержимое внутри тегов скриптов и стилей рассматривается как необработанный текст и копируется дословно. инструмент повторно отступает HTML вокруг них, но никогда не касается самого кода, поэтому литералы шаблонов, регулярные выражения и значения CSS остаются байт-для-байта идентичными.
Может ли он обрабатывать сломанный или неполный HTML?
Да, в пределах разумного. парсер терпим: он применяет те же правила подразумеваемого закрытия, которые браузеры используют для таких тегов, как li, p и td, и он автоматически закрывает теги, оставленные открытыми в конце документа. когда это происходит, он показывает предупреждение, чтобы вы знали, что разметка была неполной.
Безопасно ли форматировать HTML, содержащий конфиденциальные данные?
Да. синтаксический анализатор полностью работает на JavaScript в вашем браузере. ни один сетевой запрос не несет вашу разметку, ничего не хранится, и инструмент работает в автономном режиме после загрузки. HTML, содержащий внутренние ссылки, ответы API или неизданную копию, никогда не покидает вашу машину.
Какие варианты отступов доступны?
Вывод Beautify поддерживает 2 пробела, 4 пробела или вкладки. Два пробела - это обычное значение по умолчанию для веб-проектов, четыре пробела подходят командам, которые предпочитают более широкие отступы, а вкладки позволяют каждому разработчику устанавливать свою собственную ширину дисплея в редакторе.
Чем HTML-форматор отличается от HTML-минификатора?
Форматировщик имеет оба направления в одном инструменте: украсить, чтобы расширить разметку для чтения, и минифицировать, чтобы свернуть ее для доставки. выделенный минификатор только сжимает. если вам в основном необходимо сжатие производства, HTML минификатор фокусируется на этом; если вы переключаетесь между чтением и доставкой, форматировщик охватывает оба.
Отформатируйте свою разметку с помощью бесплатного Форматтер HTML. Он полностью работает в вашем браузере, сохраняет ваши сценарии и предварительно отформатированный контент нетронутыми и никогда не загружает байт.
