Vscode 스마트 프롬프트 플러그인 공유: nutui-vscode-extension

이 글에서는 Vscode스마트 프롬프트 플러그인 nutui-vscode-extension을 공유하고, 이에 대한 360도 이해를 돕고, 사용 방법을 소개하겠습니다. 모두에게 도움이 되길 바랍니다!

NutUI v3 버전이 출시된 지 1년이 지났습니다. 그룹 내 내부 개발자와 외부 개발자 모두 서로 다른 비즈니스 시나리오에서 이를 개발하고 사용하고 있다는 사실이 자랑스럽긴 하지만 동시에 부담감도 두 배로 커졌습니다. 그리고 개발자의 요구 사항을 최대한 충족하기 위해 구성 요소 기능을 확장하여 다양한 문제를 해결하기 위해 적극적으로 노력하고 있습니다. 올해부터 다중 기술 스택(React), 구성 요소 수준 UI 사용자 정의, 국제화 및 코드 지능형 프롬프트 기능이 점차 추가되었습니다. 이 기사에서는 코드 지능형 프롬프트(Vscode 플러그인)의 기능을 소개하고 NutUI-Vscode 구현에 대한 자세한 분석을 제공합니다. [추천 학습: "vscode 입문 튜토리얼"]

직관적인 경험

코드 스마트 팁이란 무엇인가요? 여러분의 직관적인 이해를 돕기 위해 먼저 다음 두 개의 gif 사진을 주의 깊게 관찰해 보세요~gif 图～

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

组件库有了智能提示之后

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

使用指南

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

https://nutui.jd.com/#/ide

• 在 vscode 中安装 nutui-vscode-extension 插件

• 安装 vetur 插件。不了解这个插件的这里有介绍

安装完成以上两个插件之后，重新启动我们的 vscode ,就可以愉快的体验 NutUI 的智能提示功能啦，是不是简直不要太简单～

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

https://code.visualstudio.com/docs

熟悉了基本的 vscode 开发流程之后，下面就跟随我一步步揭开这个智能提示功能的神秘面纱吧～

360全方位解读

快速查看组件文档

从上图可以看出，当我们在使用 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

🎜컴포넌트 라이브러리에는 코드 프롬프트가 없습니다🎜🎜🎜🎜🎜🎜구성 요소 라이브러리에 스마트 프롬프트가 표시된 후🎜🎜🎜 🎜🎜안해요 지금 보고 계신지 모르겠지만 위의 두 사진을 보고 어떤 생각이 드시나요? 분명히 스마트 프롬프트를 사용한 후에는 문서를 빠르게 보거나 구성 요소 속성을 보는 것이 매우 편리할 것입니다. 물론 개발 효율성도 크게 향상될 것입니다. 그럼 직접 체험해 볼까요~🎜🎜🎜

사용 가이드

🎜🎜팁: NutUI 공식 웹사이트 - 개발 도구 지원, 여기에 간단한 소개도 있습니다~🎜🎜https :// nutui.jd.com/#/ide🎜🎜

• vscode에 nutui-vscode-extension 플러그인 설치

🎜 🎜

vetur 플러그인을 설치하세요. 이 플러그인을 모르신다면 여기에 소개가 있습니다

🎜 🎜🎜위 두 가지 설치를 완료하고 플러그인을 추가한 후 vscode를 다시 시작하면 NutUI의 스마트 프롬프트 기능도 즐겁게 경험할 수 있지 않나요? 간단해요~🎜🎜🎜체험은 끝났으니 이제 저와 함께 그 원리를 알아가실 시간이겠죠? vscode 플러그인을 개발 중이므로 먼저 개발, 디버깅 및 릴리스 프로세스를 숙지해야 합니다. 문서가 제공됩니다. 여기를 보세요: 🎜🎜https://code.visualstudio.com/docs🎜🎜🎜기본 vscode 개발 프로세스에 익숙해지면 단계별로 따라와서 이 스마트 프롬프트 기능의 신비를 밝혀보세요. 바~🎜🎜🎜🎜360 종합해석🎜🎜🎜🎜🎜🎜🎜구성 요소 문서 빠르게 보기🎜🎜🎜🎜🎜위 그림에서 볼 수 있듯이 개발을 위해 NutUI를 사용하면 nut -button, 구성 요소 위로 마우스를 가져가면 프롬프트를 클릭하여 <code>Button 구성 요소의 공식 문서를 엽니다. 해당 API를 빠르게 확인하여 이를 활용하여 개발할 수 있습니다. 🎜🎜먼저 vscode로 생성된 프로젝트에서 해당 후크 함수 activate를 찾고 여기에 Provider를 등록한 다음 Good을 정의해야 합니다. 유형 파일 file은 provideHover를 통해 구문 분석됩니다. 🎜

export interface ComponentDesc {
  site: string;
  props?: string[];
}

export const componentMap: Record<string, ComponentDesc> = {
    actionsheet: {
        site: &#39;/actionsheet&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    address: {
        site: &#39;/address&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    addresslist: {
        site: &#39;/addresslist&#39;,
        props: ["data=&#39;&#39;"]
    }
    ...
}

🎜이제 provideHover가 어떻게 구현되는지 자세히 살펴볼까요? 🎜

vscode.languages.registerCompletionItemProvider(files, {
    provideCompletionItems,
    resolveCompletionItem
})

🎜vscode에서 제공하는 API와 해당 정규 매칭을 통해 현재 Hover 줄에 포함된 구성요소를 가져온 후 이를 통해 반환합니다. 다양한 구성 요소에 해당하는 MarkDownString을 순회하고 마지막으로 vscode.Hover 개체를 반환합니다. 🎜🎜주의 깊게 본 사람이라면 여기에는 모든 구성요소의 공식 웹사이트 링크 주소와 props 정보가 포함된 개체인 comComponentMap도 포함되어 있다는 것을 알아차렸을 것입니다. 다음과 같습니다: 🎜

export interface ComponentDesc {
  site: string;
  props?: string[];
}

export const componentMap: Record<string, ComponentDesc> = {
    actionsheet: {
        site: &#39;/actionsheet&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    address: {
        site: &#39;/address&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    addresslist: {
        site: &#39;/addresslist&#39;,
        props: ["data=&#39;&#39;"]
    }
    ...
}

为了能够保持每次组件的更新都会及时同步，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 : &#39;&#39;;
  const tagSuffix = `</${item.label}>`;
  item.insertText = `<${item.label} ${propsText}>${tagSuffix}`;

  item.command = {
    title: &#39;nutui-move-cursor&#39;,
    command: &#39;nutui-move-cursor&#39;,
    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 并进行和官网一样的详细说明。

vetur详细介绍看这里

https://vuejs.github.io/vetur/guide/component-data.html#workspace-component-data

像上面一样，我们在使用组件 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 结合，给大家带来的福利，让大家能在开发上有了全新的体验，同时，也让我们的组件库越发充满了魅力。接下来，让我们共同携手，让它发挥出更加强大的价值～

更多关于VSCode的相关知识，请访问：vscode教程！！

위 내용은 Vscode 스마트 프롬프트 플러그인 공유: nutui-vscode-extension의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!