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

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

780   15  

15 ответов:

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

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

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

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

1948  
2014-10-21 21:56:58

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

Reindent command

плюсы:

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

плюсы:

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

Tag

плюсы:

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

плюсы:

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

HTMLTidy

плюсы:

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

плюсы:

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

HTMLBeautify

плюсы:

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

плюсы:

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

HTML-CSS-JS Prettify

плюсы:

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

плюсы:

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

что лучше?

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

353  
2015-08-18 15:21:39

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

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

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

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

175  
2017-11-15 00:16:54

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

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

готово!

46  
2016-05-24 16:35:29

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

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

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

39  
2012-11-01 17:17:52

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

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

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

19  
2017-03-03 17:50:08

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

https://github.com/welovewordpress/SublimeHtmlTidy

12  
2012-09-08 14:00:20

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

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

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

10  
2015-06-02 11:38:03

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

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

9  
2012-10-09 03:23:20

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

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

https://github.com/rareyman/HTMLBeautify

8  
2013-01-21 20:46:39

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

Я обнаружил, что 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  
2017-05-23 15:02:48

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

6  
2014-04-23 10:34:39

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

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

5  
2012-01-14 14:59:30

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

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

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

4  
2017-03-03 18:20:26

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

У меня есть HTMLTidy.sublime-build in my Packages / 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

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

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

"working_dir": "c:\HTMLTidy\"

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

3  
2012-02-19 00:55:04

Comments

    Ничего не найдено.
Click here to cancel reply.