Как настроить формат HTML Auto Indent на Sublime Text 3?
У меня вопрос, когда я пишу HTML-код в Sublime Text 3. Я просто хочу установить формат форматирования в формате HTML. Например, когда я пишу p-тэг вроде кода, отступ работает так.
<p>
Hello world!
</p>
Но я хочу писать как под кодом, а не выше.
<p>
Hello world!
</p>
И не только p tag также ul, ol и т.д.
Как я могу задать формат форматирования HTML в Sublime Text 3?
Ответы
Ответ 1
Один из вариантов - набрать [command] + [shift] + [p] (или эквивалент), а затем ввести "отступ". Верхний результат должен быть "Идентификация: строки повтора". Нажмите [enter], и он отформатирует документ.
Другой вариант - установить плагин Emmet (http://emmet.io/), который обеспечит не только лучшее форматирование, но и множество других невероятных функций. Чтобы получить результат, который вы ищете, используя Sublime Text 3 с плагином Emmet, требуется только следующее:
p [tab][enter] Hello world!
При вводе p [tab] Emmet расширяет его до:
<p></p>
Нажав [enter], затем расширяем его до:
<p>
</p>
С указателем курсора и на линии между тегами.
Это означает, что текст ввода приводит к:
<p>
Hello, world!
</p>
Ответ 2
Создать привязку клавиш
В автоматический отступ в Sublime text 3 с привязкой клавиш попробуйте перейти
Настройки > Ключевые привязки - пользователи
И добавив этот код между квадратными скобками
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
он устанавливает shift + alt + f как ваш полный отступ.
Источник здесь
Примечание:, если это не работает правильно, вы должны преобразовать свой отступ в вкладки. Также комментарии в вашем коде могут подтолкнуть ваш код к неправильному уровню отступов и, возможно, придется его вручную перемещать.
Ответ 3
Это тоже исказило меня, так как это была стандартная функция в Sublime Text 2, но как-то автоматическое отступы больше не работали в Sublime Text 3 для файлов HTML.
Моим решением было найти файл Miscellaneous.tmPreferences из Sublime Text 2 (найти в% AppData%/Roaming/Sublime Text 2/Packages/HTML) и скопировать эти настройки в тот же файл для ST3.
Теперь обработка пакетов была более сложной для ST3, но, к счастью, вы можете просто добавить файлы в папку% AppData%/Roaming/Sublime Text 3/Packages, и они перезаписывают настройки по умолчанию в каталоге установки. Просто сохраните этот файл как "% AppData%/Roaming/Sublime Text 3/Packages/HTML/Miscellaneous.tmPreferences" и автоматический отступ снова, как в ST2.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Ответ 4
Это адаптация вышеупомянутого ответа, но должна быть более полной.
Чтобы быть понятным, нужно повторно использовать предыдущие функции автоматического отступа, когда HTML файлы открыты в Sublime Text. Поэтому, когда вы заканчиваете тег, он автоматически отступает для следующего элемента.
Пользователи Windows
Перейдите в C:\Program Files\Sublime Text 3\Packages extract HTML.sublime-package, как если бы это был zip файл в каталог.
Откройте Miscellaneous.tmPreferences и скопируйте это содержимое в файл
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Затем заново запишите файл как HTML.sublime-package и замените существующий HTML.sublime-package тем, который вы только что создали.
Закрыть и открыть Sublime Text 3, и все готово!
