[发明专利]基于vscode的React组件属性提示方法、装置及计算设备

说明书

本发明实施例涉及计算机技术领域，公开了一种基于vscode的React组件属性提示方法、装置及计算设备，该方法包括：获取用户输入的React组件属性的属性内容，并识别与所述属性内容对应的属性类型；根据所述属性内容、对应的所述属性类型以及预设的对象字面量应用预设的注释模板生成注释文件；根据所述React组件生成Javascript文件代码，根据所述注释文件以及所述Javascript文件代码生成提示文件以对所述React组件的属性进行提示。通过上述方式，本发明实施例能够简化注释，为开发者节约开发时间。

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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