开发者的福利 - NutUI-vscode 智能提示来了

最新推荐文章于 2024-10-15 07:44:11 发布

「已注销」

最新推荐文章于 2024-10-15 07:44:11 发布

阅读量1.5k

点赞数 1

分类专栏： NutUI 文章标签：前端 vue.js vscode ui

本文链接：https://blog.csdn.net/m0_63247283/article/details/124703477

版权

NutUI v3 推出Vscode插件，提供智能提示功能，包括组件自动补全、快速查看组件文档和vetur智能化提示。安装插件后，开发者在使用NutUI时能享受便捷的代码提示，提高开发效率。插件通过解析组件文档和配置，实现实时的组件属性说明和详细信息展示。

摘要由CSDN通过智能技术生成

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

直观体验

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

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

组件库有了智能提示之后

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

使用指南

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

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

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

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

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

熟悉了基本的 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