Sublime Forum

Newbie question - CSS code completion in a HTML file

#1

I am evaluating Sublime Text 2 right now as I want to replace it with my current IDE. However, I have one issue which I could not solve yet (and I was unable to find an answer using forums and Google).

When I set the syntax of a document to “HTML” and I start to write something like

<div sty

I would like that “style” is behaving as an autocomplete field (and showing its further CSS options, like background-color, margin, padding, etc). But since the syntax of the page is set to “HTML” I seem not to get any autocomplete for the CSS in that HTML file. How can you “enable” autocompletion of CSS in a HTML syntax file? I know that a common way is to separate CSS and HTML into different files. But when this is not possible/wanted: How can you use CSS autocompletion in a HTML file using Sublime Text 2?

0 Likes

#2

Hi, there. You’re in luck because I just added some custom completions for the first time today! =) Here is an example of how to create one completion; I’ll use the div tag from your post. Save this file as a .sublime-completions file and put it in the appropriate folder (package folder is fine). Maybe that will get you started?

{
    "scope" : "text.html.basic",

    "completions":
    
        { "trigger" : "<div style", "content" : "<div style=\"background-color: $1; margin: $2; padding: $3;\">$4</div>" }
    ]
}

Yugocode

0 Likes