Як переформатувати HTML-код за допомогою Sublime Text 2?

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

Для цього вам не потрібні плагіни. Просто виберіть усі рядки ( Ctrl A), а потім у меню виберіть Правка → Рядок → Reindent. Це спрацює, якщо ваш файл буде збережено з розширенням, яке містить HTML як .htmlабо .php.

Якщо ви робите це часто, вам може бути корисне таке ключове відображення:

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

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

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

Команда Reindent

Плюси:

• Поставляється з Sublime, тому не потрібно встановлювати плагін

Мінуси:

• Не видаляє зайві порожні рядки
• Не вдається обробити мінімізований HTML, рядки з кількома відкритими тегами
• <script>Блоки не форматуються належним чином

Тег

Плюси:

• Підтримує ST2 / ST3
• Видаляє зайві порожні рядки
• Ніяких бінарних залежностей

Мінуси:

• Заглушує теги PHP
• Не працює з <script>блоками правильно

HTMLTidy

Плюси:

• Обробляє теги PHP
• Деякі налаштування для налаштування форматування

Мінуси:

• Потрібна PHP (повертається до веб-сервісу)
• Тільки ST2
• Занедбаний?

HTMLBeautify

Плюси:

• Підтримує ST2 / ST3
• Прості і не залежні від бінара
• Підтримка OS X, Win та Linux

Мінуси:

• Трохи задихається з вбудованими коментарями
• Чи розширюється мінімізований / стислий код

HTML-CSS-JS Досить

Плюси:

• Підтримує ST2 / ST3
• Обробляє HTML, CSS, JS
• Відмінна інтеграція з меню Sublime
• Високо налаштовується
• Налаштування проекту
• Формат при збереженні

Мінуси:

• Потрібен Node.js
• Не чудово підходить для вбудованого PHP

Що найкраще?

HTML-CSS-JS Prettify - переможець у моїй книзі. Багато чудових функцій, не надто скаржитися.

Єдиний пакет, який мені вдалося знайти, - це тег .

Ви можете встановити його за допомогою керування пакетом. https://sublime.wbond.net

Після встановлення управління пакетом. Перейдіть до управління пакетом ( Налаштування -> Контроль пакунків ), а потім наберіть install, натисніть enter. Потім наберіть tagі натисніть enter.

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

Я рекомендую цей плагін: 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) і використовувати функцію в додатку, reindent ( Edit-> Line-> Reindent) або ви можете використовувати плагін форматування JsFormat, Sublime Text 2якщо ви хочете мати більше налаштованих налаштувань щодо того, як відформатувати ваш код у додаток до налаштування вкладки / відступ тексту за замовчуванням "Текст піднесеного".

https://github.com/jdc0589/JsFormat

Ви можете легко встановити JsFormat за допомогою Package Control ( Preferences-> Package Control) Відкрити керування пакетом, а потім введіть інсталяцію, натиснітьenter . Потім наберіть js formatі натисніть enter, ви закінчили. (Контролер пакета буде показувати стан установки з успіхом та помилками в нижній лівій смузі Sublime)

Додайте наступний рядок до основних прив'язок ( Preferences-> Key Bindings User)

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

Я використовую ctrl+ alt+ 2, ви можете змінити цю клавішу швидкого доступу, що завгодно. Так далеко,JsFormat це гарний плагін, варто його спробувати!

Сподіваюся, що це комусь допоможе.

Є плагін під назвою SublimeHtmlTidy, який працює досить добре

https://github.com/welovewordpress/SublimeHtmlTidy

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

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

Бум. Зроблено. Виглядає здорово

Просто перейдіть до

Редагувати -> Тег -> Теги для автоматичного форматування документа

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

Перевірте це і дайте мені знати, що ви думаєте!

https://github.com/rareyman/HTMLBeautify

Я думаю, що це те, що ви шукаєте:

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

Я ще мати привілей коментар , так що це просто додаткова інформація , пов'язана з @ петровський відповідь вище відповіді.

Я виявив, що 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 , який (разом з повторним нагадуванням ) може прикрасити брудний код, навіть він знаходиться в одному рядку.

Я використовую акуратно разом із спеціальною системою збирання, щоб вподобати HTML.

Я маю HTMLTidy.sublime-build у своєму пакеті / користувачеві / каталозі:

{
  "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 для встановлення охайного, у Windows вам доведеться завантажити його самостійно та вказати робочий каталог у системі збирання, де розташований охайний:

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

або додати його в ПАТ.

Ви можете встановити клавішу швидкого доступу F12легко!

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

детальну інформацію дивіться тут .