Sublime Text 2 - 括号和 HTML 标签的自动缩进答案

【问题标题】：Sublime Text 2 - Auto-indent for brackets and HTML tagsSublime Text 2 - 括号和 HTML 标签的自动缩进
【发布时间】：2015-09-23 20:47:34
【问题描述】：

（注意：在这些示例中，我将使用管道符号“|”来表示光标）

在 Sublime Text 2 中，当我输入大括号时，它会自动添加一个匹配的大括号，如下所示：

{|}

光标在两个大括号之间。然后当我点击 Enter 时，它会自动添加一个额外的新行和一个缩进，导致：

{
    |
}

然而，同样的缩进行为不会发生在括号和 HTML 元素上。例如，如果我输入一个括号“[”，它会自动添加匹配的括号，例如：

[|]

但是当我点击Enter时，结果是：

[
|]

它不会添加额外的行或缩进。同样，当我输入“div.some-class”，然后输入 Tab 时，我得到：

<div class="some-class">|</div>

但是当我点击 Enter 时，我得到了

<div class="some-class">
|</div>

不是我想要的。唯一正常工作的情况是使用大括号。但在所有 3 种情况下（大括号、方括号、html 元素），我都想要添加一个额外的行和缩进。所以它们都应该是这样的：

大括号：

{
    |
}

括号：

[
    |
]

HTML 元素：

<div class="some-class">
    |
</div>

我怎样才能做到这一点？

【问题讨论】：

标签： autocomplete format sublimetext2 indentation auto-indent

【解决方案1】：

说明

我刚刚自己想出了如何做你清单上的一件事。

我修改了当您按下"enter" 键时运行的正则表达式。

旧的正则表达式检查了这个"operand": "\\{$" 和这个"operand": "^\\}"

我添加了or 使用管道| 检查以同样方式检查[ 和(："operand": "\\{$|\\[$|\$$" 和"operand": "^\\}|^\\]|^\$"

方向

导航到首选项>键绑定 - 用户

就个人而言，我通过将简短的绑定放在顶部，将较大的块绑定/关注点放在底部来保持这个文件的组织。我认为以下是一个更大的块。

将此新代码粘贴到文件中：

  // Auto-insert line and indent on square bracket and bracket (parenthesis)
  { "keys": ["enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line in Braces.sublime-macro"}, "context":
    [
      { "key": "setting.auto_indent", "operator": "equal", "operand": true },
      { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
      { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$|\\[$|\\($", "match_all": true },
      { "key": "following_text", "operator": "regex_contains", "operand": "^\\}|^\\]|^\\)", "match_all": true }
    ]
  },
  { "keys": ["shift+enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line in Braces.sublime-macro"}, "context":
    [
      { "key": "setting.auto_indent", "operator": "equal", "operand": true },
      { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
      { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$|\\[$|\\($", "match_all": true },
      { "key": "following_text", "operator": "regex_contains", "operand": "^\\}|^\\]|^\\)", "match_all": true }
    ]
  },

几点说明：

正如我所说，我的代码为括号执行此操作。（Sublime 将括号称为“方括号”，区别于“方括号”和“大括号”。）
如果您不希望它在括号上工作，请将第一个“操作数”检查更改为："operand": "\\{$|\\[$"，并将下一行的“操作数”检查更改为："operand": "^\\}|^\\]"
最后，我猜 Sublime 无论如何都能正确解析它，但我在右大括号的末尾有一个逗号 ,，这会假设您后面还有一些键绑定。如果它是文件末尾右方括号之前的最后一个绑定，则应删除逗号。

另外，至少在 Sublime Text 3 中，您关于 <div> 缩进的问题已得到修复。

【讨论】：

它不适用于大括号 '()'。最后一个大括号也是缩进的。
我也有这个问题，但它实际上是在一个单独的文件中引起的。这不是键绑定，但对我来说它在 JavaScript.tmPreferences 文件中我几乎是肯定的。我花了很长时间才找到问题，而且我没有在任何地方记录.我认为在我删除的文件底部有类似于<key>indentBrackets</key><true/> 的行。
另外，请注意括号被称为brackets，而不是braces。
我想我找到了。打开Default>Indentation Rules.tmPreferences，你会看到底部的行<key>indentParens</key><true/>
在咨询了它的reference hierarchy之后，我认为你应该编辑你的User>Indentation_Rules.tmPreferences文件。

【解决方案2】：

安装 EMMET 插件，它会实现这一点，另外还有大量额外的强大功能，尤其是用于编写 HTML 和 CSS。 :)

如果您尚未安装包控制（用于轻松安装新包/插件），请使用说明安装它 here。

然后您只需按CTRL+SHIFT+P 并写Package Control : Instal Package 并找到EMMET 并安装它。完成后重新启动 Sublime Text，它应该可以工作:)

【讨论】：