vscode插件开发——代码提示、代码补全、代码分析（续）

上篇文章因为篇幅问题，很多东西没有提到，这次做一个补充。请结合上一篇文章食用。

https://blog.csdn.net/luoluoyang23/article/details/124543453

一、个性化的图标名被算作代码提示内容

我们个性化定制的图标名如果和代码提示内容相近时可能会出现下面的问题
图标名：

代码提示片段：

结果：

这时候定制化的图标别名被认作是代码提示的触发文本，因此图标就没有显示了

这里给个小技巧，一般我们很少会把数字作为代码提示触发的文本，而且在默认情况下，直接在vscode输入数字也是不会触发代码提示的，因此我们可以利用这个特性

修改图标别名为数字格式，注意格式

这里触发了tabnine的代码提示，但是我们的图标文件并没有被唤起

工作正常
大家有更好的解决办法吗

二、connection.onCompletionResolve

上篇文章我们提到过，代码提示补全的插件开发主要依赖两个函数，其实在我后面的实际体验中，onCompletionResolve的使用也是非常频繁的，它能够编辑我们选择代码提示选项后，实际插入的代码文本

connection.onCompletionResolve(
	(item: CompletionItem): CompletionItem => {
    
	// checkList是一个监听配置的列表，当我们选中的代码提示内容
	// 在这个列表中时，这里就会进行一些处理。
		if (checkList.includes(item.filterText += '')) {
    
			if (!item.filterText) item.filterText = ''
			// 如果item在监视列表之内的话需要进行处理
			// checkEventMap就是对item的newText进行了编辑
			// 从而对插入的文本进行一些动态的控制，比如插入
			// 这段文本需要导入某个包
			checkEventMap[item.filterText](item, DP)
		}
		return item;
	}
);

CompletionItem是我们在onCompletion配置的代码提示具体选中的内容，我们这里可以直接对onCompletion中的textEdit中的newText进行编辑，就能控制输入的文本
在我的这段代码中，DP是我创建的一个全局对象，它会记录change.documen中的一些属性和方法，以便在其它地方能够使用
因此它肯定是在onDidChangeContent中进行初始化的

documents.onDidChangeContent(change => {
    
	initDP(change.document, DP, connection)
	checkDiagnostic(connection)(change.document)
});

三、将我们的配置文件进行整理

上篇文章中，我们将配置直接写在connection.onCompletion的代码里面，这样后面越写越多，代码肯定不好看，因此我们需要进行改进
在我的目前的开发中，我把代码提示拆成了三部分，

1. 在用户初次打开某个文件时会触发的代码提示
2. 静态的代码提示
3. 动态的，会根据用户当前代码内容而进行变化的代码提示

将它们分别写在不同的文件中，再用一个文件进行汇总

import openConfig from './config/openConfig';
import normalConfig from './config/normalConfig';
import dynamicConfig from './config/dynamicConfig/dynamicConfig';

// 在文件打开，还没有敲太多代码时才会响应的代码提示
const openList: CompletionItem[] = [
	openConfig.fc,
	openConfig.imr,
]

// 普通的静态代码提示
const normalList: CompletionItem[] = [
	normalConfig.useEffect,
	normalConfig.useEffectDth,
	normalConfig.useState,
	normalConfig.useRef,
	normalConfig.csy,
	normalConfig.img,
]

// 动态的代码提示片段，插入的代码片段会在不同的文件或者代码内容中发生变化
const dynamicList: CompletionItem[] = [
	dynamicConfig.ism,
	dynamicConfig.mfc,
	dynamicConfig.mdp,
	dynamicConfig.moi,
]

export {
    
	openList, 
	normalList,
	dynamicList,
}

然后我们再在connection.onCompletion中进行控制和使用，这样代码更优雅，也更利于我们维护不同的代码配置

import {
    
	openList,
	normalList,
	dynamicList,
} from './plainconfig/configList';

connection.onCompletion(
	(_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
    
		// writeText是我写的一个动态代码提示的处理函数，它会修改DP中的
		// 一些内容
		writeText(DP)
		// completeConfigList的作用会在下方解释
		const useConfig = completeConfigList(_textDocumentPosition)
		const itemList = []
		if (DP.version <= 50) {
    
			itemList.push(...useConfig(openList), ...useConfig(dynamicList))
		}
		itemList.push(...useConfig(normalList))
		return itemList;
	}
);

completeConfigList是我写得一个处理代码插入位置的函数，也就是更新configItem.textEdit.range，这里使用了高级函数，以便能够直接包装我们的list，这段代码大家可以依据自己的需求进行开发，这里还是贴一下这个函数的代码

// 将配置的range赋于有意义的值
const doComplete = (
	configItem: CompletionItem, textDocPosition: TextDocumentPositionParams
) => {
    
	if (configItem && configItem.textEdit) {
    
		if ('range' in configItem.textEdit) {
    
			configItem.textEdit.range = {
    
				start: {
    
					line: textDocPosition.position.line,
					character: 0
				},
				end: {
    
					line: textDocPosition.position.line,
					character: textDocPosition.position.character
				}
			}
		}
	}
}

export const completeConfig =
(textDocPosition: TextDocumentPositionParams) =>
(configItem: CompletionItem) => {
    
	doComplete(configItem, textDocPosition)
	return configItem
}

export const completeConfigList = 
(textDocPosition: TextDocumentPositionParams) =>
(configItemList: CompletionItem[]) => {
    
	for (let configItem of configItemList) {
    
		doComplete(configItem, textDocPosition)
	}
	return configItemList
}

要看懂这段代码，需要对我们上篇文章中提到的CompletionItem中的配置项比较熟悉

吸取上篇文章的教训，控制文章的篇幅，所以这篇文章就讲这些东西。希望能对大家有帮助ヾ(≧▽≦*)o