NutUI v3 版本发布至今已经 1 年了，不管是集团内部仍是外部开发者，都在各自不一样的业务场景中开发使用，咱们感到骄傲的同时也是压力倍增，积极努力修复开发者的各类 Issue，扩展组件功能，尽量知足开发者诉求。今年以来陆续补充了多技术栈（React）、组件级 UI 定制、国际化及代码智能提示能力。本篇将介绍代码智能提示（Vscode插件）的功能，并就 NutUI-Vscode 的实现给你们作一个详尽的剖析。
直观体验
什么是代码智能提示？为了让你们有一个直观的认识，让咱们先来仔细观察下面两张 gif 图～javascript
组件库没有任何的代码提示
组件库有了智能提示以后
不知你们在看了上面两张图片以后有什么样的感想？很明显，咱们使用了智能提示以后，不管是快速查看文档，仍是查看组件属性，都会很方便的进行查阅，固然开发效率上确定也有了显著的提高。那么，让咱们快来亲自体验下吧～html
使用指南
Tips： NutUI官网-开发工具支持，这里也有简要介绍哦~
- 在
vscode中安装nutui-vscode-extension插件
- 安装
vetur插件。不了解这个插件的这里有介绍
安装完成以上两个插件以后，从新启动咱们的 vscode ,就能够愉快的体验 NutUI 的智能提示功能啦，是否是简直不要太简单～vue
体验也结束了，是否是该跟我一块儿熟悉熟悉它的原理啦。既然是开发
vscode 插件，那首先咱们必定是要先熟悉它的开发以及调试、发布流程。一份文档送给你哦。
看这里
熟悉了基本的 vscode 开发流程以后，下面就跟随我一步步揭开这个智能提示功能的神秘面纱吧～java
360全方位解读
快速查看组件文档
从上图能够看出，当咱们在使用 NutUI 进行开发的时候，咱们在写完一个组件 nut-button，鼠标 Hover 到组件上时，会出现一个提示，点击提示能够打开 Button 组件的官方文档。咱们可快速查看对应的 API 来使用它开发。react
首先咱们须要在 vscode 生成的项目中，找到对应的钩子函数 activate ,在这里面注册一个 Provider,而后针对定义好的类型文件 files 经过 provideHover 来进行解析。typescript
const files = ['vue', 'typescript', 'javascript', 'react'];
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.languages.registerHoverProvider(files, {
provideHover
})
);
}下面咱们能够具体看看 provideHover 是如何实现的？json
const LINK_REG = /(?<=<nut-)([\w-]+)/g;
const BIG_LINK_REG = /(?<=<Nut-)([\w-])+/g;
const provideHover = (document: vscode.TextDocument, position: vscode.Position) => {
const line = document.lineAt(position); //根据鼠标的位置读取当前所在行
const componentLink = line.text.match(LINK_REG) ?? [];//对 nut-开头的字符串进行匹配
const componentBigLink = line.text.match(BIG_LINK_REG) ?? [];
const components = [...new Set([...componentLink, ...componentBigLink.map(kebabCase)])]; //匹配出当前Hover行所包含的组件
if (components.length) {
const text = components
.filter((item: string) => componentMap[item])
.map((item: string) => {
const { site } = componentMap[item];
return new vscode.MarkdownString(
`[NutUI -> $(references) 请查看 ${bigCamelize(item)} 组件官方文档](${DOC}${site})\n`,
true
);
});
return new vscode.Hover(text);
}
};
经过 vscode 提供的 API 以及 对应的正则匹配，获取当前 Hover 行所包含的组件，而后经过遍历的方式返回不一样组件对应的 MarkDownString,最后返回 vscode.Hover 对象。segmentfault
细心的大家可能发现了，这里面还包含了一个 componentMap ，它是一个对象，里面包含了全部组件的官网连接地址以及 props 信息，它大体的内容是这样的：markdown
export interface ComponentDesc {
site: string;
props?: string[];
}
export const componentMap: Record<string, ComponentDesc> = {
actionsheet: {
site: '/actionsheet',
props: ["v-model:visible=''"]
},
address: {
site: '/address',
props: ["v-model:visible=''"]
},
addresslist: {
site: '/addresslist',
props: ["data=''"]
}
...
}为了可以保持每次组件的更新都会及时同步，componentMap 这个对象的生成会经过一个本地脚本执行而后自动注入，每次在更新发布插件的时候都会去执行一次，保证和现阶段的组件以及对应的信息保持一致。这里的组件以及它所包含的信息都须要从项目目录中获取，这里的实现和后面讲的一些内容类似，你们能够先想一下实现方式，具体实现细节在后面会一块儿详解～编辑器
组件自动补全
咱们使用 NutUI 组件库进行项目开发，当咱们输入 nut- 时，编辑器会给出咱们目前组件库中包含的全部组件，当咱们使用上下键快速选中其中一个组件进行回车，这时编辑器会自动帮咱们补全选中的组件，而且可以带出当前所选组件的其中一个 props,方便咱们快速定义。
这里的实现，一样咱们须要在 vscode 的钩子函数 activate 中注册一个 Provider。
vscode.languages.registerCompletionItemProvider(files, {
provideCompletionItems,
resolveCompletionItem
})其中，provideCompletionItems ,须要输出用于自动补全的当前组件库中所包含的组件 completionItems。
const provideCompletionItems = () => {
const completionItems: vscode.CompletionItem[] = [];
Object.keys(componentMap).forEach((key: string) => {
completionItems.push(
new vscode.CompletionItem(`nut-${key}`, vscode.CompletionItemKind.Field),
new vscode.CompletionItem(bigCamelize(`nut-${key}`), vscode.CompletionItemKind.Field)
);
});
return completionItems;
};resolveCompletionItem 定义光标选中当前自动补全的组件时触发的动做，这里咱们须要从新定义光标的位置。
const resolveCompletionItem = (item: vscode.CompletionItem) => {
const name = kebabCase(<string>item.label).slice(4);
const descriptor: ComponentDesc = componentMap[name];
const propsText = descriptor.props ? descriptor.props : '';
const tagSuffix = `</${item.label}>`;
item.insertText = `<${item.label} ${propsText}>${tagSuffix}`;
item.command = {
title: 'nutui-move-cursor',
command: 'nutui-move-cursor',
arguments: [-tagSuffix.length - 2]
};
return item;
};其中， arguments表明光标的位置参数，通常咱们自动补全选中以后光标会在 props 的引号中，便于用来定义，咱们结合目前补全的字符串的规律，这里光标的位置是相对肯定的。就是闭合标签的字符串长度 -tagSuffix.length,再往前面 2 个字符的位置。即 arguments: [-tagSuffix.length - 2]。
最后，nutui-move-cursor 这个命令的执行须要在 activate 钩子函数中进行注册,并在 moveCursor 中执行光标的移动。这样就实现了咱们的自动补全功能。
const moveCursor = (characterDelta: number) => {
const active = vscode.window.activeTextEditor!.selection.active!;
const position = active.translate({ characterDelta });
vscode.window.activeTextEditor!.selection = new vscode.Selection(position, position);
};
export function activate(context: vscode.ExtensionContext) {
vscode.commands.registerCommand('nutui-move-cursor', moveCursor);
}什么？有了这些还不够？有没有更加智能化的，我不用看组件文档，照样能够轻松开发。emm～～～，固然，请听下文讲解
vetur 智能化提示
提到 vetur,熟悉 Vue 的同窗必定不陌生，它是 Vue 官方开发的插件，具备代码高亮提示、识别 Vue 文件等功能。经过借助于它，咱们能够作到本身组件库里的组件可以自动识别 props 并进行和官网同样的详细说明。
像上面同样，咱们在使用组件 Button 时，它会自动提示组件中定义的全部属性。当按上下键快速切换时，右侧会显示当前选中属性的详细说明，这样，咱们无需查看文档，这里就能够看到每一个属性的详细描述以及默认值，这样的开发简直爽到起飞～
仔细读过文档就能够了解到，vetur 已经提供给了咱们配置项，咱们只须要简单配置下便可，像这样：
//packag.json
{
...
"vetur": {
"tags": "dist/smartips/tags.json",
"attributes": "dist/smartips/attributes.json"
},
...
}tags.json 和 attributes.json 须要包含在咱们的打包目录中。当前这两个文件的内容，咱们也能够看下：
// tags.json
{
"nut-actionsheet": {
"attributes": [
"v-model:visible",
"menu-items",
"option-tag",
"option-sub-tag",
"choose-tag-value",
"color",
"title",
"description",
"cancel-txt",
"close-abled"
]
},
...
}//attributes.json
{
"nut-actionsheet/v-model:visible": {
"type": "boolean",
"description": "属性说明：遮罩层可见，默认值：false"
},
"nut-actionsheet/menu-items": {
"type": "array",
"description": "属性说明：列表项，默认值：[ ]"
},
"nut-actionsheet/option-tag": {
"type": "string",
"description": "属性说明：设置列表项标题展现使用参数，默认值：'name'"
},
...
}很明显，这两个文件也是须要咱们经过脚本生成。和前面提到的同样，这里涉及到组件以及和它们关联的信息，为了可以保持一致而且维护一份，咱们这里经过每一个组件源码下面的 doc.md 文件来获取。由于，这个文件中包含了组件的 props 以及它们的详细说明和默认值。
组件 props 详细信息
tags, attibutes, componentMap 都须要获取这些信息。
咱们首先来看看 doc.md 中都包含什么？
## 介绍
## 基本用法
...
### Prop
| 字段 | 说明 | 类型 | 默认值 |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| size | 设置头像的大小，可选值为：large、normal、small，支持直接输入数字 | String | normal |
| shape | 设置头像的形状，可选值为：square、round | String | round |
...每一个组件的 md 文档，咱们预览时是经过 vite 提供的插件 vite-plugin-md,来生成对应的 html,而这个插件里面引用到了 markdown-it 这个模块。因此，咱们如今想要解析 md 文件，也须要借助于 markdown-it 这个模块提供的 parse API.
// Function getSources
let sources = MarkdownIt.parse(data, {});
// data表明文档内容，sources表明解析出的list列表。这里解析出来的是Token列表。
在Token 中，咱们只关心 type 便可。由于咱们要的是 props，这部分对应的 Token 的 type 就是 table_open 和 table_close 中间所包含的部分。考虑到一个文档中有多个 table。这里咱们始终取第一个， 这也是要求咱们的开发者在写文档时须要注意的地方 。
拿到了中间的部分以后，咱们只要在这个基础上再次进行筛选，选出 tr_open 和 tr_close 中间的部分，而后再筛选中间 type = inline 的部分。最后取 Token 这个对象中的 content 字段便可。而后在根据上面三个文件不一样的需求作相应的处理便可。
const getSubSources = (sources) => {
let sourcesMap = [];
const startIndex = sources.findIndex((source) => source.type === TYPE_IDENTIFY_OPEN);
const endIndex = sources.findIndex((source) => source.type === TYPE_IDENTIFY_CLOSE);
sources = sources.slice(startIndex, endIndex + 1);
while (sources.filter((source) => source.type === TR_TYPE_IDENTIFY_OPEN).length) {
let trStartIndex = sources.findIndex((source) => source.type === TR_TYPE_IDENTIFY_OPEN);
let trEndIndex = sources.findIndex((source) => source.type === TR_TYPE_IDENTIFY_CLOSE);
sourcesMap.push(sources.slice(trStartIndex, trEndIndex + 1));
sources.splice(trStartIndex, trEndIndex - trStartIndex + 1);
}
return sourcesMap;
};好了，以上就是解析的所有内容了。总结起来就那么几点：
一、建立一个基于 vscode 的项目，在它提供的钩子中注册不一样行为的 command 和 languages,并实现对应的行为
二、结合 vetur,配置 packages.json
三、针对 map json 文件，须要提供相应的生成脚本，确保信息的一致性。这里解析 md 须要使用 markdown-it 给咱们提供的 parse 功能。
最后
本文从直观体验到实际使用再到实现原理分析，一步步带着你们感觉了 NutUI 和 VSCode 结合，给你们带来的福利，让你们能在开发上有了全新的体验，同时，也让咱们的组件库愈加充满了魅力。接下来，让咱们共同携手，让它发挥出更增强大的价值～
相关文档
- NutUI官网：https://nutui.jd.com/#/
- NutUI-React版：https://jelly.jd.com/article/61d3b7c47cbc44b32c1427c9
- NutUI-UI定制：https://jelly.jd.com/article/623af906f25db001d3f9dc26
- VSCode：https://code.visualstudio.com/docs
期待您的使用与反馈 ❤️~