Sublime Text 3 中的自动 css 右括号

Question

创建新的 CSS 规则时，我希望右括号自动放在 class 名称的正下方，因此稍后它会留在同一行作为最后一个属性：值对：

.rule {
display: block;
clor: #000; }

.rule {
}   /* It should look like this when pressing enter after 
    the opening bracket with the cursor before the closing bracket (obviously). */

我试过 “auto_match_enabled”: false 但这只会禁用右括号，所以我需要手动添加它。

我已经安装了 PackageResourceViewer 并查看了 CSS.sublime-syntax 和 css_completions.py 但找不到任何相应的设置或代码。我在默认代码段中也没有找到任何内容。

编辑我怎样才能得到低于结果？

.rule {
  | }

Answer 1

要确定响应按键时发生了什么，请使用 View > Show Console 或关联的键打开 Sublime 控制台，然后输入 sublime.log_commands(True) 以打开命令日志记录，然后执行操作。

在这样做的过程中，你可以看到在这样的情况下：

.rule {|}

当你按回车时，触发的命令是：

command: run_macro_file {"file": "res://Packages/Default/Add Line in Braces.sublime-macro"}

由此您可以确定该键已绑定到 run_macro_file，并且执行此操作的是宏。如果您查看默认键绑定，键绑定是：

    { "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 }
        ]
    },

也就是说，如果在 auto_indent 开启的情况下按 Enter，则选择为空，光标位于两个大括号的中间 {}, 运行宏，采取插入多行的步骤。

简单地说，您可以通过关闭 auto_indent 来阻止这种情况的发生。然而，一般来说这不是一个可行的解决方案，因此您需要在 User 包中创建一个键绑定，在相同情况下不会这样做，而只是执行 enter 会做的事情：

    { "keys": ["enter"], "command": "insert", "args": {"characters": "\n"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "source.css" },
            { "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 }
        ]
    },

这与上面的绑定相同，但现在 command 仅插入一行，并且它还通过selector.

设置好后，在这种情况下按下该键时，css 如下所示：

.rule{
|}

编辑

insert 命令的 characters 参数中的文本可以设置为您想要键入的任何文本，例如，您可以将其设置为 "\n\t"或 "\n "（换行符和两个 spaces）以便在新行上有一点缩进。

为了获得如下结果，需要一个稍微不同的命令：

.rule {
  | }

此处光标前后有space，这就排除了insert命令的使用，因为光标总是在最后一个插入的字符之后结束。

实现此目的的一种方法是创建一个类似于此键的默认绑定已经发生的宏，但另一种方法是 insert_snippet 命令。这可以插入一个片段文件，但它也需要一个参数 contents 直接告诉它片段内容。

考虑到这一点，上述键绑定可以表示为：

    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "\n\t[=16=]\t"}, "context":
        [
            { "key": "selector", "operator": "equal", "operand": "source.css" },
            { "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 }
        ]
    },

insert_snippet 展开代码段文本（包括任何字段，如果提供的话），然后将光标置于 [=36=]，如果未提供则默认为插入内容的末尾。

插入 \t 字符会插入一个制表符，这将是一个物理制表符，除非 translate_tabs_to_spaces 已打开，在这种情况下，插入将用相同的 \t 替换当前设置为 tab_size 的 space 数。

如果需要，您当然也可以使用特定数量的 space 个字符。

Sublime Text 3 中的自动 css 右括号

Automatic css closing bracket in Sublime Text 3

css

sublimetext3