基于vscode的React组件属性提示方法、装置及计算设备与流程

本发明实施例涉及计算机技术领域，具体涉及一种基于vscode的react组件属性提示方法、装置及计算设备。

背景技术：

vscode(visualstudiocode)是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比diff、git等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持win、mac以及linux。jsdoc是一款辅助工具，只需要根据约定在javascript代码中添加相应的注释，就可以根据这些注释来自动生成应用程序编程接口(applicationprogramminginterface，api)文档。react是一个用于构建用户界面的javascript库，主要用于构建用户界面(userinterface，ui)。组件是react应用程序的基石。在react的组件构成中，按照状态来分可以分为有状态组件和无状态组件。

vscode智能提示系统应用jsdoc对react组件进行注释时，只能提示react组件的属性。且对于react组件有多个属性的情况，按现有的注释方法，需要分开单独对各个属性进行注释。如果其中某个属性的属性类型有多个待选项，也需要分开单独对属性类型的各个待选项进行注释，无法同时提示属性类型的多个待选项。

技术实现要素：

鉴于上述问题，本发明实施例提供了一种基于vscode的react组件属性提示方法、装置及计算设备，克服了上述问题或者至少部分地解决了上述问题。

根据本发明实施例的一个方面，提供了一种基于vscode的react组件属性提示方法，所述方法包括：获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在一种可选的方式中，所述react组件至少包括两个第一属性以及与所述第一属性对应的所述属性类型。

在一种可选的方式中，所述react组件至少包括一个第二属性以及与所述第二属性对应的所述属性类型的至少两个待选项。

在一种可选的方式中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型，所述根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件，包括：将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；根据所述对象字面量应用预设的注释模板生成注释文件。

在一种可选的方式中，所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志；所述根据所述对象字面量应用预设的注释模板生成注释文件，包括：将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

在一种可选的方式中，所述根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件，还包括：检测用户输入的所述react组件的每个属性的所述属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；如果否，则应用显示标识进行错误提示。

在一种可选的方式中，所述根据所述react组件生成javascript文件代码，包括：确定所述react组件的属性和返回值；根据所述react组件的属性和所述返回值生成所述javascript文件代码。

根据本发明实施例的另一个方面，提供了一种基于vscode的react组件属性提示装置，所述装置包括：属性获取单元，用于获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；注释文件生成单元，用于根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；提示单元，用于根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

根据本发明实施例的另一方面，提供了一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行上述基于vscode的react组件属性提示方法的步骤。

根据本发明实施例的又一方面，提供了一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使所述处理器执行上述基于vscode的react组件属性提示方法的步骤。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

上述说明仅是本发明实施例技术方案的概述，为了能够更清楚了解本发明实施例的技术手段，而可依照说明书的内容予以实施，并且为了让本发明实施例的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了本发明实施例提供的基于vscode的react组件属性提示方法的流程示意图；

图2示出了本发明实施例提供的基于vscode的react组件属性提示方法的提示效果示意图；

图3示出了本发明实施例提供的基于vscode的react组件属性提示方法的错误提示示意图；

图4示出了本发明实施例提供的基于vscode的react组件属性提示装置的结构示意图；

图5示出了本发明实施例提供的计算设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

图1示出了本发明实施例提供的基于vscode的react组件属性提示方法的流程示意图。该方法由服务器执行。如图1所示，基于vscode的react组件属性提示方法包括：

步骤s11：获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型。

在本发明实施例中，在步骤s11之前，安装vscode，并配置vscode的运行环境，具体通过安装多个插件来配置vscode的运行环境。然后安装react组件。如此完成本发明实施例的基于vscode的react组件属性提示方法的执行环境。

在本发明实施例中，所述react组件至少包括两个第一属性以及与所述第一属性对应的属性类型，即react组件包括两个或两个以上的第一属性，其中，属性类型可以是属性取值的目标类型，如字符型、整型数据等，属性类型也可以是具体的取值。或者，所述react组件至少包括一个第二属性以及与所述第二属性对应的至少两个属性类型的待选项，即第二属性的属性类型为枚举类型，且包括多个待选项。当然在本发明的其他实施例中，react组件中可以同时包括第一属性和第二属性以及对应的属性类型，且包括的第一属性和第二属性的数量不作限制。在步骤s11中，接收到用户输入的react组件属性的属性内容后，根据javascript文件代码识别输入的属性内容对应的属性类型。

步骤s12：根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件。

在本发明实施例中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型。例如，一个button组件的属性形成的对象字面量如下：

其中，type和text为属性名，primary、default、info、disable为属性type的属性类型的待选项。

可见，react组件有两个以上属性或者某一属性的属性类型有两个以上的待选项时，用一个对象字面量来表示该组件属性，对象字面量可以直接使用，不需要提前定义。

在步骤s12中，将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；根据所述对象字面量应用预设的注释模板生成注释文件。所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志，其中，提示类型以命令名表示；具体将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

本发明实施例应用jsdoc注释，jsdoc注释以/**为开头标志、*/为结尾标志以及关键字@，命令名设置在关键字@之后，命令名后为第二花括号，第二花括号中的内容即确定要注释的内容。现有技术中的注释文件表示如下：

即react组件包括两个属性a和b，现有技术中需要对该两个属性分别进行注释，第二花括号中是对应属性的属性类型。本发明实施例将包括react组件的所有属性以及对应的属性类型的对象字面量设置在第二花括号中与注释模板结合生成注释文件。例如，包括两个属性a和b的react组件的注释文件如下：

即将属性a和b以及对应的属性类型构造成一个对象字面量，并将该对象字面量设置在第二花括号中与注释模板结合生成注释文件，可以简化注释，为开发者节约开发时间，提高用户体验和效率。

本发明实施例中的命令名可以为param、returns以及example等的其中之一，当然命令名也可以为jsdoc注释中的其他命令名，在此不作限制。

在本发明实施例中，还检测用户输入的所述react组件的每个属性的所述属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；如果否，则应用显示标识进行错误提示。

步骤s13：根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在本发明实施例中，确定所述react组件的属性和返回值；根据所述react组件的属性和所述返回值生成所述javascript文件代码。javascript文件代码只需定义react组件的功能，确定react组件的属性和返回值，不需要对属性的属性类型进行定义，如果返回值为属性时，也不需要对返回值的类型进行定义。例如，对于前面的button组件，生成的提示文件如下：

后续可以根据该提示文件对react组件的属性进行提示。例如，根据该button组件的提示文件得到的提示效果如图2所示。

本发明实施例还将用户输入的属性内容对应的属性类型与react组件中对应属性的属性类型进行比较。检测到用户输入的所述react组件的每个属性的属性内容不符合所述对象字面量中的与所述属性对应的属性类型时，应用显示标识进行错误提示。例如，可以用红波浪线标识属性类型输入错误的提示。例如，根据以下的提示文件得到的显示效果参见图3。

根据前面的对象字面量的定义可知，属性a和属性b为number类型，属性c为枚举类型，具体为一个特定的值1。对于图3中所示的用户输入的四种属性内容，第一种属性内容中属性a、b、c都符合对象字面量中定义的属性类型。而第二种属性内容中属性a为空，不符合预定义的对象字面量中定义的属性类型，应用波浪线作为显示标识进行错误提示。第三种属性内容中属性b为空，不符合对象字面量中定义的属性类型，应用波浪线进行错误提示。第四种属性内容中属性c为0，不符合对象字面量中定义的属性类型，应用波浪线进行错误提示。

本发明实施例的基于vscode的react组件属性提示方法通过应用对象字面量可以简化注释，使得不用使用过多的@param之类的注释关键词就可以达到一样效果，可以为开发者节约开发时间，提高用户体验和效率。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

图4示出了本发明实施例的基于vscode的react组件属性提示装置的结构示意图。该基于vscode的react组件属性提示装置应用于服务器。如图4所示，该基于vscode的react组件属性提示装置包括：属性获取单元401、注释文件生成单元402以及提示单元403。其中：

属性获取单元401用于获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；注释文件生成单元402用于根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；提示单元403用于根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在一种可选的方式中，所述react组件至少包括两个第一属性以及与所述第一属性对应的所述属性类型。

在一种可选的方式中，所述react组件至少包括一个第二属性以及与所述第二属性对应的所述属性类型的至少两个待选项。

在一种可选的方式中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型，注释文件生成单元402用于：将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；根据所述对象字面量应用预设的注释模板生成注释文件。

在一种可选的方式中，所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志；注释文件生成单元402用于：将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

在一种可选的方式中，注释文件生成单元402用于：检测用户输入的所述react组件的每个属性的所述属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；如果否，则应用显示标识进行错误提示。

在一种可选的方式中，提示单元403用于：确定所述react组件的属性和返回值；根据所述react组件的属性和所述返回值生成所述javascript文件代码。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

本发明实施例提供了一种非易失性计算机存储介质，所述计算机存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的基于vscode的react组件属性提示方法。

可执行指令具体可以用于使得处理器执行以下操作：

获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；

根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；

根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在一种可选的方式中，所述react组件至少包括两个第一属性以及与所述第一属性对应的所述属性类型。

在一种可选的方式中，所述react组件至少包括一个第二属性以及与所述第二属性对应的至少两个属性类型的待选项。

在一种可选的方式中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型，所述可执行指令使所述处理器执行以下操作：

将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；

根据所述对象字面量应用预设的注释模板生成注释文件。

在一种可选的方式中，所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志；所述可执行指令使所述处理器执行以下操作：

将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

在一种可选的方式中，所述可执行指令使所述处理器执行以下操作：

检测用户输入的所述react组件的每个属性的所述属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；

如果否，则应用显示标识进行错误提示。

在一种可选的方式中，所述可执行指令使所述处理器执行以下操作：

确定所述react组件的属性和返回值；

根据所述react组件的属性和所述返回值生成所述javascript文件代码。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

本发明实施例提供一种基于vscode的react组件属性提示装置，用于执行上述基于vscode的react组件属性提示方法。

本发明实施例提供了一种计算机程序，所述计算机程序可被处理器调用使基站设备执行上述任意方法实施例中的基于vscode的react组件属性提示方法。

本发明实施例提供了一种计算机程序产品，所述计算机程序产品包括存储在计算机存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行上述任意方法实施例中的基于vscode的react组件属性提示方法。

可执行指令具体可以用于使得处理器执行以下操作：

获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；

根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；

根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在一种可选的方式中，所述react组件至少包括两个第一属性以及与所述第一属性对应的所述属性类型。

在一种可选的方式中，所述react组件至少包括一个第二属性以及与所述第二属性对应的至少两个属性类型的待选项。

在一种可选的方式中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型，所述可执行指令使所述处理器执行以下操作：

将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；

根据所述对象字面量应用预设的注释模板生成注释文件。

在一种可选的方式中，所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志；所述可执行指令使所述处理器执行以下操作：

将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

在一种可选的方式中，所述可执行指令使所述处理器执行以下操作：

检测用户输入的所述react组件的每个属性的所述属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；

如果否，则应用显示标识进行错误提示。

在一种可选的方式中，所述可执行指令使所述处理器执行以下操作：

确定所述react组件的属性和返回值；

根据所述react组件的属性和所述返回值生成所述javascript文件代码。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

图5示出了本发明实施例提供的计算设备的结构示意图，本发明具体实施例并不对设备的具体实现做限定。

如图5所示，该计算设备可以包括：处理器(processor)502、通信接口(communicationsinterface)504、存储器(memory)506、以及通信总线508。

其中：处理器502、通信接口504、以及存储器506通过通信总线508完成相互间的通信。通信接口504，用于与其它设备比如客户端或其它服务器等的网元通信。处理器502，用于执行程序510，具体可以执行上述基于vscode的react组件属性提示方法实施例中的相关步骤。

具体地，程序510可以包括程序代码，该程序代码包括计算机操作指令。

处理器502可能是中央处理器cpu，或者是特定集成电路asic(applicationspecificintegratedcircuit)，或者是被配置成实施本发明实施例的一个或各个集成电路。设备包括的一个或各个处理器，可以是同一类型的处理器，如一个或各个cpu；也可以是不同类型的处理器，如一个或各个cpu以及一个或各个asic。

存储器506，用于存放程序510。存储器506可能包含高速ram存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。

程序510具体可以用于使得处理器502执行以下操作：

获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；

根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；

根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示。

在一种可选的方式中，所述react组件至少包括两个第一属性以及与所述第一属性对应的所述属性类型。

在一种可选的方式中，所述react组件至少包括一个第二属性以及与所述第二属性对应的至少两个属性类型的待选项。

在一种可选的方式中，预设的所述对象字面量包括第一花括号以及设置在所述第一花括号中的所述react组件的所有属性以及与每个属性对应的属性类型，所述程序510使所述处理器执行以下操作：

将所述react组件的所有所述属性内容以及与每个属性内容对应的所述属性类型应用预设规则封装入预设的所述对象字面量；

根据所述对象字面量应用预设的注释模板生成注释文件。

在一种可选的方式中，所述注释模板至少包括：开头标志、关键字标识、提示类型、第二花括号以及结尾标志；所述程序510使所述处理器执行以下操作：

将所述对象字面量设置在所述第二花括号中与所述注释模板结合生成所述注释文件。

在一种可选的方式中，所述程序510使所述处理器执行以下操作：

检测用户输入的所述react组件的每个属性的属性内容是否符合所述对象字面量中的与所述属性对应的属性类型；

如果否，则应用显示标识进行错误提示。

在一种可选的方式中，所述程序510使所述处理器执行以下操作：

确定所述react组件的属性和返回值；

根据所述react组件的属性和所述返回值生成所述javascript文件代码。

本发明实施例通过获取用户输入的react组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述react组件生成javascript文件代码，根据所述注释文件以及所述javascript文件代码生成提示文件以对所述react组件的属性进行提示，能够简化注释，为开发者节约开发时间。

在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。

本领域技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行顺序的限定。