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

StackOverflow https://stackoverflow.com/questions/8839753

Вопрос

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

Озера

Плюсы:

  • Суда с возвышенным, поэтому установка плагинов не требуется

Минусы:

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

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

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

После установки управления пакетом. Перейти к управлению пакетами (Предпочтения -> Управление упаковкой) тогда тип install, хит войти. Анкет Затем тип tag и ударить войти.

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

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

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

Сделанный!

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

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

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

В целом вопрос для HTML, я также хотел бы дать информацию о том, как это Автоформат код JavaScript для возвышенного текста 2;

Вы можете выбрать весь свой код (Ctrl + А) и использовать функциональность в приложении, олень (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 + альт + 2, вы можете изменить этот ярлык, все, что вы хотите. Уже, JsFormat хороший плагин, стоит попробовать!

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

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

https://github.com/welovewordpress/sublimehtmltidy

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

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

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

Просто иди

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

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

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

https://github.com/rareyman/htmlbeautify

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

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

<!--[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, который (вдоль оленя) может украсить грязный код, даже все это в одной строке.

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

https://github.com/victorporof/sublime-htmlprettify

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

У меня есть htmltidy.sublime-build в моих пакетах/ пользователь/ каталог:

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


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

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

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

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

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

Вы можете установить ярлык F12 легкий!!!

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

см детали здесь.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top