У меня есть плохо отформатированный HTML-код, который я хотел бы переформатировать. Есть ли команда, которая автоматически переформатирует 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. Я протестировал каждый из самых популярных плагинов ( подробные сведения см. В статье, которую я написал в своем блоге ), но вот краткий обзор некоторых из самых популярных вариантов:
Плюсы:
Минусы:
<script>
блокиПлюсы:
Минусы:
<script>
блоки правильноПлюсы:
Минусы:
Плюсы:
Минусы:
Плюсы:
Минусы:
HTML-CSS-JS Prettify является победителем в моей книге. Множество отличных функций, не на что жаловаться.
Единственная посылка, которую мне удалось найти, это Tag .
Вы можете установить его с помощью пакета управления. https://sublime.wbond.net
После установки пакета управления. Перейдите к управлению пакетами (« Настройки» -> « Управление пакетами» ), затем введите install
, нажмите enter. Затем введите tag
и нажмите enter.
После установки тега выделите текст и нажмите сочетание клавиш Ctrl+ Alt+ F.
Indent XML
или IndentX
среди других.
Я рекомендую этот плагин: 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, который работает довольно хорошо
Для меня HTML Prettify
решение было предельно простым. Я пошел на страницу HTML Prettify .
Sublime Package Manager
prettify
HTML prettify
выбор в менюBoom. Выполнено. Выглядит отлично
Просто зайдите в
Правка -> Тег -> Автоформатирование тегов в документе
Sublime Text 2 Version 2.0.1, Build 2217
на Mac. Вы уверены, что это стандартная функция?
<b>somthing</b>
за ним следует запятая, запятая помещается в новую строку, в результате чего в представлении браузера появляется пробел между чем-то и запятой.
Я создал пакет под названием HTMLBeautify, который делает достойную работу по переформатированию HTML. Я основал его на сценарии Perl, который нашел в 1997 году, и обновил его, чтобы он работал со всеми новыми сложными современными тегами. :)
Проверьте это и дайте мне знать, что вы думаете!
Я думаю, это то, что вы ищете:
У меня еще нет права комментировать, так что это просто дополнительная информация, связанная с ответом @ 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 } }
смотрите подробности здесь .