Как переформатировать HTML-код с помощью Sublime Text 2?

У меня есть плохо оформленный HTML-код, который я бы хотел отформатировать. Есть ли команда, которая автоматически переформатирует HTML-код в Sublime Text 2, чтобы она выглядела лучше и ее легче читать?

ОТВЕТЫ

Ответ 1

Для этого вам не нужны плагины. Просто выберите все строки (Ctrl A), а затем в меню выберите Edit → Line → Создания отступа. Это будет работать, если ваш файл будет сохранен с расширением, содержащим HTML, например .html или .php.

Если вы часто это делаете, вы можете найти это картографическое отображение полезным:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

Если ваш файл не сохранен (например, вы просто вставили фрагмент в новое окно), вы можете вручную установить язык для отступов, выбрав меню View → Синтаксис → language of choice, прежде чем выбрать опцию reindent.

Ответ 2

Существует около полутора десятков способов форматирования HTML в Sublime. Я тестировал каждый из самых популярных плагинов (см. запись, которую я сделал в своем блоге для получения полной информации), но здесь приводится краткий обзор некоторых из самых популярных опций

Команда reindent

Плюсы:

  • Корабли с Sublime, поэтому не требуется установка плагинов

Минусы:

  • Не удаляет лишние пустые строки.
  • Невозможно обработать мини-HTML, строки с несколькими открытыми тегами
  • Не форматирует <script> блоки

Tag

Плюсы:

  • Поддержка ST2/ST3
  • Удаляет лишние пустые строки.
  • Нет двоичных зависимостей

Минусы:

  • Дроссели на тегах PHP
  • Не обрабатывает <script> блоки правильно

HTMLTidy

Плюсы:

  • Обрабатывает теги PHP
  • Некоторые настройки для настройки форматирования

Минусы:

  • Требуется PHP (возвращается к веб-сервису)
  • Только ST2
  • Заброшенный?

HTMLBeautify

Плюсы:

  • Поддержка ST2/ST3
  • Простые и не зависимые от бинара
  • Поддержка OS X, Win и Linux

Минусы:

  • Дросселирует со встроенными комментариями
  • Развертывает сведенный/сжатый код

HTML-CSS-JS Prettify

Плюсы:

  • Поддержка ST2/ST3
  • Обрабатывает HTML, CSS, JS
  • Отличная интеграция с возвышенными меню
  • Высоко настраиваемый
  • Настройки для проекта
  • Формат с сохранением

Минусы:

  • Требуется Node.js
  • Не подходит для встроенного PHP

Что лучше?

HTML-CSS-JS Prettify - победитель в моей книге. Множество отличных функций, не так много, чтобы жаловаться.

Ответ 3

Единственный пакет, который я смог найти, - Tag.

Вы можете установить его с помощью управления пакетами. https://sublime.wbond.net

После установки управления пакетами. Перейдите к управлению пакетами (Предпочтения → Управление пакетами), затем введите install, нажмите enter. Затем введите tag и нажмите enter.

После установки тега выделите текст и нажмите сочетание клавиш Ctrl + Alt + F.

Ответ 4

Я рекомендую этот плагин: HTML/CSS/JS Prettify, он действительно работает.

После установки просто выберите код и нажмите Ctrl+Shift+H.

Готово!

Ответ 5

Просто общий совет. Что я сделал, чтобы автоматизировать мой HTML-код, был установлен пакет HTML_Tidy, а затем добавлен следующий привязкой клавиш к настройкам по умолчанию (который я использую):

{ "keys": ["enter"], "command": "html_tidy" },

это запускает HTML Tidy с каждым входом. Там могут быть недостатки, я совершенно новичок в Sublime, но, похоже, делает то, что хочу:)

Ответ 6

Прежде всего, вопрос касается HTML, я также хотел бы дать информацию о том, как автоматически форматировать ваш Javascript-код для Sublime Text 2;

Вы можете выбрать весь свой код (ctrl + A) и использовать функции in-app, reindent (Edit → Line → Reindent), или вы можете использовать плагин форматирования JsFormat для Sublime Text 2, если вы хотите, чтобы у вас было больше настраиваемых параметров, как форматировать код для добавления к настройкам вкладки/отступов Sublime Text по умолчанию.

https://github.com/jdc0589/JsFormat

Вы можете легко установить JsFormat с помощью управления пакетами (Preferences → Package Control). Откройте управление пакетом, затем введите install, нажмите enter. Затем введите js format и нажмите enter, и все будет готово. (Контроллер пакета будет показывать состояние установки с успехом и ошибки в нижней левой панели Sublime)

Добавьте следующие строки в привязки клавиш (Preferences → Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Я использую ctrl + alt + 2, вы можете изменить эту комбинацию так, как хотите. Пока что JsFormat - хороший плагин, стоит попробовать!

Надеюсь, это поможет кому-то.

Ответ 8

Просто перейдите к

Изменить → Тег → Автотегировать теги в документе

Ответ 9

Для меня решение HTML Prettify было предельно простым. Я перешел на страницу HTML Prettify.

  • Требуется Sublime Package Manager
  • Следуйте инструкциям по установке диспетчера пакетов здесь
  • введите cmd + shift + p, чтобы открыть меню
  • Типированный prettify
  • Выберите HTML Prettify выбор в меню

Boom. Готово. Выглядит отлично

Ответ 10

Я создал пакет под названием HTMLBeautify, который выполняет достойную работу по переформатированию HTML. Я основал его на Perl script, который я нашел в 1997 году, - я обновил его, чтобы работать со всеми новыми модными современными тегами.:)

Проверьте это и сообщите мне, что вы думаете!

https://github.com/rareyman/HTMLBeautify

Ответ 11

Я еще не имею права комментировать, так что это просто дополнительная информация, связанная с @peter answer выше ответа.

Я обнаружил, что HTML не выравнивается, как ожидалось, если IE условные комментарии в заголовке не были полностью в строке, например. заподлицо влево:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ответ 12

Существует хороший открытый плагин CodeFormatter, который (вдоль reindenting) может украсить грязный код, даже если все это в одной строке.

Ответ 14

вы можете установить комбинацию клавиш F12 easy!!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

см. подробности здесь.

Ответ 15

Я использую tidy вместе с пользовательской системой сборки, чтобы преффицировать HTML.

У меня есть HTMLTidy.sublime-build в моем каталоге Packages/User/:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

и tidy_config.cfg в том же каталоге:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

И просто выберите систему сборки и нажмите ctrl + b или cmd + b, чтобы переформатировать содержимое файла. Одна из незначительных проблем заключается в том, что ST2 не перезагружает файл автоматически, чтобы просмотреть результаты, которые вы должны переключить на другой файл и обратно (или на другое приложение и обратно).

На Mac я использовал macports для установки в порядке, в Windows вам нужно было загрузить его самостоятельно и указать рабочий каталог в системе сборки, где расположен порядок:

"working_dir": "c:\\HTMLTidy\\"

или добавьте его в PATH.