Question

Here is an example of what is happening now:

.class {

}

So when I’m typing .class { SublimeText automatically inserts } (which is correct).
Then I press Enter and get this:

.class {
    #CURSOR_POSITION#
}

But what I really want is (attention to the closing bracket):

.class {
    #CURSOR_POSITION#
    }

I’ve even seen (ok, it was only once) in some editor special setting for this. Now I start using SublimeText (which is cool!) and I feel that it can be customized in a such way but I’m not quite sure how.

Answer 1

Ok! It’s not really hard to do it but it was not simple to know how to do it =)

So my approach is:

1. Write a simple macro (I’ve edited the default Enter macro called Add Line in Braces.sublime-macro which lives in ~Data/Packages/Default) and save it with a new name.
   I’ve called it CSS.Add Line in Braces.sublime-macro and put in ~Data/Packages/User.

   [
       {"command": "insert", "args": {"characters": "\n\n"} },
       {"command": "move_to", "args": {"to": "hardbol", "extend": false} },
       {"command": "insert", "args": {"characters": "\t"} },
       {"command": "move", "args": {"by": "lines", "forward": false} },
       {"command": "move_to", "args": {"to": "hardeol", "extend": false} },
       {"command": "reindent", "args": {"single_line": true} }
   ]
   

2. Apply it for Enter key in CSS files. For that we need to fo to Preferences > Key Bindings – User (it will open ~Data/Packages/User/Default (YOUR_OPERATING_SYSTEM).sublime-keymap) and paste there the following code:

   [
       { "keys": ["enter"], "command": "run_macro_file", "args": {"file": "Packages/User/CSS.Add Line in Braces.sublime-macro"}, "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 }
           ]
       }
   ]
   

   It is copy-pasted from the defult keybinding file with one context addition:
   { "key": "selector", "operator": "equal", "operand": "source.css" }
   which tells Sublime to apply it only for CSS ext.

3. Profit!