Как переформатировать HTML-код, используя Sublime Text 2?

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

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

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

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

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

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

Повторить команду

Плюсы:

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

Минусы:

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

Тег

Плюсы:

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

Минусы:

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

HTMLTidy

Плюсы:

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

Минусы:

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

HTMLBeautify

Плюсы:

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

Минусы:

• Задыхается немного с встроенными комментариями
• Расширяет ли свернутый / сжатый код

HTML-CSS-JS Prettify

Плюсы:

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

Минусы:

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

Какой лучше?

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

Единственная посылка, которую мне удалось найти, это Tag .

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

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

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

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

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

Выполнено!

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

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

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

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

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

https://github.com/jdc0589/JsFormat

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

Добавьте следующую строку в ваши сочетания клавиш ( Preferences-> Key Bindings User)

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

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

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

Есть плагин под названием SublimeHtmlTidy, который работает довольно хорошо

https://github.com/welovewordpress/SublimeHtmlTidy

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

1. Необходимо Sublime Package Manager
2. Следуйте инструкции по установке менеджера пакетов здесь
3. набрал, cmd + shift + pчтобы вызвать меню
4. набранный prettify
5. Выберите HTML prettifyвыбор в меню

Boom. Выполнено. Выглядит отлично

Просто зайдите в

Правка -> Тег -> Автоформатирование тегов в документе

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

Проверьте это и дайте мне знать, что вы думаете!

https://github.com/rareyman/HTMLBeautify

Я думаю, это то, что вы ищете:

https://github.com/victorporof/Sublime-HTMLPrettify

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

Я обнаружил, что 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]--> 

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

Я использую 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 для установки tidy, в Windows вам нужно будет загрузить его самостоятельно и указать рабочий каталог в системе сборки, где находится tidy:

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

или добавить его в ПУТЬ.

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

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

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