如何在 Sublime Text 3 上设置 HTML 自动缩进格式？

Question

我在 Sublime Text 3 上编写 HTML 代码时有一个问题。我只想设置 HTML 的自动缩进格式。例如，当我在代码下写 p 标签时，缩进就是这样。

<p>
Hello world!
</p>

但我想写在代码下面而不是上面。

<p>
  Hello world!
</p>

不仅p标签还有ul、ol等

如何在 Sublime Text 3 上设置 HTML 的自动缩进格式？

Answer 1

一种选择是键入 [command] + [shift] + [p]（或等效项），然后键入“缩进”。最上面的结果应该是“缩进：缩进线”。按[enter]，它将格式化文档。

另一个选择是安装 Emmet 插件 (http://emmet.io/)，它不仅可以提供更好的格式，还可以提供无数其他令人难以置信的功能。要使用带有 Emmet 插件的 Sublime Text 3 获得您正在寻找的输出，只需要以下内容：

p [tab][enter] Hello world!

当你输入 p [tab] 时，Emmet 会将其扩展为：

<p></p>

按 [enter] 然后将其进一步扩展为：

<p>

</p>

光标缩进并位于标签之间的行上。 这意味着输入文本会导致：

<p>
    Hello, world!
</p>

Answer 2

创建键绑定

要使用键绑定在 Sublime 文本 3 上自动缩进，请尝试转到

首选项 > 键绑定 - 用户

并在方括号之间添加此代码

{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}

它将 shift + alt + f 设置为整页自动缩进。

来源here

注意：如果这不能正常工作，那么您应该将缩进转换为制表符。此外，您代码中的 cmets 可能会将您的代码推送到错误的缩进级别，并且可能必须手动移动。

Answer 3

这是对上述答案的改编，但应该更完整。

明确地说，这是为了在 Sublime Text 中打开 HTML 文件时重新引入以前的自动缩进功能。所以当你完成一个标签时，它会自动缩进下一个元素。

Windows 用户

转到C:\Program Files\Sublime Text 3\Packages 解压缩HTML.sublime-package，就好像它是一个目录的压缩文件一样。

打开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 就完成了！

Answer 4

这也困扰着我，因为这是 Sublime Text 2 中的标准功能，但不知何故，自动缩进在 Sublime Text 3 中不再适用于 HTML 文件。

我的解决方案是从 Sublime Text 2 中找到 Miscellaneous.tmPreferences 文件（位于 %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>