如何在 Sublime Text 3 上设置 HTML 自动缩进格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21190300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set HTML Auto Indent format on Sublime Text 3?
提问by Originerd
I have a question while I'm writing HTML code on Sublime Text 3. I just want to set auto indent format of HTML. For example, when I write p tag like under code, the indentation works like that.
我在 Sublime Text 3 上编写 HTML 代码时有一个问题。我只想设置 HTML 的自动缩进格式。例如，当我在代码下编写 p 标签时，缩进就是这样工作的。
<p>
Hello world!
</p>
But I want to write like under code instead of above.
但我想在代码下而不是在上面写。
<p>
Hello world!
</p>
And not only p tag also ul, ol and etc.
不仅 p 标签还有 ul、ol 等。
How can I set auto indent format of HTML on Sublime Text 3?
如何在 Sublime Text 3 上设置 HTML 的自动缩进格式？
回答by jlbnjmn
One option is to type [command] + [shift] + [p] (or the equivalent) and then type 'indentation'. The top result should be 'Indendtation: Reindent Lines'. Press [enter] and it will format the document.
一种选择是键入 [command] + [shift] + [p]（或等效项），然后键入“缩进”。最重要的结果应该是“缩进：缩进线”。按 [enter] 它将格式化文档。
Another option is to install the Emmet plugin (http://emmet.io/), which will provide not only better formatting, but also a myriad of other incredible features. To get the output you're looking for using Sublime Text 3 with the Emmet plugin requires just the following:
另一种选择是安装 Emmet 插件 ( http://emmet.io/)，它不仅可以提供更好的格式，还可以提供无数其他令人难以置信的功能。要使用带有 Emmet 插件的 Sublime Text 3 获得您正在寻找的输出，只需要以下内容：
p [tab][enter] Hello world!
When you type p [tab] Emmet expands it to:
当你输入 p [tab] 时，Emmet 将其展开为：
<p></p>
Pressing [enter] then further expands it to:
按 [enter] 然后将其进一步扩展为：
<p>
</p>
With the cursor indented and on the line between the tags. Meaning that typing text results in:
将光标缩进并位于标记之间的行上。这意味着输入文本会导致：
<p>
Hello, world!
</p>
回答by Joe Lloyd
Create a Keybinding
创建键绑定
To auto indent on Sublime text 3 with a key bind try going to
要使用键绑定在 Sublime text 3 上自动缩进，请尝试转到
Preferences > Key Bindings - users
首选项 > 键绑定 - 用户
And adding this code between the square brackets
并在方括号之间添加此代码
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
it sets shift+ alt+ fto be your full page auto indent.
它将shift+ alt+f设置为您的整页自动缩进。
Source here
来源在这里
Note:if this doesn't work correctly then you should convert your indentation to tabs. Also comments in your code can push your code to the wrong indentation level and may have to be moved manually.
注意：如果这不能正常工作，那么您应该将缩进转换为制表符。此外，您的代码中的注释可能会将您的代码推到错误的缩进级别，并且可能必须手动移动。
回答by Hyman
This is an adaptation of the above answer, but should be more complete.
这是对上述答案的改编，但应该更完整。
To be clear, this is to re-introduce previous auto-indent featureswhen HTML files are open in Sublime Text. So when you finish a tag, it automatically indents for the next element.
需要明确的是，这是为了在 Sublime Text 中打开 HTML 文件时重新引入以前的自动缩进功能。所以当你完成一个标签时，它会自动缩进下一个元素。
Windows Users
视窗用户
Go to C:\Program Files\Sublime Text 3\Packagesextract HTML.sublime-packageas if it is a zip file to a directory.
去C:\Program Files\Sublime Text 3\Packages解压HTML.sublime-package，就好像它是一个 zip 文件到一个目录。
Open Miscellaneous.tmPreferencesand copy this contents into the file
打开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[^>]*>(?!.*</>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end)
|\{[^}"']*$
</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[^>]*>(?!.*</>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Then re-zip the file as HTML.sublime-packageand replace the existing HTML.sublime-packagewith the one you just created.
然后将文件重新压缩为HTML.sublime-package并将现有文件替换为HTML.sublime-package您刚刚创建的文件。
Close and open Sublime Text 3 and you're done!
关闭并打开 Sublime Text 3，你就完成了！
回答by Iiro Vaahtoj?rvi
This was bugging me too, since this was a standard feature in Sublime Text 2, but somehow automatic indentation no longer worked in Sublime Text 3 for HTML files.
这也困扰着我，因为这是 Sublime Text 2 中的标准功能，但不知何故，自动缩进在 Sublime Text 3 中不再适用于 HTML 文件。
My solution was to find the Miscellaneous.tmPreferences file from Sublime Text 2 (found under %AppData%/Roaming/Sublime Text 2/Packages/HTML) and copy those settings to the same file for ST3.
我的解决方案是从 Sublime Text 2（在 %AppData%/Roaming/Sublime Text 2/Packages/HTML 下找到）中找到 Miscellaneous.tmPreferences 文件，并将这些设置复制到 ST3 的同一文件中。
Now package handling has been made more difficult for ST3, but luckily you can just add the files to your %AppData%/Roaming/Sublime Text 3/Packages folder and they overwrite default settings in the install directory. Just save this file as "%AppData%/Roaming/Sublime Text 3/Packages/HTML/Miscellaneous.tmPreferences" and auto indent works again like it did in ST2.
现在 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[^>]*>(?!.*</>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end)
|\{[^}"']*$
</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[^>]*>(?!.*</>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
