代码之家 › 专栏 › 技术社区 › Daniel_Knights

防止CompletionItem列表插入第一个值

vscode-extensions visual-studio-code

Daniel_Knights · 技术社区 · 3 年前

我有一个片段:

'color: ${1|initial,inherit|};'

注册方式如下(减去不必要的代码):

const cssPropertyProvider = languages.registerCompletionItemProvider('mjml', {
  provideCompletionItems(document, position) {
    const snippetCompletion = new CompletionItem(attr.prefix)

    snippetCompletion.documentation = new MarkdownString(attr.description)
    snippetCompletion.insertText = new SnippetString(attr.body)

    return snippetCompletion
  }
})

subscriptions.push(cssPropertyProvider)

这将自动插入第一个列表项( initial )选择完工项目时:

有办法防止这种情况吗?

本质上,我想要与占位符相同的功能,但需要一个列表:

'color: ${1:initial};'

VSCode docs on lists and placeholders
VSCode docs on registerCompletionItemProvider

0 回复 | 直到 3 年前

Daniel_Knights 3 年前

我不得不放弃列表/占位符的方式,将建议单独存储:

body: 'color: $1;',
values: ['initial', 'inherit'],

然后,将此命令分配给原始建议( cssPropertyProvider ):

snippetCompletion.command = {
    command: 'editor.action.triggerSuggest',
    title: '',
}

并添加一个单独的完成提供者来涵盖这一点:

const cssValueProvider = languages.registerCompletionItemProvider('mjml', {
    provideCompletionItems(document, position) {
        const snippetCompletions: ProviderResult<CompletionItem[] | CompletionList> = []

        cssProperties.forEach((prop) => {
            const formattedBody = prop.body.split('$1').join('')

            // Ensure the line includes the relevant CSS property
            if (!document.lineAt(position).text.includes(formattedBody)) return

            prop.values.forEach((val) => {
                const snippetCompletion = new CompletionItem(val)

                // Sets the suggestion icon to the little orange thing
                snippetCompletion.kind = 11 // 11 = Value
                // Ensure tab-stops ($1) are handled
                snippetCompletion.insertText = new SnippetString(val)

                snippetCompletions.push(snippetCompletion)
            })
        })

        return snippetCompletions
    },
})

此外,仅针对我的特定用例,我必须添加一个签入 cssPropertyProvider 这防止了属性建议显示在值建议之上:

const cssPropertyProvider = languages.registerCompletionItemProvider('mjml', {
    provideCompletionItems(document, position) {
        const { text: lineText } = document.lineAt(position)
        const lastLineChar = lineText[position.character]

        if (lastLineChar === ';') return
...

结果: