如何在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](或等效的),然后输入'indentation'.最重要的结果应该是'Indendtation:Reindent Lines'.按[enter]键将格式化文档.

另一种选择是安装Emmet插件(http://emmet.io/),它不仅可以提供更好的格式化,还可以提供无数其他令人难以置信的功能.要获得使用Submeime Text 3和Emmet插件的输出,只需要以下内容:

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设置为您的整页自动缩进.

来源于此

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

Answer 3

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

为了清楚起见,这是在Sublime Text中打开HTML文件时重新引入以前的自动缩进功能.因此,当您完成标记时,它会自动缩进下一个元素.

Windows用户

转到C:\Program Files\Sublime Text 3\Packages提取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,你就完成了!

Answer 4

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

我的解决方案是从Sublime Text 2(在%AppData%/ Roaming/Sublime Text 2/Packages/HTML下找到)找到Miscellaneous.tmPreferences文件,并将这些设置复制到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>