Automatic css closing bracket in Sublime Text 3 - css

Question

When creating a new CSS rule, I would like the closing bracket to be placed automatically right under the class name, so as a result, later, it would stay on the same line as the last property: value pair:
.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). */
I have tried “auto_match_enabled”: false but this simply disables the closing bracket, so I need to add it manually.
I have installed PackageResourceViewer and looked into CSS.sublime-syntax and css_completions.py but could not find any corresponding setting or code. I have also found nothing in the default snippets.
EDIT
How could I get below result?
.rule {
| }

Answer 1

To determine what's happening in response to a key press, open the Sublime console with View > Show Console or the associated key, and enter sublime.log_commands(True) to turn on command logging, then take the action.
In doing this, you can see that in a situation like this:
.rule {|}
When you press Enter, the command that triggers is:
command: run_macro_file {"file": "res://Packages/Default/Add Line in Braces.sublime-macro"}
From this you can determine that the key is bound to run_macro_file, and that the macro is what's taking this action. If you look in the default key bindings, the key binding is:
{ "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 }
]
},
That is, if you press Enter while auto_indent is turned on, the selection is empty, and the cursor is sitting in the middle of two braces {}, run the macro, which takes the step of inserting multiple lines.
Simplistically, you can thus stop this from happening by turning off auto_indent. However that's not a viable solution generally speaking, so you would need to create a key binding in your User package that, in the same situation doesn't do this and instead just does what enter would do:
{ "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 }
]
},
This is the same binding as above, but now the command just inserts a single line, and it also constrains itself only to CSS files via the source.css match in the selector.
With this in place, the css looks like the following when you press the key in this situation:
.rule{
|}
EDIT
The Text in the characters argument of the insert command can be set to any text that you'd like to type, so you could for example set it to "\n\t" or "\n " (newline and two spaces) in order to have a bit of indentation on the new line.
In order to achieve a result like the following, a slightly different command is required:
.rule {
| }
Here there is space before and after the cursor, which precludes the use of the insert command since the cursor always ends up after the last character inserted.
One way to to do this would be to create a macro similar to what already happens for the default binding of this key, but another way would be the insert_snippet command. This can insert a snippet file but it also takes an argument of contents that tells it the snippet content directly.
With that in mind, the above key binding could be expressed as:
{ "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 expands out the snippet text (including any fields, if any are provided) and then places the cursor at $0, which defaults to the end of the inserted content if not provided.
Inserting a \t character inserts a tab, which will be a physical tab character unless translate_tabs_to_spaces is turned on, in which case the insertion will replace the \t with the same number of spaces as tab_size is currently set to.
You could of course also use a specific amount of space characters instead, if that is desired.