Sublime Text 3 - CSS Autocomplete WITHOUT typing property value

Question

So I know autocomplete works great when you start typing a value. For example, the second you type the "c" in text-align: c enter, the available autocomplete values pop up (such as center, left, right ).

However, when I used Dreamweaver, for properties with specific value options like text-align (center, right, left), display (block, inline-block), cursor (pointer, default), etc. , the autocomplete popup would show immediately after the property was typed, it did NOT wait until I started typing a value. Right after text-align: was typed out, it would show me the autocomplete popup giving me the options center, right, left .

The value autocomplete should fire right after my property autocomplete fires:

• So after I type te ...
  
• the autocomplete popup for "te" properties displays text-align, text-decoration, text-shadow etc....
  
• then I press Enter to select text-align ...
  
• then immediately after pressing Enter an autocomplete popup should show for the text-align values: center, left, right .

Any idea how this can be accomplished in Sublime Text 3?

Answer 1

You can get ST to show the autocompletion popup again straight after a completion has been inserted using a small plugin and some preferences:

With a CSS file open in ST, open the Preferences menu and select Preferences - Syntax Specific. Add the following to the settings on the right hand side:

"auto_complete_triggers":
[
    {
        "characters": ": ",
        "selector": "source.css meta.property-list.css meta.property-value.css"
    },
],

and save it. This will tell ST to show the autocomplete popup automatically in CSS files when typing a : or a space when the syntax expects a property value.

Now, unfortunately, ST doesn't consider an autocompletion to have "typed" anything, so this trigger isn't fired automatically when selecting a property value like text-align from the autocomplete popup, which inserts text-align: . So, to get round that, this is where we need a small plugin. From the Tools menu, choose Developer -> New Plugin...

Select all text and replace with the following and save it, in the folder ST recommends ( Packages/User/ ) as something like show_autocomplete_after_completion.py :

import sublime
import sublime_plugin


class AutoCompleteListener(sublime_plugin.EventListener):
    def on_post_text_command(self, view, command_name, args):
        if command_name in ('commit_completion', 'insert_best_completion'):
            act = view.settings().get('auto_complete_triggers', [])
            scope = view.scope_name(view.sel()[0].begin())
            char = view.substr(view.sel()[0].begin() - 1)
            for trigger in act:
                if sublime.score_selector(scope, trigger['selector']) > 0:
                    if char in trigger['characters']:
                        view.run_command('auto_complete', { 'insert_best_completion': False })
                        break

This plugin basically detects when a completion has been inserted (although due to a limitation of the ST API, it can't detect when you click on an entry with the mouse - see https://github.com/SublimeTextIssues/Core/issues/1166 ), and if the text/character immediately before the caret matches one of the autocompletion triggers defined in the settings, then it will show the autocomplete popup again.

Answer 2

You can try out this package. This package indexes your .less and .scss (or .sass) and caches your mixins, variables, class or id names and autocompletes both on html and css. It autocompletes your less and sass mixins with mixin arguments. It also supports emmet completions and gets your css classes on popup window. -

https://github.com/subhaze/CSS-Extended/