Vscode-based react component attribute prompt method and device, and computing device

Abstract

The embodiment of the present application relates to the technical field of computers, and discloses a React component attribute prompting method and device based on vscode and a computing device, the method comprises the following steps: obtaining attribute content of a React component attribute input by a user, and identifying an attribute type corresponding to the attribute content; generating an annotation file according to the attribute content, the corresponding attribute type and a preset object literal by applying a preset annotation template; generating a Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the attributes of the React component. In the above manner, the embodiment of the present application can simplify the annotation and save the development time for the developer.

Description

TECHNICAL FIELD

[0001] Embodiments of the present application relate to the technical field of computer technology, and in particular to a React component attribute prompting method and device based on vscode and a computing device. BACKGROUND

[0002] vscode (Visual Studio Code) is a free and open-source modern lightweight code editor, which supports syntax highlighting, intelligent code completion, custom hotkeys, bracket matching, code snippets, code comparison Diff, GIT and other features for almost all mainstream development languages, supports plug-in extension, and is optimized for web development and cloud application development. The software supports Win, Mac and Linux cross-platform. jsDoc is an auxiliary tool that can automatically generate application programming interface (API) documents according to the annotations in the JavaScript code according to the convention. React is a Javascript library for building user interfaces, mainly used for building user interfaces (User Interface, UI). Components are the cornerstone of React applications. In the component composition of React, according to the state, it can be divided into stateful components and stateless components.

[0003] When the vscode intelligent prompting system applies jsDoc to annotate the React component, it can only prompt the attributes of the React component. For the case that the React component has multiple attributes, according to the existing annotation method, each attribute needs to be annotated separately. If there are multiple options for the attribute type of an attribute, each option of the attribute type also needs to be annotated separately, and multiple options of the attribute type cannot be prompted at the same time. SUMMARY

[0004] In view of the above problems, embodiments of the present application provide a React component attribute prompting method and device based on vscode and a computing device, which overcome the above problems or at least partially solve the above problems.

[0005] According to an aspect of an embodiment of the present application, a method for providing a property prompt of a React component based on a vscode is provided. The method comprises: obtaining a property content of a property of a React component input by a user, and identifying a property type corresponding to the property content; generating an annotation file by applying a preset annotation template to the property content, the corresponding property type, and a preset object literal; generating a Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the property of the React component.

[0006] In an optional manner, the React component comprises at least two first properties and the property types corresponding to the first properties.

[0007] In an optional manner, the React component comprises at least one second property and at least two candidates of the property type corresponding to the second property.

[0008] In an optional manner, the preset object literal comprises a first curly brace and all properties of the React component and the property types corresponding to each property set in the first curly brace. The generating of the annotation file by applying the preset annotation template to the property content, the corresponding property type, and the preset object literal comprises: encapsulating all the property contents of the React component and the property types corresponding to each property content into the preset object literal by applying a preset rule; and generating the annotation file by applying the preset annotation template to the object literal.

[0009] In an optional manner, the annotation template comprises at least a start mark, a keyword identifier, a prompt type, a second curly brace, and an end mark. The generating of the annotation file by applying the preset annotation template to the object literal comprises: setting the object literal in the second curly brace to combine the annotation template to generate the annotation file.

[0010] In an optional manner, the generating of the annotation file by applying the preset annotation template to the property content, the corresponding property type, and the preset object literal further comprises: detecting whether the property content of each property of the React component input by the user conforms to the property type corresponding to the property in the object literal; and if not, applying a display identifier to provide an error prompt.

[0011] In an alternative manner, the generating the Javascript file code according to the React component comprises: determining the attributes and return values of the React component; and generating the Javascript file code according to the attributes and the return values of the React component.

[0012] According to another aspect of the embodiments of the present application, a React component attribute prompting device based on vscode is provided, which comprises: an attribute acquisition unit configured to acquire attribute content of a React component attribute input by a user and identify an attribute type corresponding to the attribute content; an annotation file generation unit configured to generate an annotation file according to the attribute content, the corresponding attribute type and a preset object literal by applying a preset annotation template; and a prompting unit configured to generate a Javascript file code according to the React component, generate a prompting file according to the annotation file and the Javascript file code, and prompt the attributes of the React component.

[0013] According to another aspect of the embodiments of the present application, a computing device is provided, which comprises a processor, a memory, a communication interface and a communication bus, the processor, the memory and the communication interface being capable of communicating with each other through the communication bus.

[0014] The memory is configured to store at least one executable instruction, and the executable instruction enables the processor to perform the steps of the React component attribute prompting method based on vscode.

[0015] According to another aspect of the embodiments of the present application, a computer storage medium is provided, and the storage medium stores at least one executable instruction, and the executable instruction enables the processor to perform the steps of the React component attribute prompting method based on vscode.

[0016] According to the embodiments of the present application, the attribute content of the React component attribute input by the user is acquired, and the attribute type corresponding to the attribute content is identified; the annotation file is generated according to the attribute content, the corresponding attribute type and the preset object literal by applying the preset annotation template; the Javascript file code is generated according to the React component, and the prompting file is generated according to the annotation file and the Javascript file code to prompt the attributes of the React component, so that the annotation is simplified and the development time of the developer is saved.

[0017] The above description is only a summary of the technical solutions of the embodiments of the present application. In order to enable a more thorough understanding of the technical means of the embodiments of the present application, the contents of the specification can be implemented, and in order to enable the above and other purposes, features and advantages of the embodiments of the present application to be more apparent and easy to understand, the specific embodiments of the present application are described below. BRIEF DESCRIPTION OF DRAWINGS

[0018] Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The accompanying drawings are included to provide a description of the preferred embodiments and are not meant to limit the present application. Moreover, the same reference numerals in the attached drawings indicate the same or similar components. In the drawings:

[0019] Figure 1 A flowchart of a React component attribute prompt method based on vscode provided by an embodiment of the present application is shown;

[0020] Figure 2 A prompt effect diagram of the React component attribute prompt method based on vscode provided by an embodiment of the present application is shown;

[0021] Figure 3 An error prompt diagram of the React component attribute prompt method based on vscode provided by an embodiment of the present application is shown;

[0022] Figure 4 A structure diagram of a React component attribute prompt device based on vscode provided by an embodiment of the present application is shown;

[0023] Figure 5 A structure diagram of a computing device provided by an embodiment of the present application is shown. DETAILED DESCRIPTION

[0024] Exemplary embodiments of the present application will be described below in greater detail with reference to the accompanying drawings. Although exemplary embodiments of the present application are shown in the drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided so that the present application can be more thoroughly understood and the scope of the present application can be fully conveyed to those skilled in the art.

[0025] Figure 1 A flowchart of a React component attribute prompt method based on vscode provided by an embodiment of the present application is shown. The method is executed by a server. As shown in Figure 1 The React component attribute prompt method based on vscode includes:

[0026] Step S11: Obtain the attribute content of the React component attribute input by the user, and identify the attribute type corresponding to the attribute content.

[0027] In the embodiment of the application, before step S11, the vscode is installed, and the running environment of the vscode is configured, specifically by installing a plurality of plug-ins to configure the running environment of the vscode. Then the React component is installed. In this way, the execution environment of the React component attribute prompting method based on the vscode in the embodiment of the application is completed.

[0028] In the embodiment of the application, the React component includes at least two first attributes and the attribute type corresponding to the first attribute, that is, the React component includes two or more first attributes, wherein the attribute type can be the target type of the attribute value, such as character type, integer type data, etc., or the attribute type can be a specific value. Alternatively, the React component includes at least one second attribute and at least two attribute types of the candidate items corresponding to the second attribute, that is, the attribute type of the second attribute is an enumeration type and includes a plurality of candidate items. Of course, in other embodiments of the application, the React component can include first attributes and second attributes and corresponding attribute types, and the number of included first attributes and second attributes is not limited. In step S11, after receiving the attribute content of the React component attribute input by the user, the attribute type corresponding to the input attribute content is identified according to the Javascript file code.

[0029] Step S12: According to the attribute content, the corresponding attribute type and the preset object literal, a preset annotation template is applied to generate an annotation file.

[0030] In the embodiment of the application, the preset object literal includes a first curly brace and all attributes of the React component and the attribute type corresponding to each attribute set in the first curly brace. For example, the object literal formed by the attributes of a Button component is as follows:

[0031]

[0032] Among them, type and text are attribute names, and primary, default, info, and disable are attribute type candidate items of the attribute type.

[0033] As can be seen, when a React component has two or more attributes or an attribute type has two or more candidate items, an object literal is used to represent the component attribute, and the object literal can be used directly without the need for early definition.

[0034] In step S12, all the attribute contents of the React component and the attribute types corresponding to each attribute content are encapsulated into the preset object literal according to a preset rule, and an annotation file is generated according to the object literal and a preset annotation template. The annotation template at least includes a beginning mark, a keyword identifier, a prompt type, a second curly brace and an ending mark, wherein the prompt type is represented by a command name; and the object literal is specifically set in the second curly brace to combine with the annotation template to generate the annotation file.

[0035] In the embodiment of the application, the jsDoc annotation is used, the jsDoc annotation has a beginning mark of / **, an ending mark of * / and a keyword @, a command name is set after the keyword @, and the content in the second curly brace after the command name is determined to be annotated. The annotation file in the prior art is as follows:

[0036]

[0037] That is, the React component includes two attributes a and b, and the two attributes need to be annotated respectively in the prior art, and the attribute type of the corresponding attribute is in the second curly brace. In the embodiment of the application, the object literal including all the attributes of the React component and the corresponding attribute types is set in the second curly brace to combine with the annotation template to generate the annotation file. For example, the annotation file of the React component including the two attributes a and b is as follows:

[0038]

[0039] That is, the attributes a and b and the corresponding attribute types are constructed into an object literal, and the object literal is set in the second curly brace to combine with the annotation template to generate the annotation file, which can simplify the annotation, save the development time of the developer, and improve the user experience and efficiency.

[0040] The command name in the embodiment of the application can be one of param, returns and example, and the command name can also be other command names in the jsDoc annotation, which is not limited herein.

[0041] In the embodiment of the application, whether the attribute content of each attribute of the React component input by the user conforms to the attribute type corresponding to the attribute in the object literal is also detected; if not, an error prompt is performed by using a display identifier.

[0042] Step S13: generating a Javascript file code according to the React component, generating a prompt file according to the annotation file and the Javascript file code to prompt the attributes of the React component.

[0043] In the embodiments of the present application, the properties and return value of the React component are determined, and the Javascript file code is generated according to the properties and the return value of the React component. The Javascript file code only needs to define the function of the React component, and the properties and the return value of the React component are determined, and the property type of the property does not need to be defined, and if the return value is a property, the type of the return value does not need to be defined. For example, for the preceding Button component, the generated prompt file is as follows:

[0044]

[0045] Subsequently, the properties of the React component can be prompted according to the prompt file. For example, the prompt effect obtained according to the prompt file of the Button component is as shown in Figure 2 .

[0046] The embodiments of the present application also compare the property type corresponding to the property content input by the user with the property type of the corresponding property in the React component. When it is detected that the property content of each property of the React component input by the user does not conform to the property type corresponding to the property in the object literal, the application displays an identification for error prompt. For example, a red wavy line can be used to identify the prompt of the property type input error. For example, the display effect obtained according to the following prompt file is shown in Figure 3 .

[0047]

[0048]

[0049] According to the definition of the preceding object literal, the property a and the property b are of the number type, and the property c is of the enumeration type, and specifically is a specific value 1. For the four kinds of property contents input by the user as shown in Figure 3 , the first kind of property content conforms to the property type defined in the object literal in the properties a, b and c. In the second kind of property content, the property a is empty, which does not conform to the property type defined in the predefined object literal, and a wavy line is used as the display identification for error prompt. In the third kind of property content, the property b is empty, which does not conform to the property type defined in the object literal, and a wavy line is used for error prompt. In the fourth kind of property content, the property c is 0, which does not conform to the property type defined in the object literal, and a wavy line is used for error prompt.

[0050] The method for prompting the property of the React component based on the vscode can simplify the annotation by applying the object literal, so that the same effect can be achieved without using too many annotation keywords such as @param, thereby saving the development time of the developer and improving the user experience and efficiency.

[0051] The embodiment of the application can obtain the property content of the React component property input by the user, identify the property type corresponding to the property content, generate an annotation file according to the property content, the corresponding property type and the preset object literal application, generate a Javascript file code according to the React component, and generate a prompt file according to the annotation file and the Javascript file code to prompt the property of the React component, thereby simplifying the annotation and saving the development time of the developer.

[0052] Figure 4 The structure schematic diagram of the React component property prompting device based on the vscode is shown. The React component property prompting device based on the vscode is applied to a server. As shown in the figure, the React component property prompting device based on the vscode comprises a property acquisition unit 401, an annotation file generation unit 402 and a prompt unit 403. Wherein: Figure 4

[0053] The property acquisition unit 401 is used for obtaining the property content of the React component property input by the user, and identifying the property type corresponding to the property content; the annotation file generation unit 402 is used for generating an annotation file according to the property content, the corresponding property type and the preset object literal application; and the prompt unit 403 is used for generating a Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the property of the React component.

[0054] In an optional mode, the React component comprises at least two first properties and the property types corresponding to the first properties.

[0055] In an optional mode, the React component comprises at least one second property and at least two candidates of the property type corresponding to the second property.

[0056] ​In an optional manner, the preset object literal includes a first curly bracket and all attributes of the React component and the attribute type corresponding to each attribute set in the first curly bracket, and the annotation file generation unit 402 is configured to: apply a preset rule to encapsulate all attribute contents of the React component and the attribute type corresponding to each attribute content into the preset object literal; and generate an annotation file according to the object literal.

[0057] In an optional manner, the annotation template at least includes: a beginning mark, a keyword identifier, a prompt type, a second curly bracket and an ending mark; and the annotation file generation unit 402 is configured to: set the object literal in the second curly bracket to combine the annotation template to generate the annotation file.

[0058] In an optional manner, the annotation file generation unit 402 is configured to: detect whether the attribute content of each attribute of the React component input by the user conforms to the attribute type corresponding to the attribute in the object literal; and if not, apply a display identifier to perform error prompt.

[0059] In an optional manner, the prompt unit 403 is configured to: determine the attribute and return value of the React component; and generate the Javascript file code according to the attribute of the React component and the return value.

[0060] The embodiment of the present application can simplify the annotation and save the development time of the developer by obtaining the attribute content of the attribute of the React component input by the user, identifying the attribute type corresponding to the attribute content, generating an annotation file according to the attribute content, the corresponding attribute type and a preset object literal and a preset annotation template, generating a Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the attribute of the React component.

[0061] The embodiment of the present application provides a non-volatile computer storage medium, and the computer storage medium stores at least one executable instruction, and the computer executable instruction can execute the vscode-based React component attribute prompt method in any method embodiment.

[0062] The executable instruction can be specifically used to make the processor perform the following operations:

[0063] Obtain the attribute content of the attribute of the React component input by the user, and identify the attribute type corresponding to the attribute content;

[0064] According to the attribute content, the corresponding attribute type and a preset object literal, a preset annotation template is applied to generate an annotation file;

[0065] According to the React component, a Javascript file code is generated, and according to the annotation file and the Javascript file code, a prompt file is generated to prompt the attributes of the React component.

[0066] In an optional manner, the React component includes at least two first attributes and the attribute types corresponding to the first attributes.

[0067] In an optional manner, the React component includes at least one second attribute and at least two attribute types to be selected corresponding to the second attribute.

[0068] In an optional manner, the preset object literal includes a first curly brace and all attributes of the React component and the attribute types corresponding to each attribute set in the first curly brace, and the executable instructions cause the processor to perform the following operations:

[0069] All attribute contents of the React component and the attribute types corresponding to each attribute content are applied to a preset rule to encapsulate into the preset object literal;

[0070] According to the object literal, a preset annotation template is applied to generate an annotation file.

[0071] In an optional manner, the annotation template includes at least a beginning mark, a keyword identifier, a prompt type, a second curly brace and an end mark, and the executable instructions cause the processor to perform the following operations:

[0072] The object literal is set in the second curly brace to combine with the annotation template to generate the annotation file.

[0073] In an optional manner, the executable instructions cause the processor to perform the following operations:

[0074] Detect whether the attribute content of each attribute of the React component input by the user conforms to the attribute type corresponding to the attribute in the object literal;

[0075] If not, an error prompt is applied by displaying an identifier.

[0076] In an optional manner, the executable instructions cause the processor to perform the following operations:

[0077] Determine the attributes and return values of the React component;

[0078] generating the Javascript file code according to the React component.

[0079] The embodiment of the application can obtain attribute content of a React component attribute input by a user, identify an attribute type corresponding to the attribute content, generate an annotation file according to the attribute content, the corresponding attribute type and a preset object literal application, generate Javascript file code according to the React component, and generate a prompt file according to the annotation file and the Javascript file code to prompt the attribute of the React component, thereby simplifying annotation and saving development time for developers.

[0080] The embodiment of the application provides a React component attribute prompting device based on vscode.

[0081] The embodiment of the application provides a computer program, which can be called by a processor to enable a base station device to perform the React component attribute prompting method based on vscode in any method embodiment.

[0082] The embodiment of the application provides a computer program product, which comprises a computer program stored on a computer storage medium, and the computer program comprises program instructions, which, when executed by a computer, enable the computer to perform the React component attribute prompting method based on vscode in any method embodiment.

[0083] The executable instructions can be specifically used for enabling the processor to perform the following operations:

[0084] obtaining attribute content of a React component attribute input by a user, and identifying an attribute type corresponding to the attribute content;

[0085] generating an annotation file according to the attribute content, the corresponding attribute type and a preset object literal application;

[0086] generating Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the attribute of the React component.

[0087] In an optional mode, the React component comprises at least two first attributes and the attribute types corresponding to the first attributes.

[0088] In an alternative, the React component includes at least a second attribute and at least two candidate attribute types corresponding to the second attribute.

[0089] In an alternative, the preset object literal includes a first curly bracket and all attributes of the React component and attribute types corresponding to each attribute in the first curly bracket, and the executable instructions cause the processor to perform the following operations:

[0090] apply a preset rule to encapsulate all attribute contents of the React component and the attribute types corresponding to each attribute content into the preset object literal;

[0091] generate an annotation file according to the object literal and a preset annotation template.

[0092] In an alternative, the annotation template includes at least a beginning mark, a keyword identifier, a prompt type, a second curly bracket, and an ending mark, and the executable instructions cause the processor to perform the following operations:

[0093] combine the object literal in the second curly bracket with the annotation template to generate the annotation file.

[0094] In an alternative, the executable instructions cause the processor to perform the following operations:

[0095] detect whether the attribute content of each attribute of the React component input by the user conforms to the attribute type corresponding to the attribute in the object literal;

[0096] if not, apply a display identifier to prompt an error.

[0097] In an alternative, the executable instructions cause the processor to perform the following operations:

[0098] determine the attributes and return values of the React component;

[0099] generate the Javascript file code according to the attributes of the React component and the return values.

[0100] The embodiment of the present application acquires attribute content of a React component attribute input by a user, and identifies an attribute type corresponding to the attribute content; generates an annotation file according to the attribute content, the corresponding attribute type, and a preset object literal applying a preset annotation template; generates a Javascript file code according to the React component, and generates a prompt file according to the annotation file and the Javascript file code to prompt the attribute of the React component, which can simplify annotation and save development time for developers.

[0101] Figure 5 The structure schematic diagram of the computing device provided by the embodiment of the present application is shown, and the embodiment of the present application does not limit the specific implementation of the device.

[0102] As shown in Figure 5 The computing device can include a processor 502, a communications interface 504, a memory 506, and a communications bus 508.

[0103] The processor 502, the communications interface 504, and the memory 506 can communicate with each other through the communications bus 508. The communications interface 504 is configured to communicate with network elements such as clients or other servers. The processor 502 is configured to execute the program 510, and specifically can execute the related steps in the above-mentioned React component attribute prompting method based on vs code.

[0104] Specifically, the program 510 can include program code including computer operation instructions.

[0105] The processor 502 can be a central processing unit CPU, or an application specific integrated circuit ASIC, or one or each integrated circuit configured to implement the embodiments of the present application. One or each processor included in the device can be the same type of processor, such as one or each CPU; or can be different types of processors, such as one or each CPU and one or each ASIC.

[0106] The memory 506 is configured to store the program 510. The memory 506 can include a high-speed RAM memory, and can also include a non-volatile memory such as at least one disk memory.

[0107] The program 510 can specifically be used to cause the processor 502 to perform the following operations:

[0108] obtaining attribute content of a user-inputted React component attribute, and identifying an attribute type corresponding to the attribute content;

[0109] generating an annotation file according to the attribute content, the corresponding attribute type, and a preset object literal applying a preset annotation template;

[0110] generating a Javascript file code according to the React component, and generating a prompt file according to the annotation file and the Javascript file code to prompt the attributes of the React component.

[0111] In an optional manner, the React component comprises at least two first attributes and the attribute types corresponding to the first attributes.

[0112] In an optional manner, the React component comprises at least one second attribute and at least two attribute types to be selected corresponding to the second attribute.

[0113] In an optional manner, the preset object literal comprises a first curly bracket and all attributes of the React component and the attribute types corresponding to each attribute set in the first curly bracket, and the program 510 causes the processor to perform the following operations:

[0114] encapsulating all the attribute content of the React component and the attribute type corresponding to each attribute content into the preset object literal according to a preset rule;

[0115] generating an annotation file according to the object literal applying a preset annotation template.

[0116] In an optional manner, the annotation template comprises at least a beginning mark, a keyword identifier, a prompt type, a second curly bracket, and an ending mark, and the program 510 causes the processor to perform the following operations:

[0117] combining the object literal set in the second curly bracket with the annotation template to generate the annotation file.

[0118] In an optional manner, the program 510 causes the processor to perform the following operations:

[0119] detecting whether the attribute content of each attribute of the user-inputted React component conforms to the attribute type corresponding to the attribute in the object literal;

[0120] If not, an error prompt is performed by applying a display identifier.

[0121] In an alternative way, the program 510 causes the processor to perform the following operations:

[0122] determining the attribute and the return value of the React component;

[0123] generating the Javascript file code according to the attribute and the return value of the React component.

[0124] The embodiment of the present application acquires the attribute content of the attribute of the React component input by the user, and identifies the attribute type corresponding to the attribute content; generates the annotation file according to the attribute content, the corresponding attribute type and the preset object literal applying the preset annotation template; generates the Javascript file code according to the React component, and generates the prompt file according to the annotation file and the Javascript file code to prompt the attribute of the React component, which can simplify the annotation and save the development time for the developer.

[0125] The algorithms and displays presented herein are not inherently related to any particular computer, virtual system, or other apparatus. Various general purpose systems can be used with these teachings, or with modifications thereto. In accordance with the foregoing description, various aspects of the present application are constructed in view of the descriptions set forth in this specification. Furthermore, the present application is not intended to be limited to any particular programming language. It will be appreciated that there are many programming languages that can be used to implement the teachings of the present application described herein, and any particular programming language used is intended to depend on the specific needs of the implementer.

[0126] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order to not obscure the understanding of this description.

[0127] Similarly, it is to be understood that the mechanical details of the application are sometimes grouped into single claims, which can contain several features. This is done for the convenience of the reader. However, single claims can cover several of the separate features of the different embodiments. In these cases it will be understood that a combination of the features of different claims can be used to effect yet another embodiment of the application.

[0128] Those skilled in the art will appreciate that modules in the apparatuses in the embodiments can be adapted and placed in one or more apparatuses other than the embodiments. Modules or units or components in the embodiments can be combined into one module or unit or component, and can be divided into multiple sub-modules or sub-units or sub-components. Any combination of all the features disclosed in the present specification (including the accompanying claims, abstract and drawings), and any method or apparatus so disclosed, can be taken in any combination, except that at least some of such features and / or processes or units are mutually exclusive, unless otherwise explicitly stated. Each feature disclosed in the present specification (including the accompanying claims, abstract and drawings) can be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.

[0129] It should be noted that the above-mentioned embodiments illustrate rather than limit the application, and that one skilled in the art will be able to design many alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word 'comprising' does not exclude the presence of elements or steps other than those listed in a claim. The word 'a' or 'an' preceding an element does not exclude the presence of a plurality of such elements. The application can be implemented by means of both hardware and software, and any combination thereof. In a unit claim, several devices can be listed, comprising means for performing the recited functions. The use of the word 'at least' followed by a list of one or more items does not exclude additional such items. The use of the terms at the beginning of a member of an enumeration of members does not exclude the presence of a non-recited member of said enumeration. The application can be implemented by means of both hardware and software, and any combination thereof. In a unit claim, several devices can be listed, comprising means for performing the recited functions. The use of the word 'at least' followed by a list of one or more items does not exclude additional such items. The use of the terms at the beginning of a member of an enumeration of members does not exclude the presence of a non-recited member of said enumeration.

Claims

1. A method for providing a React component property hint based on vscode, characterized in that, The method includes: Obtain the attribute content of the React component attribute input by the user, and identify the attribute type corresponding to the attribute content; The annotation file is generated by applying a preset annotation template based on the attribute content, the corresponding attribute type, and a preset object literal, including: encapsulating all the attribute content of the React component and the attribute type corresponding to each attribute content into a preset object literal using preset rules; generating the annotation file based on the object literal using a preset annotation template; the preset object literal includes a first curly brace and all the attributes of the React component set within the first curly brace, as well as the attribute type corresponding to each attribute; Generate JavaScript code based on the React component, and generate a tooltip file based on the comment file and the JavaScript code to provide tooltips for the React component's properties.

2. The method of claim 1, wherein, The React component includes at least two first attributes and the attribute type corresponding to the first attributes.

3. The method according to claim 1, characterized in that, The React component includes at least one second property and at least two candidate options of the property type corresponding to the second property.

4. The method according to claim 1, characterized in that, The annotation template shall include at least: a start marker, a keyword identifier, a prompt type, a second curly brace, and an end marker; The step of generating a comment file by applying a preset comment template based on the object literal includes: The object literal is set in the second curly braces and combined with the comment template to generate the comment file.

5. The method according to claim 1, characterized in that, The step of generating a comment file by applying a preset comment template based on the attribute content, the corresponding attribute type, and a preset object literal also includes: Detect whether the content of each attribute of the React component input by the user conforms to the attribute type corresponding to the attribute in the object literal; If not, then display an error message using the appropriate flag.

6. The method according to claim 1, characterized in that, The step of generating Javascript file code based on the React component includes: Determine the properties and return values ​​of the React component; The JavaScript file code is generated based on the properties of the React component and the return value.

7. A property hinting device for React components based on VS Code, characterized in that, The device includes: The attribute acquisition unit is used to acquire the attribute content of the React component attribute input by the user and identify the attribute type corresponding to the attribute content; The annotation file generation unit is used to generate an annotation file by applying a preset annotation template based on the attribute content, the corresponding attribute type, and a preset object literal, including: encapsulating all the attribute content of the React component and the attribute type corresponding to each attribute content into a preset object literal by applying preset rules; generating an annotation file by applying the preset annotation template based on the object literal; the preset object literal includes a first curly brace and all the attributes of the React component and the attribute type corresponding to each attribute set in the first curly brace; The prompting unit is used to generate Javascript file code based on the React component, and to generate a prompting file based on the comment file and the Javascript file code to provide prompts for the properties of the React component.

8. A computing device, characterized in that, include: The processor, memory, communication interface, and communication bus are provided, wherein the processor, memory, and communication interface communicate with each other via the communication bus. The memory is used to store at least one executable instruction that causes the processor to perform the steps of the VS Code-based React component property hint method according to any one of claims 1-6.

9. A computer storage medium, characterized in that, The storage medium stores at least one executable instruction that causes a processor to perform the steps of the VS Code-based React component property hinting method according to any one of claims 1-6.

Images