Sublime Forum

Modifying auto--complete writing CSS

#1

Good day,

Like many out there, I am dissatisfied with the automatic insertion of punctuation for CSS mark-up. Many don’t like the ‘colon space semi-colon’ the CSS package injects as code is written. The personal preference I would like is a method to inject a colon followed by 1-2 tabs and a semi-colon.

Doing some hunting I discovered web topics on how to achieve what I want but they don’t apply for Sublime Text 3. The solution I discovered and wish to adapt involves a key binding snippet which stops a semi-colon to the right of the cursor. This is the snippet:

// override CSS auto-insertion of semi-colon
{ "keys": [":"], "command": "insert_snippet", "args": {"contents": ":$0"}, "context":
    [
        { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true },
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "selector", "operator": "equal", "operand": "source.css - meta.selector.css", "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\}|$)", "match_all": true }
    ]
}

I want {“contents”: “:$0”} to output the equivalent of “:\t\t;” with the cursor in between the tab and the semi-colon. Another keystroke on the tab key would inject a third tab.
I have tried {“contents”: “:\t$0”} and {“contents”: “:\t\t$0”} to get started but with no success. All I have been able to achieve is ": " with the cursor after the space.

0 Likes
#2

Your examples of {"contents": ":\t$0"} and {"contents": ":\t\t$0"} work for me.

0 Likes
#3

Syntactically and what I think should work are two different things. I am getting results like I think I should and what you say you’re getting. I discovered some things were wrong with Sublime due to tweaks tried up until my original post. Rolling my settings directory back to the state of a week ago fixed things.

Debugging this some more, I discovered {“contents”: “:\t$0”} or {“contents”: “:\t\t$0”} works after I delete the colon automatically inserted by auto-complete and then type a new colon. While doing research on this, plug-ins such as Emmet have impact. On the Sublime installation you tried, do you have any of the following plug-ins?:
Emmet
Sass
Sass Build
Sass Snippets

Knowing what you have might avail me to narrow down a package that needs tweaking or eliminating it totally from my system.

Thank you for the reply. It gave a clue something was wrong and I am closer to a solution.

0 Likes
#4

I don’t have Emmet or any SASS packages installed.

0 Likes