Как настроить формат 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*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>batchDecreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>increaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>batchIncreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>bracketIndentNextLinePattern</key>
         <string>&lt;!DOCTYPE(?!.*&gt;)</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*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>batchDecreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            (&lt;/(?!html)
              [A-Za-z0-9]+\b[^&gt;]*&gt;
            |--&gt;
            |&lt;\?(php)?\s+(else(if)?|end(if|for(each)?|while))
            |\}
            )</string>
        <key>increaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>batchIncreaseIndentPattern</key>
            <string>(?x)
            ^\s*
            &lt;(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^&gt;]*/&gt;)
              ([A-Za-z0-9]+)(?=\s|&gt;)\b[^&gt;]*&gt;(?!.*&lt;/\1&gt;)
            |&lt;!--(?!.*--&gt;)
            |&lt;\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
            |\{[^}"']*$
            </string>
        <key>bracketIndentNextLinePattern</key>
         <string>&lt;!DOCTYPE(?!.*&gt;)</string>
    </dict>
</dict>
</plist>

Затем заново запишите файл как HTML.sublime-package и замените существующий HTML.sublime-package тем, который вы только что создали.

Закрыть и открыть Sublime Text 3, и все готово!