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 {|}

當您按Enter時，觸發的命令是：

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 ，則選擇為空，並且 cursor 位於兩個大括號{}的中間，運行宏，執行插入多行的步驟。

簡單地說，您可以通過關閉auto_indent來阻止這種情況的發生。 然而，一般來說這不是一個可行的解決方案，因此您需要在您的User package 中創建一個鍵綁定，在相同的情況下不會這樣做，而只是執行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中的source.css匹配將自身限制為僅 CSS 個文件。

有了這個，當你在這種情況下按下鍵時，css 看起來像下面這樣：

.rule{
|}

---

編輯

insert命令的characters參數中的文本可以設置為您想要鍵入的任何文本，例如，您可以將其設置為"\n\t"或"\n " （換行符和兩個空格）為了在新行上有一點縮進。

為了獲得如下結果，需要一個稍微不同的命令：

.rule {
  | }

這里在 cursor 前后都有空格，這排除了insert命令的使用，因為 cursor 總是在最后一個插入的字符之后結束。

執行此操作的一種方法是創建一個類似於此鍵的默認綁定已經發生的宏，但另一種方法是insert_snippet命令。 這可以插入一個片段文件，但它也接受一個contents參數，直接告訴它片段內容。

考慮到這一點，上述鍵綁定可以表示為：

    { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\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展開代碼段文本（包括任何字段，如果提供的話）然后將 cursor 放在$0處，如果未提供則默認為插入內容的末尾。

插入一個\t字符會插入一個制表符，這將是一個物理制表符，除非translate_tabs_to_spaces被打開，在這種情況下，插入將用與tab_size當前設置的相同數量的空格替換\t 。

如果需要，您當然也可以使用特定數量的空格字符。