Code outline generation method and device and storage medium

Abstract

The invention discloses a code outline generation method and device and a storage medium, and belongs to the technical field of software development. Judging whether the source file belongs to a preset analysis file type or not according to the suffix of the source file name, and if yes, generating an abstract syntax tree of the source code by utilizing a code analyzer; traversing the abstract syntax tree, and selecting a corresponding data processing method according to the syntax type of each node to extract node target attribute information; and constructing a code outline tree structure according to the target attribute information of all the nodes, and transmitting the code outline tree structure as an input parameter to a rendering component for visual rendering to obtain a code outline tree. According to the method and the device, the child nodes of the code outline tree are reduced, meanwhile, the problem of high search complexity caused by direct display of'unknown 'when attributes displayed by part of nodes in code outlines provided by IDE such as VSCode have problems is solved, and the practicability and the search efficiency of the code outline tree are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of software development, and in particular to a code outline generation method, device and storage medium. Background Art

[0002] In the process of software development using programming languages ​​such as Typescript or Javascript, as the scale of the project continues to expand, the amount of code has also increased dramatically, which undoubtedly increases the difficulty of code reading and maintenance for developers. Especially when using an integrated development environment (IDE) such as VisualStudio Code (VSCode) for development, faced with a large amount of code, developers often cannot view it completely on one screen, so they need to browse by reducing the font size, scrolling frequently, etc., which undoubtedly reduces development efficiency and code readability.

[0003] To alleviate this problem, IDEs such as VSCode provide code outline functions, which aim to help developers quickly locate and navigate the code by displaying the hierarchical structure and key nodes of the code. However, the existing code outline function has many shortcomings in practical applications:

[0004] 1. The content displayed in the outline is too complicated: Although the original intention of the code outline is to simplify code reading, the code outlines provided by IDEs such as VSCode often list too many properties and nodes, making the outline itself complicated and difficult to focus. At the same time, too many nodes not only fail to effectively simplify the code structure, but also increase the difficulty of searching and understanding. For example, in some cases, the outline may contain a lot of internal implementation details or unnecessary auxiliary information. This information is not substantive for quickly understanding the code structure, but increases the cognitive burden of developers.

[0005] 2. Node display attribute problem: In the code outlines provided by IDEs such as VSCode, when there is a problem with the attributes displayed by some nodes, "unknown" will be directly displayed. This display method not only fails to provide useful information, but also increases the complexity and difficulty of finding the outline. At the same time, for developers, the appearance of "unknown" attributes not only does not help understand the code structure, but may also cause misunderstanding or confusion, thereby reducing the practicality and accuracy of the outline.

[0006] In summary, the existing code outline function still needs to be improved in solving the reading difficulties faced by developers when faced with large amounts of code. Summary of the invention

[0007] The purpose of the present invention is to provide a code outline generation method, device and storage medium to solve the problem in the prior art that the code outline display content is too complicated, and the outline has poor practicality and low accuracy due to problems with node display attributes.

[0008] To achieve the above objectives, this application adopts the following technical solutions:

[0009] A code outline generation method of the present application comprises the following steps:

[0010] Obtaining source file data, wherein the source file data includes source code, source file name and source file path;

[0011] Determine whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generate an abstract syntax tree of the source code using a code parser;

[0012] Traversing the abstract syntax tree, selecting a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes;

[0013] A code outline tree structure is constructed according to target attribute information of all nodes, and the code outline tree structure is passed as an input parameter to a rendering component for visual rendering to obtain a code outline tree.

[0014] Preferably, the method further comprises:

[0015] A custom application programming interface is configured to receive a source file path as an input parameter, and after receiving the input parameter, use a software development kit in the version control system to query the version control system for source file data corresponding to the source file path, and return the query result.

[0016] Preferably, judging whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generating an abstract syntax tree of the source code by using a code parser, comprises:

[0017] The suffix of the source file name is checked using a preset regular expression to determine whether the suffix belongs to any one of .js, .jsx, .ts or .tsx. If so, the source file is determined to be a preset parsed file type, and the source code is parsed using a TypeScript code parser to obtain a corresponding abstract syntax tree.

[0018] Preferably, traversing the abstract syntax tree and selecting a corresponding data processing method according to the syntax type of the node to extract the node target attribute information includes:

[0019] Traversing the first-level child nodes of the abstract syntax tree, and determining the data processing method corresponding to the first-level child node according to the syntax type of each first-level child node, wherein the syntax type includes import declaration, function declaration, enumeration declaration, class declaration, expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration, constructor and variable declaration;

[0020] The target attribute information of the corresponding first-level child node is extracted using the selected data processing method. The target attribute information includes a unique identifier, a name, a type icon, the corresponding first line number and last line number in the source code, the expansion status mark of the lower-level child node, and its lower-level child node list. The type icon is a display string corresponding to the syntax type.

[0021] Preferably, the extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method includes:

[0022] When the syntax type of the first-level child node is an import statement, pruning the branch where the first-level child node is located;

[0023] When the syntax type of the first-level child node is a function declaration, an enumeration declaration, or a class declaration, obtain the unique identifier, name, syntax type, and the corresponding first line number and last line number of the first-level child node in the source code, and determine whether it has a subordinate child node. According to the pre-constructed mapping relationship between the syntax type and the display string, its syntax type is converted into a corresponding display string, and when it has a subordinate child node, the expansion state mark of its subordinate child node is determined, and a list of subordinate child nodes is generated at the same time. The target attribute information of the subordinate child nodes is extracted using the selected data processing method until the target attribute information of the leaf node of the branch where the first-level child node is located is obtained.

[0024] Preferably, the extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method further includes:

[0025] When the syntax type of the first-level child node is an expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration or constructor, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number of the first-level child node in the source code, and convert its syntax type into the corresponding display string according to the pre-constructed mapping relationship between the syntax type and the display string.

[0026] Preferably, the extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method further includes:

[0027] When the syntax type of the first-level child node is a variable declaration, determine whether it is bound to an element. If it is bound to an element, traverse each bound element to obtain the unique identifier, name, syntax type and the corresponding first line number and last line number in the source code of each bound element, and convert the syntax type into a corresponding display string according to the pre-built mapping relationship between the syntax type and the display string. Otherwise, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number in the source code of the first-level child node, and convert its syntax type into a corresponding display string according to the pre-built mapping relationship between the syntax type and the display string.

[0028] Preferably, the step of constructing a code outline tree structure according to target attribute information of all nodes, and passing the code outline tree structure as an input parameter to a rendering component for visual rendering includes:

[0029] Configure target attribute information of the root node of the code outline tree, and determine the hierarchical relationship between all nodes constituting the code outline tree according to the target attribute information of the root node and the acquired target attribute information of all child nodes;

[0030] A code outline tree structure is constructed according to the hierarchical relationship, and the code outline tree structure is passed as an input parameter to a rendering component so that the rendering component performs visual rendering according to the expansion status mark of each node to generate a code outline tree, wherein the visual rendering includes scrolling, selecting, node folding and node expansion.

[0031] A code outline generating device, comprising:

[0032] An acquisition module is used to acquire source file data, wherein the source file data includes source code, source file name and source file path;

[0033] A generation module, used to determine whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generate an abstract syntax tree of the source code using a code parser;

[0034] An extraction module is used to select a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes;

[0035] The rendering module is used to construct a code outline tree structure according to the target attribute information of all nodes, and pass the code outline tree structure as an input parameter to the rendering component for visual rendering to obtain a code outline tree.

[0036] A computer-readable storage medium storing a computer program, wherein the computer program enables a computer to implement a code outline generation method as described in any one of the above when executed.

[0037] The present invention has the following beneficial effects:

[0038] First traverse the first-level child nodes in the abstract syntax tree, and then deeply traverse the first-level child nodes that need to be displayed in multiple layers. This can omit the traversal time of some irrelevant nodes and reduce the child nodes of the code outline tree. At the same time, it solves the problem of high search complexity caused by directly displaying "unknown" when there is a problem with the attributes displayed by some nodes in the code outline provided by IDEs such as VSCode, thereby improving the practicality and search efficiency of the code outline tree. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0040] Figure 1 is a flow chart of a code outline generation method provided by an embodiment of the present application;

[0041] Figure 2 It is an abstract syntax tree traversal flow chart provided by an embodiment of the present application;

[0042] Figure 3 It is a code outline tree rendering flow chart provided by an embodiment of the present application;

[0043] Figure 4 It is a structural schematic diagram of a code outline generating device provided in an embodiment of the present application;

[0044] Figure 5 It is a schematic diagram of an electronic device for implementing a code outline generation method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] To make the technical solution of the present application clearer, the present invention is further described in detail below in conjunction with the accompanying drawings and specific embodiments. The terms "first", "second", etc. in the claims and specification of the present application are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances. This is only to describe the distinction method used when describing objects with the same attributes in the embodiments of the present application. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, so that a process, method, system, product or device containing a series of units is not necessarily limited to those units, but may include other units that are not clearly listed or inherent to these processes, methods, products or devices.

[0046] like Figure 1 As shown, this embodiment provides a code outline generation method, comprising the following steps:

[0047] S110, obtaining source file data, where the source file data includes source code, source file name and source file path;

[0048] S120, judging whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generating an abstract syntax tree of the source code using a code parser;

[0049] S130, traversing the abstract syntax tree, selecting a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes;

[0050] S140 , constructing a code outline tree structure according to target attribute information of all nodes, and passing the code outline tree structure as an input parameter to a rendering component for visual rendering, to obtain a code outline tree.

[0051] In this embodiment, before generating a code outline, an OutLine component is first developed based on a software development kit (SDK) provided by a version control system (GitLab), and the OutLine component is used to provide a code outline display panel function.

[0052] Furthermore, a custom application programming interface is configured to receive a source file path as an input parameter, and after receiving the input parameter, use a software development kit in the version control system to query source file data corresponding to the source file path in the version control system and return the query result.

[0053] Use programming languages ​​such as Typescript or Javascript to customize an application programming interface (API). The function of this API is to obtain source file data under a specified path from the GitLab repository. Specifically, users call this API by entering the source file path in the self-developed OutLine component. The source file path refers to the full path of the source file in the GitLab repository, which may include the repository name, branch name, and the relative path of the source file in the repository. When the API receives the source file path, it uses the SDK provided by the GitLab repository to query the file information under the corresponding path in the GitLab repository, thereby obtaining the source code content, name, and path of the source file. After obtaining these data, the API will encapsulate them in an object named FileData, which contains the following fields: source code (content, type is string), source file name (file_name, type is string), and source file path (file_path, type is string). Finally, the API returns the FileData object that encapsulates the source file data to the OutLine component for further processing.

[0054] The customized API in this embodiment encapsulates the complex GitLab repository access logic internally and provides a simple interface to the outside world, so that developers can easily obtain the required source file data without having to deeply understand the details of GitLab's SDK or API, thereby improving development efficiency. At the same time, the API can also be seamlessly integrated with the self-developed OutLine component, making it simple and direct to obtain source file data from the GitLab repository.

[0055] Further, judging whether the source file belongs to a preset parsing file type according to the suffix of the source file name, if so, using a code parser to generate an abstract syntax tree of the source code, including:

[0056] Use the preset regular expression to check the suffix of the source file name to determine whether the suffix belongs to any of .js, .jsx, .ts or .tsx. If so, the source file is determined to be a preset parsed file type, and the TypeScript code parser is used to parse the source code to obtain the corresponding abstract syntax tree.

[0057] The preset parsed file types refer to files ending with .js, .jsx, .ts, or .tsx. Specifically, .js indicates a file containing JavaScript code, .jsx indicates a file containing JavaScript and JSX syntax, .ts indicates a file containing TypeScript code, and .tsx indicates a file containing TypeScript and JSX syntax.

[0058] The source code corresponding to this judgment logic is const isNeedParseFile= / \.(js|jsx|ts|tsx)$ / i.test(fileName), where isNeedParseFile is a Boolean variable that determines whether the source file needs to be parsed based on the extension or suffix of fileName. fileName is the same as file_name above, both representing the source file name, and uses the regular expression / \.(js|jsx|ts|tsx)$ / i to test whether fileName ends with .js, .jsx, .ts, or .tsx (case insensitive). That is, this regular expression is used to match strings ending with .js, .jsx, .ts, or .tsx, and the parts before these extensions can be anything (as long as they conform to the file name rules).

[0059] The meaning of this source code is that if fileName meets this rule, isNeedParseFile is set to true, indicating that the source file needs to be parsed; otherwise, isNeedParseFile is set to false, indicating that the source file does not need to be parsed.

[0060] When the source file belongs to the preset parsing file type, the typescript code parser in ts-morph is called to parse the code of the source file and obtain the abstract syntax tree (AST) corresponding to the source code. In ts-morph, the TypeScript code parser is implemented by encapsulating the TypeScript compiler API, which allows developers to programmatically access and operate the abstract syntax tree of TypeScript code, thereby performing various complex code analysis, conversion and generation operations. Among them, AST is a tree-like data structure used to represent the grammatical structure of the source code, and each node represents a construct in the source code, such as variable declaration, function declaration, expression statement, etc. When the source file does not belong to the preset parsing file type, the code outline tree is not rendered.

[0061] Furthermore, the abstract syntax tree is traversed, and a corresponding data processing method is selected according to the syntax type of the node to extract the node target attribute information, including:

[0062] Traverse the first-level child nodes of the abstract syntax tree, and determine the data processing method corresponding to the first-level child node according to the syntax type of each first-level child node, where the syntax types include import declaration, function declaration, enumeration declaration, class declaration, expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration, constructor and variable declaration;

[0063] The target attribute information of the corresponding first-level child node is extracted using the selected data processing method. The target attribute information includes a unique identifier, a name, a type icon, the corresponding first line number and last line number in the source code, the expansion status mark of the lower-level child node, and its lower-level child node list. The type icon is a display string corresponding to the syntax type.

[0064] After the abstract syntax tree is generated, the forEachChild method provided by ts-morph is used to traverse the first-level child nodes of the abstract syntax tree (AST), that is, its first-level child nodes. In ts-morph, forEachChild is a practical method for traversing abstract syntax tree (AST) nodes, which allows users to recursively access all child nodes of a given node and execute a specified callback function for each child node.

[0065] Specifically, Figure 2As shown, when traversing to each first-level child node, the syntax type of the first-level child node is first determined. The syntax types include import declaration (ImportDeclaration), function declaration (FunctionDeclaration), enumeration declaration (EnumDeclaration), class declaration (ClassDeclaration), expression statement (ExpressionStatement), interface declaration (InterfaceDeclaration), property declaration (PropertyDeclaration), method declaration (MethodDeclaration), type alias declaration (TypeAliasDeclaration), export declaration (ExportAssignment), constructor (Constructor) and variable declaration (VariableStatement). These are all pre-configured syntax types that can be displayed in the code outline tree, that is, nodes that do not belong to these syntax types will not be displayed in the code outline tree, and the data processing method corresponding to the node of each syntax type is pre-set. The data processing method is used to extract the target attribute information of the node. The target attribute information includes a unique identifier (i d), name (name), type icon (type), the corresponding first line number (start) and last line number (end) in the source code, the expansion status mark of the subordinate child node (canExpended) and its subordinate child node list (children:[]), where id is an externally maintained numeric variable initialized to 1. When processing a node, count will be +1. The type icon (type) is the display string corresponding to the syntax type. It should be noted here that in all data processing methods, the node.getStartLineNumber() method is called to obtain the first line number of the node in the source code, and the node.getEndLineNumber() method is called to obtain the last line number of the node in the source code. At the same time, the expansion status mark (canExpended) of the subordinate child node means that when the first-level child node has subordinate child nodes and its subordinate child nodes need to be displayed in the code outline tree and are expanded, canExpended is assigned to true, otherwise it is assigned to fasle, indicating that the node is collapsed. If there is no subordinate child node or its subordinate child nodes do not need to be displayed in the code outline tree at all, the value is empty. When the other target attribute information is not available, the corresponding value is also empty.

[0066] The conversion relationship between syntax types and display strings is pre-built, as follows:

[0067] export const AST_TYPE_ICON={

[0068] / / Map TypeScript's SyntaxKind enumeration value to a display string,

[0069] [SyntaxKind.ImportDeclaration]:'import',

[0070] / / The import declaration node is mapped to the display string 'import',

[0071] [SyntaxKind.InterfaceDeclaration]:'interface',

[0072] / / Map the interface declaration node to the display string 'interface',

[0073] [SyntaxKind.VariableStatement]:'variable',

[0074] / / Map the variable declaration node to display the string 'variable',

[0075] [SyntaxKind.TypeAliasDeclaration]:'variable',

[0076] / / Map the type alias declaration node to the display string 'variable',

[0077] [SyntaxKind.ClassDeclaration]:'class',

[0078] / / Map the class declaration node to the display string 'class',

[0079] [SyntaxKind.ExportAssignment]:'variable',

[0080] / / Map the export declaration node to the display string 'variable',

[0081] [SyntaxKind.FunctionDeclaration]:'function',

[0082] / / Map the function declaration node to the display string 'function',

[0083] [SyntaxKind.EnumDeclaration]:'enum',

[0084] / / Map the enumeration declaration node to the display string 'enum',

[0085] [SyntaxKind.Constructor]:'constructor',

[0086] / / Map the constructor node to display the string 'constructor',

[0087] [SyntaxKind.PropertyDeclaration]:'property',

[0088] / / Map the property declaration node to the display string 'property',

[0089] [SyntaxKind.MethodDeclaration]:'method',

[0090] / / Map the method declaration node to the display string 'method',

[0091] [SyntaxKind.ExpressionStatement]:'function'.

[0092] / / Map the expression node to display the string 'function'.

[0093] }.

[0094] In a first preferred embodiment, the target attribute information of the corresponding first-level sub-node is extracted using the selected data processing method, including:

[0095] When the syntax type of a first-level child node is an import statement, the branch where the first-level child node is located is trimmed.

[0096] If the syntax type of the first-level child node currently traversed is an import declaration, the branch where the first-level child node is located is directly pruned.

[0097] In the second embodiment, the target attribute information of the corresponding first-level child node is extracted using the selected data processing method, including:

[0098] When the syntax type of the first-level child node is a function declaration, an enumeration declaration, or a class declaration, obtain the unique identifier, name, syntax type, and the corresponding first line number and last line number of the first-level child node in the source code, and determine whether it has a lower-level child node. According to the mapping relationship between the syntax type and the display string constructed in advance, its syntax type is converted into a corresponding display string, and when it has a lower-level child node, the expansion state mark of its lower-level child node is determined, and a list of lower-level child nodes is generated at the same time. The target attribute information of the lower-level child nodes is extracted using the selected data processing method until the target attribute information of the leaf node of the branch where the first-level child node is located is obtained.

[0099] If the syntax type of the first-level child node currently traversed is function declaration, const name=(nodeas DeclarationNode).getName() is used to obtain the name of the first-level child node, const icon=`symbol-${AST_TYPE_ICON[type]}` is used to obtain the display string corresponding to its node type, const start=node.getStartLineNumber() and const end=node.getEndLineNumber() are used to obtain the first line number and the last line number in the source code respectively, and it is determined whether there are subordinate child nodes in the function declaration. If so, it is assumed that its subordinate child nodes should also be displayed in the code outline tree, then a flag is added to its subordinate child nodes to indicate whether it is expanded, that is, whether to assign its canExpended value to true or false, and the corresponding data processing method is used to extract the target attribute information of its subordinate child nodes. If its subordinate child node has a subordinate child node, the operation is repeated until the target attribute information of the leaf node of the branch where the first-level child node is located is obtained.

[0100] If its syntax type is an enumeration declaration or a class declaration, the difference from the above is that const name=Node.isClassDeclaration(node)||Node.isEnumDeclaration(node)?node?.getName() is used to determine whether it has a name. If not, its entire target attribute information is set to empty. If it has a name, the same method as above is used to obtain the display string corresponding to its node type and the number of first and last lines. If it has subordinate child nodes, the expansion status mark of its subordinate child nodes is determined, and a list of subordinate child nodes is generated at the same time. The target attribute information of its subordinate child nodes is extracted through the corresponding data processing method. If its subordinate child nodes have subordinate child nodes, the operation is repeated until the target attribute information of the leaf node of the branch where the first-level child node is located is obtained.

[0101] In the third embodiment, extracting target attribute information corresponding to the first-level child node using the selected data processing method also includes:

[0102] When the syntax type of the first-level child node is an expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration or constructor, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number of the first-level child node in the source code, and convert its syntax type into the corresponding display string according to the pre-built mapping relationship between the syntax type and the display string.

[0103] If the syntax type of the first-level child node currently traversed is an interface declaration, property declaration, or method declaration, after obtaining its id, name, number of first lines, and number of last lines using the same method as the function declaration in the second embodiment, directly return tree.children&&tree.children.push({id:count++,name,type:icon,start,end}) to the OutLine component without paying attention to whether it has lower-level child nodes and whether its lower-level child nodes are expanded.

[0104] If the syntax type is a constructor, different from the function declaration in the second embodiment, const name="constructor" is used to obtain the node name.

[0105] If its syntax type is a type alias declaration, different from the function declaration in the second embodiment, first use const identifier=node.getFirstDescendantByKind(SyntaxKind.Identifier) ​​to find the first node whose syntax type is SyntaxKind.Identifier in its subordinate child nodes, and then use const name=identifier?.getText() to get the name of this subordinate child node. It should be noted here that the name of this subordinate child node is the name of the current first child node.

[0106] If its syntax type is export declaration, different from the function declaration in the second embodiment, first use const identifier = (node ​​as ExportAssignment)?.getExpression() to find the identifier, and then use const name = Node.isIdentifier (identifier)? identifier.getText(): 'default' to get its name. It should be noted here that the name of this identifier is the name of the current first child node.

[0107] In the fourth embodiment, extracting target attribute information corresponding to the first-level child node using the selected data processing method also includes:

[0108] When the syntax type of the first-level child node is a variable declaration, determine whether it is bound to an element. If it is bound to an element, traverse each bound element to obtain the unique identifier, name, syntax type and the corresponding first line number and last line number in the source code of each bound element, and convert the syntax type into the corresponding display string according to the pre-built mapping relationship between the syntax type and the display string. Otherwise, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number of the first-level child node in the source code, and convert its syntax type into the corresponding display string according to the pre-built mapping relationship between the syntax type and the display string.

[0109] If the syntax type of the first-level child node currently traversed is a variable declaration, first use constisHasBindElement=variableDeclaration?.getDescendantsOfKind(SyntaxKind.BindingElement) to determine whether there is a binding element. If so, first traverse all binding elements, and use const identifier=ele.getFirstDescendantByKind(SyntaxKind.Identifier) ​​to get the first subordinate child node of the SyntaxKind.Identifier type in turn, and return the id, name, first line number and last line number of this subordinate child node until the target attribute information of all binding elements is obtained. Otherwise, directly use Const name=variableDeclaration?.getFirstDescendantByKind(SyntaxKind.Identifier)?.getText() to get the name of the first-level child node, and use the same method as in the second embodiment to get its display string, first line number and last line number.

[0110] Then, configure the target property information of the root node (root) of the code outline tree, such as setting id to -1, type to root, name to fileName, children to an empty array, and canExpended to true.

[0111] According to the target attribute information of all child nodes obtained, the hierarchical relationship between all nodes constituting the code outline tree is determined, and then the code outline tree structure is constructed according to the hierarchical relationship, which can also be called treeData. Finally, Figure 3As shown, the code outline tree structure is passed as an input parameter to the self-developed rendering component (UI Component), and the UIComponent is used to perform visual rendering according to the target attribute information of each node to generate a code outline tree. The UIComponent is developed by combining React with the Typescript programming language, and provides methods such as scrolling, selecting, node folding and node expansion.

[0112] This embodiment first traverses the first-level child nodes in the abstract syntax tree, and then deeply traverses the first-level child nodes that need to be displayed in multiple layers, which can omit the traversal time of some irrelevant nodes and reduce the child nodes of the code outline tree. At the same time, it solves the problem of high search complexity caused by directly displaying "unknown" when there is a problem with the attributes displayed by some nodes in the code outline provided by IDEs such as VSCode, thereby improving the practicality and search efficiency of the code outline tree.

[0113] like Figure 4 As shown, this embodiment also provides a code outline generating device, including:

[0114] The acquisition module is used to acquire source file data, which includes source code, source file name and source file path;

[0115] A generation module is used to determine whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, to generate an abstract syntax tree of the source code using a code parser;

[0116] An extraction module is used to select a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes;

[0117] The rendering module is used to construct a code outline tree structure according to the target attribute information of all nodes, and pass the code outline tree structure as an input parameter to the rendering component for visual rendering to obtain a code outline tree.

[0118] This embodiment is used to implement the method provided by the above embodiment, and has the corresponding beneficial effects of the above method. For technical details not fully described in this embodiment, please refer to the methods provided by all the above embodiments of the present invention.

[0119] like Figure 5 As shown, this embodiment also provides an electronic device, including a memory 501 and a processor 502, wherein the memory 501 is used to store one or more computer instructions, wherein the one or more computer instructions are executed by the processor 502 to implement the above-mentioned code outline generation method.

[0120] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the electronic device described above can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0121] This embodiment also provides a computer-readable storage medium storing a computer program, wherein the computer program enables a computer to implement the above-mentioned method for generating a code outline when the computer executes the computer program.

[0122] Exemplarily, the computer program may be divided into one or more modules / units, one or more modules / units are stored in the memory 501 and executed by the processor 502, and the input interface 505 and the output interface 506 complete the I / O interface transmission of data to complete the present invention. The one or more modules / units may be a series of computer program instruction segments that can complete specific functions, and the instruction segments are used to describe the execution process of the computer program in the computer device.

[0123] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may include, but is not limited to, a memory 501 and a processor 502. Those skilled in the art may understand that this embodiment is only an example of a computer device and does not constitute a limitation on the computer device. The computer device may include more or fewer components, or a combination of certain components, or different components. For example, the computer device may also include an input device 507, a network access device, a bus, etc.

[0124] The processor 502 may be a central processing unit (CPU), or other general-purpose processors 502, digital signal processors 502 (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor 502 may be a microprocessor 502 or the processor 502 may also be any conventional processor 502, etc.

[0125] The memory 501 may be an internal storage unit of a computer device, such as a hard disk or memory of the computer device. The memory 501 may also be an external storage device of the computer device, such as a plug-in hard disk equipped on the computer device, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. Further, the memory 501 may also include both an internal storage unit of the computer device and an external storage device. The memory 501 is used to store computer programs and other programs and data required by the computer device. The memory 501 may also be used to temporarily store in the output device 508, and the aforementioned storage medium includes various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory ROM503, a random access memory RAM504, a disk or an optical disk.

[0126] The above-mentioned embodiments only express several implementation methods of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the patent of the present invention. It should be pointed out that, for ordinary technicians in this field, several variations and improvements can be made without departing from the concept of the present invention, which all belong to the protection scope of the present invention. Therefore, the protection scope of the patent of the present invention shall be subject to the attached claims.

Claims

1. A code outline generation method, characterized in that: The following steps are involved: Obtaining source file data, wherein the source file data includes source code, source file name and source file path; Determine whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generate an abstract syntax tree of the source code using a code parser; Traversing the abstract syntax tree, selecting a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes; A code outline tree structure is constructed according to target attribute information of all nodes, and the code outline tree structure is passed as an input parameter to a rendering component for visual rendering to obtain a code outline tree.

2. A code outline generation method according to claim 1, characterized in that: The method further comprises: A custom application programming interface is configured to receive a source file path as an input parameter, and after receiving the input parameter, use a software development kit in the version control system to query the version control system for source file data corresponding to the source file path, and return the query result.

3. A code outline generation method according to claim 1, characterized in that: The determining, according to the suffix of the source file name, whether the source file belongs to a preset parsing file type, and if so, generating an abstract syntax tree of the source code by using a code parser, comprises: The suffix of the source file name is checked using a preset regular expression to determine whether the suffix belongs to any one of .js, .jsx, .ts or .tsx. If so, the source file is determined to be a preset parsed file type, and the source code is parsed using a TypeScript code parser to obtain a corresponding abstract syntax tree.

4. A code outline generation method according to claim 1, characterized in that: The traversing the abstract syntax tree and selecting a corresponding data processing method according to the syntax type of the node to extract the node target attribute information includes: Traversing the first-level child nodes of the abstract syntax tree, and determining the data processing method corresponding to the first-level child node according to the syntax type of each first-level child node, wherein the syntax type includes import declaration, function declaration, enumeration declaration, class declaration, expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration, constructor and variable declaration; The target attribute information of the corresponding first-level child node is extracted using the selected data processing method. The target attribute information includes a unique identifier, a name, a type icon, the corresponding first line number and last line number in the source code, the expansion status mark of the lower-level child node, and its lower-level child node list. The type icon is a display string corresponding to the syntax type.

5. A code outline generation method according to claim 4, characterized in that: The step of extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method includes: When the syntax type of the first-level child node is an import statement, pruning the branch where the first-level child node is located; When the syntax type of the first-level child node is a function declaration, an enumeration declaration, or a class declaration, obtain the unique identifier, name, syntax type, and the corresponding first line number and last line number of the first-level child node in the source code, and determine whether it has a subordinate child node. According to the pre-constructed mapping relationship between the syntax type and the display string, its syntax type is converted into a corresponding display string, and when it has a subordinate child node, the expansion state mark of its subordinate child node is determined, and a list of subordinate child nodes is generated at the same time. The target attribute information of the subordinate child nodes is extracted using the selected data processing method until the target attribute information of the leaf node of the branch where the first-level child node is located is obtained.

6. A code outline generation method according to claim 4, characterized in that: The step of extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method also includes: When the syntax type of the first-level child node is an expression statement, interface declaration, property declaration, method declaration, type alias declaration, export declaration or constructor, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number of the first-level child node in the source code, and convert its syntax type into the corresponding display string according to the pre-constructed mapping relationship between the syntax type and the display string.

7. A code outline generation method according to claim 4, characterized in that: The step of extracting target attribute information of the corresponding first-level sub-node by using the selected data processing method also includes: When the syntax type of the first-level child node is a variable declaration, determine whether it is bound to an element. If it is bound to an element, traverse each bound element to obtain the unique identifier, name, syntax type and the corresponding first line number and last line number in the source code of each bound element, and convert the syntax type into a corresponding display string according to the pre-built mapping relationship between the syntax type and the display string. Otherwise, directly obtain the unique identifier, name, syntax type and the corresponding first line number and last line number in the source code of the first-level child node, and convert its syntax type into a corresponding display string according to the pre-built mapping relationship between the syntax type and the display string.

8. A code outline generation method according to any one of claims 1 to 7, characterized in that: The step of constructing a code outline tree structure according to target attribute information of all nodes, and passing the code outline tree structure as an input parameter to a rendering component for visual rendering includes: Configure target attribute information of the root node of the code outline tree, and determine the hierarchical relationship between all nodes constituting the code outline tree according to the target attribute information of the root node and the acquired target attribute information of all child nodes; A code outline tree structure is constructed according to the hierarchical relationship, and the code outline tree structure is passed as an input parameter to a rendering component so that the rendering component performs visual rendering according to the expansion status mark of each node to generate a code outline tree, wherein the visual rendering includes scrolling, selecting, node folding and node expansion.

9. A code outline generating device, characterized in that: include: An acquisition module is used to acquire source file data, wherein the source file data includes source code, source file name and source file path; A generation module, used to determine whether the source file belongs to a preset parsing file type according to the suffix of the source file name, and if so, generate an abstract syntax tree of the source code using a code parser; An extraction module is used to select a corresponding data processing method according to the syntax type of each node to extract the node target attribute information, so as to obtain the target attribute information of all nodes; The rendering module is used to construct a code outline tree structure according to the target attribute information of all nodes, and pass the code outline tree structure as an input parameter to the rendering component for visual rendering to obtain a code outline tree.

10. A computer-readable storage medium storing a computer program, characterized in that: The computer program enables a computer to implement a code outline generation method according to any one of claims 1 to 8 when executed.

Images