Sublime Forum

CSS autocomplete suggests properties instead of values

#1

Hello,

OS: Windows 10
Sublime Text: 3
Build: 3126 (installed today)
Packages: none

I have recently moved from NetBeans to Sublime and I generally like it, but there is one annoying behavior that I can’t find solution for. I have even reinstalled Sublime today, but it didn’t help.

When I type CSS property and colon (or for example type “d” and autocomplete “display”) next autocomplete suggestion is also property.
[as new user I can’t post more than one image: https://forum.sublimetext.com/uploads/default/original/3X/d/b/db6ea40f3399ed5566ca975a15ce0d0446ad242b.png ]
Even stranger when I type (or choose from autocomplete) property again (in the same line) then autocomplete suggests values (correct behavior).

Does anyone have solution for this? I have tried some packages like: “CSS Completions”, “CSS Extended Completions”, “Emmet”, “SCSS”, but none of them helped me.

Thanks in advance!

PS: is there any way to automatically show autocomplete after property (without pressing ctrl+space)?

2 Likes
#2

I’m sorry to say that I don’t know where your problem is coming from.

Add this to your settings: "auto_complete_selector": "", it’s going to enable the popup to show automatically everywhere.

Matt

1 Like
#3

The problem comes because the CSS autocompletions depend on the scopes assigned by the syntax definition. In this case, it needs the scope to be meta.property-value.css in order to suggest property values. However, the syntax definition currently only assigns this scope to non-whitespace after the :. Therefore, the effect is that it will only show correct completions once you have typed at least 1 letter.

There is an easy fix for this - take out the \s* here:

It might be worth reporting this as an issue on the repo.

triggering auto complete immediately after an auto completion suggestion is committed is possible, but not easy. It can only be done in Python (plugin).

You could add the following to your user preferences, to automatically show autocomplete when pressing : in CSS:

"auto_complete_triggers":
[
    {
        "characters": ":",
        "selector": "source.css"
    }
],
2 Likes
#4

Thank you for your answers.
Changing css.sublime-syntax worked (notice for anyone who might seek help here: you can open CSS.sublime-package in winrar and then edit css.sublime-syntax in any text editor, I used Sublime :wink: ).

Unfortunately neither auto-autocomplete did the post-scriptum trick.
I couldn’t use "auto_complete_selector": "", in any way. Maybe I shouldn’t paste it into Prerefences.sublime-settings?
"auto_complete_triggers" was helpful, but only as a workaround:

  1. It seems that using autocomplete in property doesn’t trigger trigger. So for example typing “d” then pressing tab to autocomplete "display: " won’t show suggestions.
  2. Typing whole property triggers semicolon. For example typing “display:” will result in “display:;” with pointer between colon and semicolon. It won’t trigger trigger.
  3. My workaround is:
    "auto_complete_triggers": [ { "characters": ": ", "selector": "source.css" } ],
    Notice: 2 spaces after colon in “characters”.
    It works like this: I type for example “d”, then press tab to autocomplete "display: ". Next I type additional space to trigger “auto_complete_triggers”, choose value and tab again. Semicolon is added automatically. There is additional space before every value, but minifying will delete all spaces anyway. The only doubt is whether pressing space is significantly faster than ctrl+space.
    If anyone has better idea please share!

Thanks again for both answers. Helped me to understand Sublime better :slightly_smiling:

0 Likes
#5

For what it’s worth, if you modify the sublime package file directly, the next update of Sublime text will overwrite the package file and your modifications will be lost. You can get around that by making a package override for that file.

In this case an update of Sublime won’t wipe out your changes but it will keep using your override instead of the built in file without warning you that the underlying package changed, which means that you lose out on any official bug fixes and could conceivably cause weird issues.

The easiest way to create an override is via PackageResourceViewer.

2 Likes
#6

Since you want the popup to open after completing another one, you’d either have to do it manually using ctrl+space or by writing a plugin that opens the completion popup automatically in this specific situation.

0 Likes