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

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

1258 голосов
/ 12 января 2012

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

Ответы [ 15 ]

2020 голосов
/ 05 июня 2012

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

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

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

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

364 голосов
/ 18 января 2014

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

Reindentкоманда

Плюсы:

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

Минусы:

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

Тег

Плюсы:

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

Минусы:

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

HTMLTidy

Плюсы:

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

Минусы:

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

HTMLBeautify

Плюсы:

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

Минусы:

  • Немного задушен с помощью встроенных комментариев
  • Расширяет свернутый / сжатый код

HTML-CSS-JS Prettify

Плюсы:

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

Минусы:

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

Что лучше?

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

175 голосов
/ 14 января 2012

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

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

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

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

47 голосов
/ 07 января 2015

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

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

Готово!

40 голосов
/ 01 ноября 2012

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

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

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

20 голосов
/ 24 июня 2013

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

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

https://github.com/jdc0589/JsFormat

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

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

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

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

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

13 голосов
/ 08 сентября 2012

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

https://github.com/welovewordpress/SublimeHtmlTidy

12 голосов
/ 27 июля 2014

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

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

Стрела.Готово.Отлично смотрится

10 голосов
/ 09 октября 2012

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

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

8 голосов
/ 21 января 2013

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

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

https://github.com/rareyman/HTMLBeautify

Страница:
...