Monaco Editor自定义语言自动补全无法显示符号的解决办法

我在开发自定义语言时，通过monaco.languages.registerCompletionItemProvider实现自动补全功能。文字类补全项显示正常，但逻辑符号（如∧、∨、→等）无法在自动补全列表中正常显示。我希望将映射表op中的符号作为补全项的label，而非对应的英文键（and、or等），但直接设置符号为label会出现显示异常，求可行解决方法。

现有代码 #

var op = new Map([])
op.set('and', '∧');
op.set('or', '∨');
op.set('implies','→');
op.set('not', '¬');
op.set('forall','∀');
op.set('exists','∃');
op.set('turnstile','⊢');
let operators = ['and', 'or', 'implies', 'not', 'forall', 'exists','turnstile'];

monaco.languages.registerCompletionItemProvider('logium', {
    provideCompletionItems: (model, position) => {
        const suggestions = [
             ...operators.map(k => {
                let value = op.get(k);
                 return {
                     label : k,
                     kind: monaco.languages.CompletionItemKind.Function,
                     insertText: value
                 };
             }),   
            ];
        return {suggestions: suggestions};
    }
})

显示效果对比 #

• label设为英文键时的显示效果：
  

• label设为符号时的显示效果：
  

解决方法 #

1. 配置支持符号的编辑器字体 #

符号显示异常大多是因为Monaco默认字体不支持Unicode逻辑符号，添加支持这类符号的字体即可解决：

// 定义自定义主题，指定支持符号的字体
monaco.editor.defineTheme('logiumTheme', {
    base: 'vs',
    inherit: true,
    rules: [],
    colors: {},
    fontInfo: {
        fontFamily: 'Consolas, Segoe UI Symbol, Noto Sans Symbols, monospace',
        fontSize: 14
    }
});

// 应用主题
monaco.editor.setTheme('logiumTheme');

2. 使用Unicode转义序列避免编码问题 #

直接使用符号可能存在编码兼容问题，改用Unicode转义序列定义符号映射：

var op = new Map([
    ['and', '\u2227'],
    ['or', '\u2228'],
    ['implies', '\u2192'],
    ['not', '\u00AC'],
    ['forall', '\u2200'],
    ['exists', '\u2203'],
    ['turnstile', '\u22A2']
]);

3. 用ICompletionItemLabel对象优化显示 #

如果想同时展示符号和英文提示，可使用Monaco的标签对象结构，兼顾可读性和符号预览：

...
return {
    label: {
        label: value, // 显示符号作为主标签
        description: k // 英文键作为辅助描述
    },
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: value
};
...

4. 辅助字段补充符号显示 #

若不想修改字体，可保留英文label，将符号放在detail字段中，让用户在补全时能看到对应的符号：

...
return {
    label: k,
    kind: monaco.languages.CompletionItemKind.Function,
    insertText: value,
    detail: value // 补全列表中显示符号
};
...

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