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

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

1193
html indentation reformat sublimetext sublimetext2

15 ответов

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

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

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

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

1948

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

команда Reindent

плюсы:

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

плюсы:

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

Tag

плюсы:

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

плюсы:

  • подавляется PHP-тегами
  • не работает <script> блоки правильно

HTMLTidy

плюсы:

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

плюсы:

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

HTMLBeautify

плюсы:

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

плюсы:

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

HTML-CSS-JS Prettify

плюсы:

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

плюсы:

  • Требуются Узел.js
  • не отлично подходит для встроенного PHP

что лучше?

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

353

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

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

после установки контрольный пакет. Перейдите в управление пакетами (предпочтения ->Контрольный Пакет) то типа install, нажмите enter. Затем введите tag и нажмите enter.

после установки тега, выделите текст и нажмите shortcut Ctrl+Alt+F.

175

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

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

готово!

46

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

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

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

39

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

вы можете выбрать все код(ctrl + A) и использовать функциональность в приложении, reindent (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 хороший плагин, стоит попробовать!

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

19

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

https://github.com/welovewordpress/SublimeHtmlTidy

12

для меня HTML Prettify решение было чрезвычайно простым. Я пошел в HTML Prettify страница.

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

бум. Сделанный. Выглядит отлично

10

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

Edit - > Tag - > автоформатирование тегов в документе

9

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

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

https://github.com/rareyman/HTMLBeautify

8

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

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

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

6

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

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

5

вы можете установить сочетания клавиш F12 легко!!!

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

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

4

Я использую порядок вместе с пользовательской системой сборки для улучшения HTML.

У меня есть HTMLTidy.sublime-сборка в моих пакетах / User / directory:

{
  "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

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

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

"working_dir": "c:\HTMLTidy\"

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

3