Sublime Text 3 - 无需输入属性值的 CSS 自动完成答案

【问题标题】：Sublime Text 3 - CSS Autocomplete WITHOUT typing property valueSublime Text 3 - 无需输入属性值的 CSS 自动完成
【发布时间】：2018-05-21 01:21:15
【问题描述】：

所以我知道当您开始输入值时，自动完成功能非常有用。例如，第二次在 text-align:center 中键入 "c"，就会弹出可用的自动完成值（例如 center, left, right）。

但是，当我使用 Dreamweaver 时，对于具有特定值选项（如 text-align (center, right, left), display (block, inline-block), cursor (pointer, default), etc.）的属性，自动完成弹出窗口会在键入属性后立即显示，它不会等到我开始输入值。在输入text-align: 之后，它会显示自动完成弹出窗口，为我提供center, right, left 选项。

值 autocomplete 应该在我的属性自动完成触发后立即触发：

所以在我输入te...
“te”属性的自动完成弹出窗口显示text-align, text-decoration, text-shadow 等....
然后我按 Enter 选择text-align...
然后在按下 Enter 后，应立即显示 text-align 值的自动完成弹出窗口：center, left, right。

知道如何在 Sublime Text 3 中实现这一点吗？

【问题讨论】：

标签： html css autocomplete sublimetext3 sublimetext

【解决方案1】：

您可以让 ST 在使用小插件和一些首选项插入完成后立即再次显示自动完成弹出窗口：

在 ST 中打开 CSS 文件后，打开 Preferences 菜单并选择 Preferences - Syntax Specific。将以下内容添加到右侧的设置中：

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

并保存。这将告诉 ST 在键入 : 或在语法需要属性值时自动在 CSS 文件中显示自动完成弹出窗口。

现在，不幸的是，ST 不认为自动完成已“键入”任何内容，因此当从插入 text-align: 的自动完成弹出窗口中选择 text-align 之类的属性值时，不会自动触发此触发器。所以，为了解决这个问题，这就是我们需要一个小插件的地方。从工具菜单中，选择开发人员 -> 新插件...

选择所有文本并替换为以下内容并将其保存在 ST 推荐的文件夹 (Packages/User/) 中，例如 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

这个插件基本上会检测何时插入完成（尽管由于 ST API 的限制，它无法检测何时您用鼠标单击条目 - 参见https://github.com/SublimeTextIssues/Core/issues/1166），如果文本/插入符号匹配设置中定义的自动完成触发器之一之前的字符，然后它将再次显示自动完成弹出窗口。

【讨论】：

适用于 ST 3.1.1 (3176)。谢谢。

【解决方案2】：

你可以试试这个包。这个包索引你的 .less 和 .scss（或 .sass）并缓存你的 mixins、变量、类或 id 名称并在 html 和 css 上自动完成。它使用 mixin 参数自动完成你的 less 和 sass mixins。它还支持 emmet 补全并在弹出窗口中获取您的 css 类。 -

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

【讨论】：