Sublime Forum

Auto insert line break

#1

Hi, in CSS file only. How to auto insert a line break when I type the { key?

For example, when we we type { in CSS file, it would become {|}, note the | is where the cursor at.

Originally:
.test {|}

Expected result:

.test {
   |
}

Do anyone mind providing the keybinding for this? Many thanks in advance.

0 Likes
#2

An example key binding that does this would be:

    { "keys": ["{"], "command": "insert_snippet",
       "args": {"contents": "{\n\t$0\n}"},
       "context": [
           { "key": "selector", "operator": "equal", "operand": "source.css" },
       ],
    },

The command insert_snippet can insert text the same as a snippet could (including variable expansions as you might like); the field $0 sets the place the cursor ends up once the expansion is complete.

The binding makes the command execute any time { is pressed, so the context ensures that the only time that this is allowed to happen is inside of a CSS file; otherwise no matter what file you edit, this would always happen.

Depending on your use case, you may find that there are places in a CSS file that you don’t want this to happen, in which case you might need to adjust the context or add other entries to it to dial in as needed.

0 Likes