Ace编辑器自动补全功能图标重复显示问题求助

I’ve run into this exact issue before with Ace’s autocompletion styling! The root cause lies in how Ace applies the className you set on completion items to its internal DOM structure.

When you assign className: "iconable" to a completion entry, Ace adds this class to both the top-level .ace_completion-item element and its child .ace_completion-label element. Your original CSS uses .ace_iconable:after, which targets any element with that class—so you end up with two pseudo-elements (one on the item container, one on the text label) rendering the same icon.

Here’s how to resolve it: #

Adjust your CSS selector to target only the specific element where you want the icon to appear. The most reliable approach is to attach the icon to the completion label, which is where the text of the option lives:

.ace_completion-item.iconable .ace_completion-label:after {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: 900;
}

If you prefer the icon to be tied to the entire item container instead, you can explicitly disable the pseudo-element on the child label:

.ace_completion-item.iconable:after {
    font-family: "Font Awesome 5 Free";
    content: "\f1b2";
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: 900;
}

/* Prevent the label from duplicating the icon */
.ace_completion-item.iconable .ace_completion-label:after {
    content: none;
}

Quick way to confirm the issue: #

Right-click on a duplicate icon in your browser’s dev tools and inspect the DOM—you’ll see both the parent .ace_completion-item.iconable and child .ace_completion-label.iconable elements, which explains why your original CSS was generating two icons.

You can also double-check your getCompletions function to ensure you’re not accidentally pushing duplicate completion entries (though your code looks clean on that front!).

内容的提问来源于stack exchange，提问作者Daniel Lawton