关于前端:开发者的福利-NutUIvscode-智能提示来了

NutUI v3 版本公布至今曾经 1 年了，无论是团体外部还是内部开发者，都在各自不同的业务场景中开发应用，咱们感到自豪的同时也是压力倍增，踊跃致力修复开发者的各种 Issue，扩大组件性能，尽可能满足开发者诉求。今年以来陆续补充了多技术栈（React）、组件级 UI 定制、国际化及代码智能提醒能力。本篇将介绍代码智能提醒（Vscode 插件）的性能，并就 NutUI-Vscode 的实现给大家做一个详尽的分析。

什么是代码智能提醒？为了让大家有一个直观的意识，让咱们先来仔细观察上面两张 gif 图～

不知大家在看了下面两张图片之后有什么样的感想？很显著，咱们应用了智能提醒之后，无论是疾速查看文档，还是查看组件属性，都会很不便的进行查阅，当然开发效率上必定也有了显著的晋升。那么，让咱们快来亲自体验下吧～

Tips：NutUI 官网 - 开发工具反对，这里也有简要介绍哦~

在 vscode 中装置 nutui-vscode-extension 插件

装置 vetur 插件。不理解这个插件的这里有介绍

装置实现以上两个插件之后，重新启动咱们的 vscode , 就能够欢快的体验 NutUI 的智能提醒性能啦，是不是几乎不要太简略～

体验也完结了，是不是该跟我一起相熟相熟它的原理啦。既然是开发 vscode 插件，那首先咱们肯定是要先相熟它的开发以及调试、公布流程。一份文档送给你哦。看这里

相熟了根本的 vscode 开发流程之后，上面就追随我一步步揭开这个智能提醒性能的神秘面纱吧～

从上图能够看出，当咱们在应用 NutUI 进行开发的时候，咱们在写完一个组件 nut-button，鼠标 Hover 到组件上时，会呈现一个提醒，点击提醒能够关上 Button 组件的官网文档。咱们可疾速查看对应的 API 来应用它开发。

首先咱们须要在 vscode 生成的我的项目中，找到对应的钩子函数 activate , 在这外面注册一个 Provider, 而后针对定义好的类型文件 files 通过 provideHover 来进行解析。

const files = ['vue', 'typescript', 'javascript', 'react'];

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.languages.registerHoverProvider(files, {provideHover})
  );
}

上面咱们能够具体看看 provideHover 是如何实现的？

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 对象。

仔细的你们可能发现了，这外面还蕴含了一个 componentMap，它是一个对象，外面蕴含了所有组件的官网链接地址以及 props 信息，它大抵的内容是这样的：

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, 相熟 Vue 的同学肯定不生疏，它是 Vue 官网开发的插件，具备代码高亮提醒、辨认 Vue 文件等性能。通过借助于它，咱们能够做到本人组件库里的组件可能自动识别 props 并进行和官网一样的具体阐明。

vetur 具体介绍看这里。

像下面一样，咱们在应用组件 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;
};

好了，以上就是解析的全部内容了。总结起来就那么几点：

1、创立一个基于 vscode 的我的项目，在它提供的钩子中注册不同行为的 command 和 languages, 并实现对应的行为

2、联合 vetur, 配置 packages.json

3、针对 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

期待您的应用与反馈 ❤️~

关于前端:开发者的福利-NutUIvscode-智能提示来了

直观体验

组件库没有任何的代码提醒

组件库有了智能提醒之后

使用指南

360 全方位解读

疾速查看组件文档

组件主动补全

vetur 智能化提醒

组件 `props` 详细信息

最初

相干文档

直观体验

组件库没有任何的代码提醒

组件库有了智能提醒之后

使用指南

360 全方位解读

疾速查看组件文档

组件主动补全

vetur 智能化提醒

组件 props 详细信息

最初

相干文档

组件 `props` 详细信息