Method and system for code completion and diagnosis of secondary development of Web side

Abstract

The present invention relates to a method and system for code completion and diagnosis of secondary development on a Web side, comprising a code editor, an adapter and at least one language server, and performing the following steps: initializing a communication request including the initial document content of the code editor, a workspace and a working directory selected by a user; a language service loads and parses a configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object; after the adapter monitors the changes of the code editor, a request is generated, and the language service updates the document content in the request to a virtual file object, and then calls the compilation service object, and according to the document content and the working directory in the virtual file object, an abstract syntax tree is established, error diagnosis is performed, error diagnosis results are generated and / or a language standard library is read to obtain an interface prompt. Advantages of the present invention: providing more comprehensive interface prompts, code completion and error diagnosis, reducing the code error rate, and improving development efficiency.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a method and system for code completion and diagnosis for secondary development of a Web terminal. Background Art

[0002] In low-code platforms, the need to use code editors for secondary development often arises. The conventional implementation method is to use some plug-ins for extension, such as codeMirror's show-hint.js ecosystem library, to perform corresponding code completion and interface prompt functions. Interface prompts help developers quickly find the required code based on the input code and the current context. Developers can select the required code from the prompted code for automatic completion, reducing the workload of manual input and improving development efficiency. However, the existing solutions have obvious defects: 1) It is impossible to diagnose code errors; 2) There is a lack of underlying language standard libraries, and interface prompts are limited; 3) For secondary development of software, it is difficult to provide effective code diagnosis and code prompts for the custom interfaces used in secondary development.

[0003] In view of the above defects, the prior art also proposes a solution of combining a code editor with a language server, and using the many functions provided by the language server to implement code prompts, code completion, and error diagnosis. However, the prior art does not provide a technical solution to solve the above problem of how to implement online interface prompts and error diagnosis on the language server for the edited content of the code editor.

[0004] Publication number CN117093224A "A code editing method, device and medium supporting TypeScript intelligent perception" proposes a method for extracting and merging TypeScript type declaration files in third-party npm packages, that is, parsing and converting the interface syntax in the nmp package, and then saving it on the back-end server. When the back-end server receives the front-end request, it returns the corresponding file to the front-end, and the front-end code editor component is responsible for the syntax parsing of the TypeScript code. This solution is suitable for processing declaration files that come with the npm package and performs syntax parsing through the front-end code editor. Therefore, for this application, it is to solve the code completion and diagnosis problems of secondary development of code on the web side. Since the code editor cannot perform compilation tasks on the web side, it is impossible to perform error diagnosis. Summary of the invention

[0005] In order to solve the above problems, the purpose of the present invention is to provide a method for code completion and diagnosis of secondary development on the Web side, provide more comprehensive interface prompts, code completion and error diagnosis, reduce code error rate and improve development efficiency.

[0006] To achieve the above object, the present invention adopts the following technical solutions:

[0007] A method for code completion and diagnosis for secondary development on the Web side, deploying a code editor, an adapter and at least one language server, wherein the code editor maintains communication with the adapter, the adapter integrates the LSP protocol, each language server corresponds to a programming language, and each language server deploys multiple workspaces, a language standard library and a compiler, and each workspace includes a configuration file and a working directory. The method performs the following steps: Initialization communication: the code editor sends an initialization request to the language server through the adapter, and the initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the language server starts the language service, and the language service loads and parses the configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object, and at the same time creates a new virtual file object in the memory according to the address of the working directory to store the initial document content. After the adapter monitors the changes of the code editor, it generates a request according to the LSP protocol, and the request includes the document content and working directory of the changed part. The language service updates the received document content to the virtual file object according to the address of the working directory. If the request also contains code diagnosis and / or code prompt instructions, the compilation service object establishes an abstract syntax tree according to the document content in the virtual file object and the working directory, performs syntax analysis, generates error diagnosis results and / or identifies the interface, reads the language standard library according to the interface, obtains interface prompts, and generates an interface prompt list that conforms to the context. The adapter receives the error diagnosis results and / or interface prompt list, and displays them in the code editor after parsing. The user completes the code and / or corrects the errors according to the interface prompt list.

[0008] Based on the same inventive concept, the present invention also provides a system for code completion and diagnosis of secondary development on the Web side, and the technical solution is as follows:

[0009] A system for code completion and diagnosis of secondary development on the Web side includes a code editor, an adapter, and at least one language server; the adapter integrates the LSP protocol, communicates between the code editor and the language server, each language server corresponds to a programming language, and each language server deploys multiple workspaces, a language standard library, and a compiler, and each workspace includes a configuration file and a working directory. The adapter and the language server perform communication initialization: the code editor sends an initialization request to the language server through the adapter, and the initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the language server starts the language service, and the language service loads and parses the configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object, and at the same time, creates a new virtual file object in the memory according to the address of the working directory to store the initial document content. The adapter monitors the changes in the content of the code editor, encapsulates the content in the code editor according to the LSP protocol, and sends a request to the language server; the adapter also receives a message from the language server, parses it into a format suitable for the code editor, and sends it to the code editor, and displays an interface prompt list and / or error prompts on the code editor; the user completes the code and corrects the error according to the interface prompt list. The language service updates the received document content to the virtual file object according to the address of the working directory. If the request also includes code diagnosis and / or code prompt instructions, the compilation service object establishes an abstract syntax tree according to the document content in the virtual file object and the working directory, performs syntax analysis, generates error diagnosis results and / or identifies the interface, reads the language standard library according to the interface, obtains interface prompts, and generates an interface prompt list that conforms to the context.

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

[0011] 1. The present invention establishes a communication connection between a code editor and a language server through an adapter, and uses the language server to complete interface prompts, code completion, and code diagnosis.

[0012] 2. The present invention deploys a dedicated workspace and configuration files and working directories under the workspace for compilation services on a language server, and combines the long connectivity and independence of websocket sessions to achieve a multi-user environment in which multiple clients can simultaneously connect to the same language server and share a workspace, and even specify a common working directory. The language server can provide independent interface prompts and diagnostic information for each client, while reducing resource consumption of the language server.

[0013] 3. The present invention deploys corresponding workspaces for projects of different business types on the language server, and then registers the secondary development class in the corresponding workspace on the language server, thereby realizing that the user-defined interface can also be recognized by the compiled service object, and obtaining more comprehensive and accurate interface prompts.

[0014] 4. The language server of the present invention can be easily expanded to support multiple languages ​​and document types by implementing the corresponding parsing and analysis logic without changing the overall system architecture. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] Figure 1 It is a schematic diagram of the initialization process of the present invention;

[0016] Figure 2 It is a schematic diagram of the continuous interaction process of the present invention;

[0017] Figure 3 It is a schematic diagram of the framework of the client and language server of the present invention. DETAILED DESCRIPTION Embodiment 1

[0018] See also Figure 1 and Figure 2 The method of code completion and diagnosis for secondary development of the Web side of the present invention performs code completion and diagnosis based on three core parts: code editor, adapter, and language server. Each language server corresponds to a programming language, and multiple workspaces, a language standard library, and a compiler are deployed on each of the language servers. The three are used in combination to realize a powerful code editing environment, including interface prompts, code completion, error diagnosis and other functions.

[0019] There are many programming languages ​​used in existing software development. TypeScript language is taken as an example to illustrate the specific implementation process of the present invention.

[0020] Code Editor: It uses the core library codemirror, which can provide code editing functions and support syntax highlighting, code folding and other editing functions.

[0021] Adapter: The core library lsp-editor-adapter is used to communicate between the code editor and the language server, and the language server protocol (LSP) is integrated into the adapter. The adapter monitors the content changes of the code editor, sends the document in the code editor or the changed part of the document to the language server, and at the same time, the adapter monitors the return message of the language server, parses the message and performs corresponding operations on the code editor according to the content of the message, such as code error marking, displaying the interface prompt list, etc. The code editor and the adapter are deployed together on the client, and the code editor and the adapter maintain a communication connection.

[0022] Language server: Use the core library typescript-language-server, use the compiler API (typescript npm package) for syntax analysis, and follow the LSP protocol. For different programming languages, the compilers used are also different. The language server deploys a language standard library, a compiler, and multiple workspaces, each of which mainly includes a tsconfig.json configuration file and a working directory. The tsconfig.json configuration file defines the root directory of the code, the compilation options, and the files to be included. The workspace is set according to the business type of the project, and custom interface files related to the business type are deployed in each workspace. For example, the financial management system, the OA system, and the ERP system belong to three different businesses respectively. When developing these systems, there will be many different interfaces. For example, the OA system has many interface APIs such as leave and clocking in, which are not available in the other two systems. Therefore, there are many contents and files in the custom interface file of the OA workspace that are different from other workspaces. The steps for deploying a custom interface file in the workspace are: before initializing communication, the custom interface file is packaged under the language server workspace, and the path of the custom interface file is written into the file directory in the configuration file of the workspace to complete the registration of the secondary development class. Therefore, when the service object is compiled to execute code prompts and diagnostic instructions, the custom interface file will be read, and then the interface recognition will be performed, so that the interface prompts related to the business type can be generated, and the interface prompts are more comprehensive. The working directory corresponds to a physical file. The working directory is specified in the request to let the language server know which document has changed. At the same time, the address of the working directory is also used as a unique identifier of the document content contained in the request.

[0023] Before initializing communication, the code editor, adapter, and language server also perform their own initialization. Code editor initialization includes operations such as initial code backfilling. Adapter initialization includes obtaining connection parameters for connecting to the language server, such as language server address, workspace, working directory, and other parameters. The initialization of the language server includes establishing a websocket connection and starting the typescript-language-server language service. Each client connects to the language server via WebSocket, and each connection is an independent WebSocket session. The language server identifies requests from different clients through WebSocket sessions.

[0024] After the initialization of the code editor, adapter, and language server is completed, initialization communication is performed, and the process is as follows: the code editor sends an initialization request to the language server through the adapter, and the initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the typescript-language-server language service loads and parses the tsconfig.json configuration file according to the address of the workspace to configure the behavior of the compiler and create a typeScript compilation service object. At the same time, the typescript-language-server language service creates a new virtual file object in memory according to the working directory to store the initial document content. The address of the working directory is used as the unique identifier of the virtual file object in memory.

[0025] After completing the above initialization work, when the user opens a file or edits a file in the code editor, the code editor generates a change event, such as text insertion or deletion. The code editor notifies the adapter through its event system. After the adapter monitors the changes in the code editor, it generates a request for the document content or the changed document content, working directory, cursor position and other information in the code editor according to the LSP protocol, and sends the request to the language server through the corresponding LSP protocol (textDocument / didChange).

[0026] The process of language server processing request is as follows: the language service updates the received document content to the virtual file object according to the address of the working directory. If the request also contains code diagnosis and / or code prompt instructions, the language service calls the compilation service object to execute the instruction. Specifically, the compilation service object establishes an abstract syntax tree according to the document content, working directory and custom interface file in the virtual file object, performs syntax analysis, including variables, functions, type definitions, imported modules, interface identification, etc., and then performs error diagnosis and obtains interface prompts. The error diagnosis includes detecting syntax errors and error types, such as syntax errors, type mismatches, undefined variables or function calls, etc. These errors will be formatted into LSP compatible diagnostic information, including the text range of the error, the error type and detailed information, generate error diagnosis results, and then return to the adapter. The interface prompt acquisition is based on the context of the current cursor position, identifies the general interface and / or custom interface, reads the language standard library, and generates an interface prompt list that conforms to the context. The list will contain information such as the suggested name, type, document comments, etc. The interface prompt list is sent to the adapter as a completion suggestion. Assist developers to quickly complete code completion.

[0027] The adapter receives the error diagnosis results and / or interface prompt list, and after parsing according to the LSP protocol, converts it into a format suitable for the code editor and displays it in the code editor, including interface prompts, errors and warnings. The interface prompt list is usually displayed in the form of a pop-up menu, and the user can select suggestions to complete the code. Error diagnosis information highlights the error location in the code editor, and the error information displays a detailed error description when the mouse hovers over it. The user selects the required interface according to the interface prompt list to complete the code and / or modify the code according to the error diagnosis results. These new editing operations will trigger the change event of the code editor, and the above process will be repeated to ensure that the content of the code editor is synchronized with the analysis of the language server. When closing the editor, the adapter disconnects the websocket connection and terminates the session of the language server. The language server will destroy the virtual file object newly created in the memory of the current session.

[0028] When multiple clients simultaneously connect to the same workspace of the same language server, each client connects to the language server via WebSocket. Each connection is an independent WebSocket session. The document content in each client's request is stored in memory, and the path of the working directory is used as the unique identifier. Taking advantage of the long connectivity and independence of the WebSocket session, in each WebSocket session, the virtual file object created by the language service and the compiler service are associated with the WebSocket session. When multiple clients access the same workspace and specify the same working directory, the memory contains multiple virtual file objects with the same identifier. The compiler service object corresponding to each client reads the document content in the virtual file object associated with the WebSocket session from the memory according to the path of the working directory, and parses it in combination with the working directory and / or custom interface file to generate a code hint list and code diagnostic results, and returns the processing results to the client through the WebSocket session. The compiler service object processes the request in which WebSocket session, and after the processing is completed, the processing result is returned to the client through which WebSocket session. The present invention utilizes the independence and long connection of WebSocket sessions, combined with the unique identification of the working directory, so that multiple clients can share the same workspace, memory space, working directory and custom interface, etc., without opening a separate container for each client, thereby reducing server resource consumption.

[0029] Based on the same inventive concept, the present invention also provides a system capable of executing the method described in the first embodiment. Embodiment 2

[0030] See also Figure 3, a code completion and diagnosis system for secondary development on the Web side, comprising a code editor, an adapter and at least one language server; the adapter integrates the LSP protocol, and communicates between the code editor and the language server, each language server corresponds to a programming language, and each of the language servers deploys multiple workspaces, a language standard library and a compiler, and each workspace includes a configuration file and a working directory; the adapter and the language server perform communication initialization: the code editor sends an initialization request to the language server through the adapter, and the initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the language server starts the language service, and the language service loads and parses the configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object, and at the same time creates a new virtual file in the memory according to the address of the working directory. The adapter monitors the content changes of the code editor, encapsulates the content in the code editor according to the LSP protocol, and sends a request to the language server; the adapter also receives the message from the language server, parses it into a format suitable for the code editor, and sends it to the code editor, and displays an interface prompt list and / or error prompt on the code editor; the user completes the code and corrects the error according to the interface prompt list; the language service updates the received document content to the virtual file object according to the address of the working directory. If the request also contains code diagnosis and / or code prompt instructions, the compilation service object establishes an abstract syntax tree according to the document content in the virtual file object and the working directory, performs syntax analysis, generates error diagnosis results and / or identifies the interface, reads the language standard library according to the interface, obtains the interface prompt, and generates an interface prompt list that conforms to the context.

[0031] More preferably, the workspace is set according to the business type of the project, and a custom interface file related to the business type is deployed in each workspace.

[0032] Preferably, the steps for deploying the custom interface file are: before initializing communication, packaging the custom interface file under the language server workspace, and writing the path of the custom interface file into the file directory in the configuration file of the workspace to complete the registration of the secondary development class; when the compilation service object executes code diagnosis and / or code prompts, the compilation service object establishes an abstract syntax tree based on the document content, working directory and custom interface file in the virtual file object, identifies the general interface and the custom interface, and when reading the language standard library, it can automatically identify the general interface and the custom interface for secondary development, and generate corresponding interface prompts.

[0033] Preferably, the code editor and the adapter are both deployed on the client. When multiple clients are connected to the same workspace of the same language server at the same time, each client is connected to the language server via WebSocket, and the document content in the request of each client is stored in the memory, and the path of the working directory is used as the unique identifier. By utilizing the long connectivity and independence of the WebSocket session, the virtual file object created by the language service and the compiler service are associated with the WebSocket session. When multiple clients access the same workspace and specify the same working directory, the memory contains multiple virtual file objects with the same identifier. The compilation service object corresponding to each client reads the document content in the virtual file object associated with the WebSocket session from the memory according to the path of the working directory, and parses it in combination with the working directory and / or custom interface file to generate a code hint list and code diagnosis results, and returns the processing results to the client via the WebSocket session.

[0034] Since the system introduced in the second embodiment of the present invention is a system for implementing the method of the first embodiment of the present invention, those skilled in the art can understand the specific implementation of the system based on the method introduced in the first embodiment of the present invention, so it is not described here in detail. All methods adopted in the first embodiment of the present invention belong to the scope of protection of the present invention.

[0035] The above description is only a specific implementation mode of the present invention, and does not limit the patent scope of the present invention. Any equivalent structural transformation made by using the contents of the present invention description and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A method for code completion and diagnosis of secondary development on the Web side, characterized by: A code editor, an adapter and at least one language server are deployed, wherein the code editor maintains communication with the adapter, the adapter integrates the LSP protocol, each language server corresponds to a programming language, each language server deploys multiple workspaces, a language standard library and a compiler, and each workspace includes a configuration file and a working directory; the method performs the following steps: Initialization communication: A websocket connection is established between the adapter and the language server. The code editor sends an initialization request to the language server through the adapter. The initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the language server starts the language service, and the language service loads and parses the configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object. At the same time, a new virtual file object is created in the memory according to the working directory address to store the initial document content. The working directory address is used as the unique identifier of the virtual file object; the code editor and the adapter are both deployed on the client. When multiple clients are connected to the same workspace of the same language server at the same time, each client is connected to the language server through WebSocket. The document content in the request of each client is stored in the memory, and the path of the working directory is used as the unique identifier. Using the long connectivity and independence of the WebSocket session, the virtual file object created by the language service and the compiler service are associated with the WebSocket session. When multiple clients access the same workspace and specify the same working directory, the memory contains multiple virtual file objects with the same identifier. The compilation service object corresponding to each client reads the WebSocket from the memory according to the path of the working directory. The document content in the virtual file object associated with the session is parsed in combination with the working directory and / or custom interface file to generate a code hint list and code diagnosis results, and the processing results are returned to the client through the WebSocket session; After the adapter monitors the changes of the code editor, it generates a request according to the LSP protocol, and the request includes the document content and the working directory of the changed part; The language service updates the received document content into the virtual file object according to the address of the working directory. If the request also includes code diagnosis and / or code prompt instructions, the compilation service object establishes an abstract syntax tree according to the document content in the virtual file object and the working directory, performs syntax analysis, generates error diagnosis results and / or identifies an interface, reads the language standard library according to the interface, obtains interface prompts, and generates an interface prompt list that conforms to the context; The adapter receives the error diagnosis result and / or the interface prompt list, parses and displays them in the code editor, and the user completes the code and / or corrects the error according to the interface prompt list.

2. The method for code completion and diagnosis of secondary development of a Web terminal according to claim 1, characterized in that: The workspace is set according to the business type of the project, and a custom interface file related to the business type is deployed in each workspace.

3. The method for code completion and diagnosis of secondary development of a Web terminal according to claim 2, characterized in that: The steps of deploying the custom interface file are as follows: before initializing communication, the custom interface file is packaged under the language server workspace, and the path of the custom interface file is written into the file directory in the configuration file of the workspace to complete the registration of the secondary development class; when the compilation service object executes code diagnosis and / or code prompts, the compilation service object establishes an abstract syntax tree according to the document content, working directory and custom interface file in the virtual file object, identifies the general interface and the custom interface, and automatically identifies the general interface and the custom interface of the secondary development when reading the language standard library, and generates corresponding interface prompts.

4. Code completion and diagnosis system for secondary development on the Web side, characterized by: It includes a code editor, an adapter and at least one language server; the adapter integrates the LSP protocol, and communicates between the code editor and the language server, each language server corresponds to a programming language, and each language server deploys multiple workspaces, a language standard library and a compiler, and each workspace includes a configuration file and a working directory; The adapter and the language server perform communication initialization: the code editor sends an initialization request to the language server through the adapter, the initialization request includes the initial document content of the code editor, the workspace and working directory selected by the user; the language server starts the language service, and the language service loads and parses the configuration file according to the address of the workspace to configure the behavior of the compiler and create a compilation service object, and at the same time creates a new virtual file object in the memory according to the address of the working directory to store the initial document content; The code editor and the adapter are both deployed on the client. When multiple clients are connected to the same workspace of the same language server at the same time, each client is connected to the language server via WebSocket. The document content in the request of each client is stored in the memory, and the path of the working directory is used as the unique identifier. By utilizing the long connectivity and independence of the WebSocket session, the virtual file object created by the language service and the compiler service are associated with the WebSocket session. When multiple clients access the same workspace and specify the same working directory, the memory contains multiple virtual file objects with the same identifier. The compiler service object corresponding to each client reads the document content in the virtual file object associated with the WebSocket session from the memory according to the path of the working directory, and parses it in combination with the working directory and / or the custom interface file to generate a code prompt list and code diagnosis results, and returns the processing results to the client via the WebSocket session. The adapter monitors changes in the content of the code editor, encapsulates the content in the code editor according to the LSP protocol, and sends a request to the language server; The adapter also receives a message from the language server, parses it into a format suitable for the code editor, and sends it to the code editor, and displays an interface prompt list and / or error prompts on the code editor; Users complete codes and modify errors according to the interface prompt list; The language service updates the received document content to the virtual file object according to the address of the working directory. If the request also includes code diagnosis and / or code prompt instructions, the compilation service object establishes an abstract syntax tree according to the document content in the virtual file object and the working directory, performs syntax analysis, generates error diagnosis results and / or identifies the interface, reads the language standard library according to the interface, obtains interface prompts, and generates an interface prompt list that conforms to the context.

5. The system for code completion and diagnosis of secondary development on the Web side according to claim 4, characterized in that: The workspace is set according to the business type of the project, and a custom interface file related to the business type is deployed in each workspace.

6. The system for code completion and diagnosis of secondary development on the Web side according to claim 5, characterized in that: The steps of deploying the custom interface file are as follows: before initializing communication, the custom interface file is packaged under the language server workspace, and the path of the custom interface file is written into the file directory in the configuration file of the workspace to complete the registration of the secondary development class; when the compilation service object executes code diagnosis and / or code prompts, the compilation service object establishes an abstract syntax tree according to the document content, working directory and custom interface file in the virtual file object, identifies the general interface and the custom interface, and automatically identifies the general interface and the custom interface of the secondary development when reading the language standard library, and generates corresponding interface prompts.

Images