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


1313

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



1
Также, если вы используете винтажный режим, вы можете просто использовать gg = G в обычном режиме.
Виктор Мочун

3
Вы можете тратить свое время на чтение всей этой страницы или просто получить github.com/akalongman/sublimetext-codeformatter и вернуться к работе.
shaneparsons

Ответы:


2080

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

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

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

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


19
Кстати, это работает и для исходного кода, отличного от HTML, например, Ruby или JS
peter

78
Это прекрасно работает, если в коде нет нескольких открывающих тегов на одной строке, которые также не закрываются на одной строке или наоборот.
Чарли Горичаназ

31
Отлично! На Mac вам нужен super для клавиши cmd, поэтому такой: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}}
Geert Weening

168
Переопределение строки абсолютно НЕ работает для переформатирования произвольного HTML. например, когда есть несколько HTML-тегов без разрывов строк. Ответ HtmlTidy от @anneke является превосходящим. Насколько я могу судить, независимо от разрывов строк, он полностью и правильно переформатирует исходный html в красиво выделенный источник.
jpw

33
Для новичков нажмите «Preferences», затем выберите «Key Binding - User», вставьте код Питера в квадратные скобки и сохраните файл.
sigmapi13

375

Существует около полудюжины способов форматирования 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 является победителем в моей книге. Множество отличных функций, не на что жаловаться.


12
2 округленный на Prettify. Повторный отступ не работал с html, который у меня был, не мог найти Tag, а HtmlTidy ничего не делал, когда я его вызывал.
Jcollum

2
только что попробовал, и HTML-CSS-JS Prettify работал в моем случае идеально (обрабатывал html гораздо лучше, чем встроенный пакет переопределения или другие пакеты переформатирования)
Марк Эссель

2
Перепробовал все остальные, но единственным, который работал (для фрагмента HTML), был HTML-CSS-JS Prettify. Спасибо!
zumek

1
Также хотелось бы отметить, что вы можете удалить все отступы (например, после того, как разметка была отредактирована), просто используя встроенную функциональность ST - выберите блок и нажмите ctrl + j.
zumek

1
Работает ли это с расширениями не HTML? я пробовал на php и других шаблонах, это не сработало.
Bsienn

179

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

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

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

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


21
лучший плагин - Tidy HTML
MatthewFord

1
спасибо ... только что знал про пакеты: D. Здесь тоже можно было увидеть интересные вещи для возвышенного текста. arlando.net/blog/...
марс-орто

3
Честно говоря, это единственная вещь, которая отлично работала с некоторым HTML-кодом, который имел сотни случайных разрывов строк, тегов, которые были неправильно вложены. Это в основном убрало одну из самых грязных HTML-страниц, которые я когда-либо видел!
Джастинхартман

1
Я не согласен с @ mars-o; этот плагин отличный Tidy действительно хорошо справляется с некоторыми задачами, и он хорошо зарекомендовал себя, но этот плагин делает довольно много других интересных вещей. Спасибо за пост.
zedd45

@JonnyLeeds Это вроде как, но не всегда правильно. Для XML, в частности, попробуйте Indent XMLили IndentXсреди других.
Джоэл Меллон

49

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

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

Выполнено!


3
Вам нужен Node.js для использования этого плагина. Не очень удобно для обычных пользователей.
Никоскип

4
Сравнивая с полезностью этого плагина, мы можем игнорировать проблему установки Node.js;)
Peter Zhu

Инструкции по установке packagecontrol.io/packages/HTML-CSS-JS%20Prettify отлично сработали. Спасибо.
Sacky San

41

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

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

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


2
Я предполагаю, что этот плагин может стать немного интенсивным для больших файлов, который может стать медленным, если он запускается каждый раз, когда вы нажимаете Enter?
Рикки

2
Я использовал связывание клавиш ENTER в течение дня, а затем удалил его. это было слишком медленно и продолжало перемещать курсор к верхней части экрана в v2.
Рави Рам

22

Хотя вопрос касается 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это хороший плагин, стоит попробовать!

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



13

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

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

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


Это решение работало именно так, как я хотел, и занимает все, кроме 2 секунд, если у вас уже установлен PM. Могу добавить, что вам нужно установить пакет prettify.
Google

Примечание: для всех, кто интересуется, плагин в этом ответе требует установки node.js.
Фальшивое имя

Не работает должным образом; только с отступом / переносом строки HTML-код до определенного уровня отступа, а остальное без отступа и в той же строке.
Джонатан

11

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

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


6
Я не вижу этого пункта меню Sublime Text 2 Version 2.0.1, Build 2217на Mac. Вы уверены, что это стандартная функция?
ostergaard

1
Вы должны установить тег из диспетчера пакетов. Но у меня есть одна проблема с этим. Когда <b>somthing</b>за ним следует запятая, запятая помещается в новую строку, в результате чего в представлении браузера появляется пробел между чем-то и запятой.
reitermarkus

9

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

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

https://github.com/rareyman/HTMLBeautify


3
Я установил его, но когда я запускаю HTMLBeautify в демонстрационном файле, он ничего не делает. Сообщение Показывает, что файл украшен, но ничего не происходит с содержимым файла.
Сэм

Я думаю, вы используете Windows ...? В Windows вам нужно перезапустить SublimeText 2, чтобы скрипт был доступен. Попробуйте и дайте мне знать, что происходит. :)
Росс

Я сделал, сценарий был доступен, он просто ничего не изменил в файле.
Сэм

Странный. Я предполагаю, что все другие плагины / пакеты работают как обычно? Я не могу воспроизвести эту проблему в моей тестовой среде, поэтому я не уверен, что вам сказать. :(
Росс

Помимо форматирования все работает так, как я ожидал - может быть, это потому, что я использую немецкую версию Windows?
Сэм

7

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

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


Я следовал инструкциям, но это не сработало. Плагин дает мне ошибки. «{» не распознается как внутренняя или внешняя команда, работающая программа или командный файл. »
Рави Рам

Я считаю, что конкретный пакет требует установки Node, что является дополнительным обязательством ... dandean.com/nodejs-npm-express-osx не обращайте внимания на NPM и экспресс
bgreater

@Allan Это работа для Windows. У меня установлен node.js на моем компьютере.
Анирудха Гупта

7

У меня еще нет права комментировать, так что это просто дополнительная информация, связанная с ответом @ 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]--> 

7

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


Примечание: это требует локальной установки PHP.
Фальшивое имя

Я обнаружил, что это единственный хороший плагин ... и я попробовал почти все из них.
shaneparsons

Похоже, у этого есть настройки для форматирования атрибутов HTML. Я не вижу, чтобы другие плагины делали это? Или я скучаю по одному?
Василий

4

Я использую 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\\"

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.