如何修改monaco.languages.registerCompletionItemProvider的建议项图标？

Monaco Editor 0.17.1版本没有原生API支持为单个补全项设置自定义图标，要实现这个需求可以通过CSS自定义样式的方式完成，具体步骤如下：

方法：CSS自定义样式覆盖 #

利用Monaco Editor补全列表的DOM结构，通过CSS选择器定位目标补全项，替换默认图标：

1. 编写自定义CSS规则，定位目标补全项并替换图标：

/* 隐藏目标补全项的默认图标 */
.monaco-list-row:contains('Custom suggestion') .monaco-icon-label .monaco-icon {
  display: none;
}

/* 设置自定义图标样式 */
.monaco-list-row:contains('Custom suggestion') .monaco-icon-label::before {
  content: '';
  background-image: url('你的图标路径'); /* 支持本地路径或base64编码 */
  background-size: 16px 16px; /* 适配Monaco默认图标尺寸 */
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
}

2. 将上述CSS引入到项目中（比如通过<style>标签或外部CSS文件）。

兼容性优化 #

contains选择器依赖浏览器支持，若需更兼容的方案，可结合补全项的kind类（示例中为completion-item-kind-keyword）缩小匹配范围：

.monaco-list-row.completion-item-kind-keyword:contains('Custom suggestion') .monaco-icon-label::before {
  /* 自定义样式 */
}

升级版本后的原生方案（可选） #

如果可以升级到Monaco Editor 0.20及以上版本，官方提供了iconPath属性，可直接为单个补全项设置自定义图标：

monaco.languages.registerCompletionItemProvider('myCustomLang', {
  provideCompletionItems(model, position) {
    const suggestions = [
      {
        label: 'Custom suggestion',
        kind: monaco.languages.CompletionItemKind.Keyword,
        insertText: 'customSuggestion',
        documentation: 'This is a custom suggestion with an image.',
        // 支持本地路径或base64编码的图标
        iconPath: monaco.Uri.parse('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgMTJWMTFIM1Y3SDdWMy41TDExIDdINS41TDcgMy41VjdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTMgMTJWMTFINy41TDMgNy41VjExSDNWMTJIMTMiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=')
      }
    ];

    return { suggestions };
  }
})

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