Prompt implementation method and device based on code editor, equipment and medium

Abstract

The invention provides a prompt implementation method and device based on a code editor, equipment and a medium, and relates to the field of database interface application, and the method comprises the following steps: obtaining editing context information of a position where an editing cursor is located according to an input operation of a user in the code editor; sending the editing context information to a back-end service, and receiving response data from the back-end service; inserting a template code text at the current cursor position of the code editor; based on the position information of the placeholders, creating a corresponding visual decoration mark for each placeholder in a code editor, and positioning an editing cursor to an initial placeholder; and when the preset trigger event is monitored, skipping the editing cursor from the current placeholder to the target placeholder, and correspondingly updating the visual decoration marks of all the placeholders. According to the invention, the experience of code input and editing in the Web environment is improved.

Description

Technical Field

[0001] This invention relates to the field of database interface applications, and more specifically to a method, apparatus, device, and medium for implementing prompts based on a code editor. Background Technology

[0002] In the current software development and online education fields, web-based integrated development environments (IDEs) and code editors are becoming increasingly popular. Monaco Editor, as a high-performance browser-based code editor, has been widely integrated into various online programming platforms, low-code systems, and technical documentation tools. With the deepening of application scenarios, users are placing higher demands on the intelligent assistance functions of code editors, especially in the fast and accurate insertion and editing of code templates. Traditional manual input or simple code completion can no longer meet users' pursuit of coding efficiency. The market urgently needs an intelligent template input experience that can provide continuous guidance, dynamic visual feedback, and smooth navigation to narrow the gap in development experience between web code editors and mature desktop IDEs.

[0003] Existing technical solutions for code template input and assistance mainly include: First, directly utilizing MonacoEditor's native code completion interface (registerCompletionItemProvider), which provides keyword-based one-time suggestions, but is essentially a "one-time" trigger and lacks the ability to guide subsequent steps of the structured template. Second, employing the Snippet function common to code editors, allowing predefined templates with placeholders, which users can jump between using the Tab key. This solution achieves quick template insertion and basic navigation to some extent, but its template content and placeholder positions are usually statically configured on the front end, making it difficult to adjust in real time according to dynamic context or backend business logic. Third, simulating continuous completion triggers by listening to code editor events or custom commands, or temporarily generating highlight marks during insertion.

[0004] However, these existing technologies still have significant limitations and problems when dealing with complex business scenarios requiring intelligent responses. First, there is a contradiction between static templates and dynamic requirements; predefined snippets cannot flexibly adapt to changing data models, API interfaces, or user contexts. Second, the interaction flow is fragmented; native auto-completion and snippet functionality are independent of each other, failing to automatically sense the context and trigger the next relevant template suggestion after the user completes a placeholder input, resulting in inconsistent operation. Furthermore, visual feedback and state management are weak; simple placeholder highlighting easily loses synchronization after user editing, and there is a lack of real-time tracking and style update mechanisms for cursor position and placeholder content changes, easily causing users to get lost in the template structure. Summary of the Invention

[0005] In view of this, it is necessary to provide a method, apparatus, device and medium for implementing prompts based on a code editor, in order to solve the technical problems existing in the prior art that are insufficient in terms of dynamism, continuity, interactive integrity and state consistency.

[0006] To address the aforementioned technical problems, in a first aspect, the present invention provides a method for implementing code editor-based suggestions, comprising: Based on the user's input in the code editor, obtain the editing context information of the cursor position; The editing context information is sent to the backend service, and response data is received from the backend service; the response data includes template code text generated based on the editing context information and the position information of at least one placeholder; Insert the template code text at the current cursor position in the code editor; Based on the position information of the at least one placeholder, a corresponding visual decoration mark is created for each placeholder in the code editor, and the editing cursor is positioned on the initial placeholder; the initial placeholder is the placeholder corresponding to the first position information in the response data; When a preset trigger event is detected, the editing cursor is moved from the current placeholder to the target placeholder, and the visual decoration marks of all the placeholders are updated accordingly; wherein, the visual decoration mark of the placeholder corresponding to the editing cursor is a focus style.

[0007] In one possible implementation, before obtaining the editing context information of the cursor position based on the user's input in the code editor, the process includes: Get the code editor database; Create an instance of the code editor; Call the language application interface provided by the code editor database to register a custom code completion provider associated with the code editor.

[0008] In one possible implementation, obtaining the editing context information of the cursor position based on the user's input in the code editor includes: In response to the input operation, determine whether the user input character belongs to a preset trigger character set; If the input character belongs to the preset trigger character set, the custom code completion provider is invoked to obtain the editing context information; the editing context information includes the cursor position information of the editing cursor and the context code based on the cursor position.

[0009] In one possible implementation, the preset trigger event includes a cursor position change event; the step of jumping the editing cursor from the current placeholder to the target placeholder and updating the visual decoration marks of all the placeholders accordingly includes: When the cursor position change event is detected, the placeholder that the editing cursor newly enters is determined to be the target placeholder; Update the visual decorative mark of the current placeholder from the focused style to the non-focused style, and update the visual decorative mark of the target placeholder from the non-focused style to the focused style.

[0010] In one possible implementation, the preset trigger event includes a navigation jump instruction associated with a preset shortcut key; the step of jumping the editing cursor from the current placeholder to the target placeholder and updating the visual decoration marks of all the placeholders accordingly further includes: When the navigation jump instruction is detected, the next placeholder of the current placeholder is determined as the target placeholder based on the pre-stored placeholder order. Update the visual decorative mark of the current placeholder from the focused style to the non-focused style, and update the visual decorative mark of the target placeholder from the non-focused style to the focused style.

[0011] One possible implementation also includes: Determine whether the next placeholder is configured to allow code completion. If so, retrieve the editing context information at the location of the editing cursor again, and then retrieve and insert the next template code text based on the content already entered at the target placeholder.

[0012] One possible implementation also includes: When editing of the content within any of the placeholders is detected, the target position information of the affected placeholder is calculated based on the edited code content; Adjust the display range of the visual decorative mark according to the target location information.

[0013] Secondly, the present invention also provides a code editor-based suggestion implementation device, comprising: The acquisition module is used to obtain the editing context information of the cursor position based on the user's input operations in the code editor; The request feedback module is used to send the editing context information to the backend service and receive response data from the backend service; the response data includes template code text generated based on the editing context information and the position information of at least one placeholder; An insertion module is used to insert the template code text at the current cursor position in the code editor; The prompt creation module is used to create a corresponding visual decoration mark for each placeholder in the code editor based on the position information of the at least one placeholder, and to position the editing cursor to the initial placeholder; the initial placeholder is the placeholder corresponding to the first position information in the response data; The prompt update module is used to jump the editing cursor from the current placeholder to the target placeholder when a preset trigger event is detected, and update the visual decoration mark of all the placeholders accordingly; wherein the visual decoration mark of the placeholder corresponding to the editing cursor is a focus style.

[0014] Thirdly, the present invention also provides an electronic device, including a memory and a processor, wherein, The memory is used to store programs; The processor, coupled to the memory, is used to execute the program stored in the memory to implement the steps in the code editor-based prompting method described in any of the above implementations.

[0015] Fourthly, the present invention also provides a computer-readable storage medium for storing a computer-readable program or instructions, which, when executed by a processor, can implement the steps in the code editor-based prompting implementation method described in any of the above implementations.

[0016] The beneficial effects of this invention are as follows: The code editor-based suggestion implementation method provided by this invention first generates a template through in-depth analysis of the code context by a backend service, changing the traditional method of mechanically matching keywords in code snippets. The completion results are more accurate and better match the developer's current intent. The template structure is visualized through placeholders, and the system automatically locates the first item to be filled. Upon listening to a preset trigger event, the editing cursor jumps from the current placeholder to the target placeholder, and the visual decoration marks of all placeholders are updated accordingly, greatly reducing the cognitive burden and operation time associated with cursor movement and understanding the code structure. Furthermore, dynamic visual feedback (real-time updates of focus styles) ensures that the user always clearly understands the current editing point, avoiding incorrect placement in complex templates, providing a consistent experience, reducing the error rate, and forming a seamless closed loop from front-end triggering to back-end generation and back to front-end rendering and interaction, thus improving the code input and editing experience in the web environment. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 A schematic flowchart of an embodiment of the code editor-based suggestion implementation method provided by the present invention; Figure 2 A schematic flowchart illustrating another embodiment of the code editor-based suggestion implementation method provided by the present invention; Figure 3 For the present invention Figure 1 A schematic diagram of an embodiment of S101; Figure 4 For the present invention Figure 1 A schematic diagram of an embodiment of S105; Figure 5 For the present invention Figure 1 Another embodiment of the process diagram of S105; Figure 6 A schematic flowchart illustrating another embodiment of the code editor-based suggestion implementation method provided by the present invention; Figure 7 A schematic flowchart illustrating another embodiment of the code editor-based suggestion implementation method provided by the present invention; Figure 8 A schematic diagram of an embodiment of the code editor-based prompting device provided by the present invention; Figure 9 A schematic diagram of an embodiment of the electronic device provided by the present invention. Detailed Implementation

[0019] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present invention, and not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0020] In the description of the embodiments of the present invention, unless otherwise stated, "multiple" means two or more. "And / or" describes the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can represent three situations: A exists alone, A and B exist simultaneously, and B exists alone.

[0021] The terms "first," "second," etc., used in the embodiments of this invention are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a technical feature defined with "first" or "second" may explicitly or implicitly include at least one of that feature.

[0022] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of the invention. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.

[0023] Before demonstrating the embodiments, the following terms will be explained.

[0024] Monaco Editor is a high-performance, embeddable web-based code editor library. It is the underlying code editor component of the desktop development tool Visual Studio Code (VS Code).

[0025] The purpose of registerCompletionItemProvider is to register a completion provider for a specific language. When the user types, the editor will call this provider to get completion suggestions.

[0026] Template code refers to a structured code framework or pattern dynamically generated by a backend service. It is not a complete program, but a "semi-finished product" containing fixed text and variable parts (placeholders), designed to quickly generate code under a specific pattern.

[0027] Placeholders are special markers (such as ${1:table_name}) embedded in template code to identify variable areas that require subsequent user editing or filling. Each placeholder has a unique identifier and an optional default tooltip text. Placeholders act as interactive anchors, transforming static template text into a series of interactive editing tasks. The system uses placeholders for cursor positioning, visual highlighting, and navigation.

[0028] This invention provides a method, apparatus, device, and medium for implementing prompts based on a code editor, which will be described in detail below.

[0029] Figure 1 This is a schematic flowchart of an embodiment of the code editor-based suggestion implementation method provided by the present invention, as shown below. Figure 1As shown, the methods for implementing code editor suggestions include: S101. Based on the user's input in the code editor, obtain the editing context information of the cursor position.

[0030] It should be noted that the following methods are used: The code editor's API (such as VS Code's vscode.window.activeTextEditor, Monaco Editor's getPosition()) are used to monitor user input behavior in real time (such as typing characters, triggering shortcut keys, pausing input, etc.). The current cursor position (line number, column number) and local context information are extracted to obtain the editing context information.

[0031] S102. Send the editing context information to the backend service and receive response data from the backend service; the response data includes template code text generated based on the editing context information and position information of at least one placeholder.

[0032] It's important to note that the frontend sends the editing context information from S101 to the backend service via HTTP / HTTPS requests or WebSocket connections. The backend service deploys a code generation model (such as a large language model (LLM), rule engine, AST analyzer, or hybrid system) that intelligently infers the user's intent based on the editing context information and generates template code text and a placeholder structure array. The decoupled placeholder array includes the position information of at least one placeholder. In other words, after receiving the editing context information, the backend service uses a syntax parser (such as an ANTLR syntax tree for a specific language) and a context analysis module to analyze the code snippet, identifying semantic information such as code structure, variable types, and function calls. Based on the analysis results, it matches or dynamically generates the most relevant code template from the template rule base. The parts of the template that require subsequent user input are marked as placeholders (e.g., ${1: tableName}). The backend constructs response data, which includes `templateText` (the template string) and a placeholder structure array `placeholders` (an array where each element describes the start and end row and column positions of a placeholder).

[0033] S103. Insert the template code text at the current cursor position in the code editor.

[0034] It should be noted that after the front-end receives the response data, it inserts the templateText at the current cursor position using the executeEdits method of the code editor or the insertText property of the completion provider. This operation replaces any trigger characters that may have been entered and ensures that the code is formatted correctly.

[0035] S104. Based on the position information of the at least one placeholder, create a corresponding visual decoration mark for each placeholder in the code editor, and position the editing cursor to the initial placeholder; the initial placeholder is the placeholder corresponding to the first position information in the response data.

[0036] It's important to note that the process involves iterating through the `placeholders` array, creating a `Range` object for the start and end positions of each placeholder, and then calling the `createDecorationsCollection` or `deltaDecorations` method of the code editor to append a specific CSS class name (such as `monaco-placeholder`) to these ranges. The first position (starting position) in the `placeholders` array is read, and the cursor is moved to that position using the code editor's `setPosition` method. Optionally, the text within that placeholder can be selected using the `setSelection` method, allowing users to directly replace the input.

[0037] S105. When a preset trigger event is detected, the editing cursor is moved from the current placeholder to the target placeholder, and the visual decoration marks of all the placeholders are updated accordingly; wherein, the visual decoration mark of the placeholder corresponding to the editing cursor is a focus style.

[0038] It's important to note that registering a listener for a preset trigger event allows the system to compare the current cursor position with the range of all placeholders to determine the target placeholder. Once the target placeholder is identified, `setPosition` is called to move the cursor to the beginning of the target placeholder. The visual decoration tag corresponding to the target placeholder is set to a focused CSS class (such as `monaco-placeholder-active`, which is usually more prominent), while the visual decoration tags of all other placeholders are set or restored to non-focused CSS classes. In other words, by setting the CSS class name of each placeholder's visual decoration tag, and defining visual styles such as background color and border, the target placeholder is highlighted in the code editor, while other placeholders are not highlighted.

[0039] In summary, the code editor-based suggestion implementation method provided by this invention first generates a template through deep analysis of the code context by a backend service, changing the traditional method of mechanically matching keywords in code snippets. This results in more accurate completion results that better match the developer's current intent. The template structure is visualized using placeholders, and the system automatically locates the first item to be filled. Upon listening to a preset trigger event, the editing cursor jumps from the current placeholder to the target placeholder, and the visual decorations of all placeholders are updated accordingly. This significantly reduces the cognitive burden of cursor movement and code structure understanding, as well as the operation time. Furthermore, dynamic visual feedback (real-time updates to focus styles) ensures that the user always clearly understands the current editing point, preventing incorrect placement in complex templates, providing a seamless experience, and reducing the error rate. Moreover, the entire process, from front-end triggering to backend generation and back to front-end rendering and interaction, forms a seamless closed loop, improving the code input and editing experience in the web environment.

[0040] How to correctly import and initialize a professional code editing environment for a web page, and successfully mount a custom intelligent auto-completion capability for it, providing the necessary software foundation and extension entry point for subsequent implementation of context-aware template interaction. In some embodiments of the present invention, such as Figure 2 As shown, before step S101, the following steps are included: S201. Obtain the code editor database.

[0041] It's important to note that a code editor database typically refers to a code repository or software package. In practice, this is accomplished during the project build phase using package management tools. For example, in a Node.js-based front-end project, a dependency on `monaco-editor` is declared in the `package.json` file, and it's downloaded from a remote repository (such as npmjs.com) and installed into the local project's `Node_modules` directory using the `npm install` or `yarn add` command. Alternatively, it can be done through... <script>标签直接引入官方或自托管的CDN链接，将代码编辑器数据库的全局变量（如monaco）载入浏览器运行环境。

[0042] S202、创建所述代码编辑器对应实例。

[0043] 需要说明的是：在Web页面中，预先定义一个用于承载代码编辑器的HTML容器元素（如）。在JavaScript初始化代码中，调用已加载的代码编辑器数据库提供的函数。通过调用函数将指定容器转换为一个可编辑的代码区域，根据配置项初始化代码编辑器的核心功能（语法高亮、基础补全、撤销重做等）。返回一个代码编辑器实例对象，后续所有操作（插入文本、监听事件、注册功能）都通过调用该代码编辑器实例对象的方法进行。

[0044] S203、调用所述代码编辑器数据库提供的语言应用程序接口，注册与所述代码编辑器相关联的自定义代码补全提供器。

[0045] 需要说明的是：在S202之前，或者在S202之后，调用代码编辑器数据库的语言注册API，注册与代码编辑器相关联的自定义代码补全提供器。

[0046] 本实施例中，通过使用成熟的代码编辑器数据库（如Monaco），直接获得了工业级的代码编辑、渲染和性能基础，避免了从头造轮子的巨大成本和风险。同时，标准的实例化与API接口为后续定制化扩展（如本方案的智能模板）提供了明确、稳定的接入点。进一步的，通过环境准备（S201）、UI载体创建（S202）和核心业务能力注入（S203）三个阶段实现功能解耦与系统初始化，确保了在开始交互式智能补全之前，所有必要的软件组件和自定义逻辑都已就绪，避免了运行时错误。

[0047] 为了在Web代码编辑器中，精准、及时地感知用户需要智能辅助的意图，并自动、完整地捕获当前编程现场的上下文信息，为后续的智能分析与模板生成提供可靠输入源。在本发明的一些实施例中，如图3所示，步骤S101包括：S301、响应于所述输入操作，判断用户输入字符是否属于预设触发字符集。

[0048] 需要说明的是：在代码编辑器实例上，配置并监听用户输入事件。通常通过调用代码编辑器数据库提供的API实现，例如，在Monaco Editor中，可以配置editor.onKeyDown事件监听器，或更常见地，通过在注册自定义补全提供器时设置triggerCharacters属性。当任意键盘输入事件发生时，系统会捕获输入的字符。程序将捕获的字符与一个预定义的触发字符集进行比对。触发字符集通常是一个数组，如[‘.’，(‘a’，‘b’，…‘z’）]，定义了哪些输入可能意味着用户需要代码提示。如果输入的字符存在于触发字符集中，则判定为有效触发，流程继续，否则，忽略此次输入，代码编辑器按默认行为处理。

[0049] S302、若所述输入字符属于所述预设触发字符集，调用所述自定义代码补全提供器以获取所述编辑上下文信息；所述编辑上下文信息包括所述编辑光标的光标位置信息以及以所述光标位置为基准的上下文代码。

[0050] 需要说明的是：一旦判定为有效触发，代码编辑器内核会自动调用之前注册的自定义代码补全提供器的核心方法（例如provideCompletionItems）。在被调用的自定义代码补全提供器内部，执行以下信息采集操作：通过代码编辑器模型API，如model.getOffsetAt(position)或直接获取position对象，得到编辑光标精确的行号和列号作为光标位置信息。以光标位置为基准，使用model.getValueInRange()等方法，获取光标前（或前后）一定范围内的代码字符串作为上下文代码。光标前（或前后）一定范围内的代码字符串可以是当前行、上一个单词或一个语法块。将上述光标位置和代码片段封装成一个结构化的数据对象，即得到编辑上下文信息。

[0051] 本实施例中，通过S301的预设字符集判断，系统只在高概率需要智能辅助的时刻才启动后续复杂的分析和网络请求，避免了用户每输入一个字符就弹出提示框的干扰，提升了交互的清爽度和系统性能。进一步的，一旦确定输入字符属于预设触发字符集，触发调用自定义代码补全提供器以获取编辑上下文信息，确保捕获的编辑上下文信息是精确且完整的。光标位置提供了编辑光标的坐标数据，而围绕编辑光标的代码片段提供了语义环境，为后端服务提供了足够的信息来准确推断用户的即时编程意图（例如，是想补全一个方法、一个参数还是一个变量名），从而为生成高度相关的模板打下坚实基础。进一步的，整个S101流程（S301+S302）利用了代码编辑器（如Monaco）提供的标准补全扩展接口，使得触发-采集机制与代码编辑器原生行为无缝融合，响应迅速且符合开发者预期。

[0052] 用户通过鼠标或方向键自由移动光标时，为了自动识别其意图进入的新编辑区域（占位符），并即时、准确地切换视觉高亮焦点，从而实现灵活的定位引导。在本发明的一些实施例中，所述预设触发事件包括光标位置变更事件；如图4所示，步骤S105包括：S401、当监听到所述光标位置变更事件时，确定所述编辑光标新进入的占位符为所述目标占位符。

[0053] 需要说明的是：在创建代码编辑器实例并完成模板插入后，调用代码编辑器提供的API注册光标位置监听器。以Monaco Editor为例，调用光标位置监听器函数editor.onDidChangeCursorPosition(listenerFunction)。光标位置监听器函数会在每一次光标位置变化后（无论是通过鼠标点击、键盘方向键还是程序控制）被自动调用。在光标位置监听器函数被触发时，其回调参数中包含了最新的光标位置（一个包含lineNumber和column的对象）。系统将这个新位置与内存中维护的当前模板所有占位符的位置范围数组（该数组来源于后端响应的placeholders或indexesInfo数据）进行遍历和比对。遍历检查新的光标位置是否落在某个占位符的起始行 / 列与结束行 / 列所定义的矩形文本范围内。一旦找到某个占位符的范围包含了新光标位置，该占位符即被判定为光标新进入的区域，从而被确定为本次光标位置变更事件的目标占位符。如果光标移出了所有占位符范围，则目标占位符可视为空（null）。

[0054] S402、将所述当前占位符的所述视觉装饰标记从所述聚焦样式更新为非聚焦样式，将所述目标占位符的所述视觉装饰标记从所述非聚焦样式更新为所述聚焦样式。

[0055] 需要说明的是：在CSS或代码编辑器的样式配置中，预先定义两种样式类，例如".focused-placeholder”（聚焦样式，可能具有亮色背景和实线边框）和".normal-placeholder”（非聚焦样式，可能具有浅色背景或虚线边框）。系统需要知道当前正在应用聚焦样式的占位符（即当前占位符）的视觉装饰标记ID。调用代码编辑器的视觉装饰标记更新API（如在Monaco中为editor.deltaDecorations）。该API接收两个参数，这两个参数包括一个旧视觉装饰标记ID的数组（包含当前占位符的视觉装饰标记ID），以及一个新的装饰配置数组。新的装饰配置数组中包含两项，一项是为目标占位符的范围应用.focused-placeholder类。另一项是为旧的当前占位符的范围重新应用.normal-placeholder类（如果光标移出所有占位符，则可能仅移除非聚焦样式）。此API调用会原子性地完成样式切换，即将当前占位符的视觉装饰标记从聚焦样式更新为非聚焦样式，将目标占位符的视觉装饰标记从非聚焦样式更新为聚焦样式，确保视觉上无闪烁且瞬间完成焦点转移。

[0056] 本实施例中，通过监听光标位置变更事件，一旦监听到光标位置变更事件，则将编辑光标跳转至目标占位符，并将当前占位符的视觉装饰标记从聚焦样式更新为非聚焦样式，将目标占位符的视觉装饰标记从非聚焦样式更新为聚焦样式，允许用户通过最自然的鼠标点击或键盘方向键，自由地将编辑焦点切换到模板中的任何一个占位符，极大地增强了交互的灵活性和用户控制感。通过监听每一次微小的光标移动，系统能够实时地、像素级精确地更新视觉高亮，使得用户看到的高亮区域与光标实际所在的编辑位置始终保持绝对同步，提供了所见即所得的强视觉引导，有效防止在多个占位符间产生混淆。进一步的，通过S402的先移除旧焦点，再应用新焦点的批量更新操作，维持界面状态一致性，避免了同时存在多个聚焦样式的混乱状态，确保了在任何时刻都只有一个明确的视觉焦点，使界面清晰、稳定。

[0057] 为了在不同占位符之间快速切换编辑焦点，以替代低效的鼠标点击或方向键移动，从而实现键盘驱动的流水线式编辑操作。在本发明的一些实施例中，所述预设触发事件包括与预设快捷键相关联的导航跳转指令；如图5所示，步骤S105还包括：S501、当监听到所述导航跳转指令时，基于预存的占位符顺序，确定所述当前占位符的下一个占位符为所述目标占位符。

[0058] 需要说明的是：在代码编辑器初始化阶段，可以通过调用代码编辑器的addCommand和addKeybindingRule等API，将一个自定义命令（如editor.completeSnippet）绑定到特定的键盘快捷键上（通常为Tab键）。当用户按下该键盘快捷键时，代码编辑器内核会拦截默认行为（如插入制表符），转而执行绑定的自定义命令函数。在该自定义命令函数被触发执行时，首先查询系统当前维护的当前占位符状态。当前占位符状态是一个指针或索引，明确指示光标当前聚焦于哪个占位符（例如，索引为1，指向第二个占位符）。系统访问预存的占位符顺序列表，占位符顺序列表是一个有序数组，在插入模板时根据后端返回的indexesInfo顺序创建并保存。基于当前占位符的索引，计算出其下一个占位符的索引，即目标占位符的索引nextIndex。计算逻辑通常为：nextIndex=(currentIndex+1)%totalCount，即如果当前占位符是占位符顺序列表中的最后一个时，按下快捷键将自动循环跳转回列表中的第一个占位符。根据计算出的nextIndex，从占位符顺序列表中取得对应的占位符位置信息，该占位符即被确定为本次导航的目标占位符。

[0059] S502、将所述当前占位符的所述视觉装饰标记从所述聚焦样式更新为非聚焦样式，将所述目标占位符的所述视觉装饰标记从所述非聚焦样式更新为所述聚焦样式。

[0060] 需要说明的是：调用代码编辑器的setPosition和setSelection方法，将编辑光标从当前占位符的起始位置，精确移动并选中目标占位符的起始位置，使得用户的键盘输入将直接作用于新的占位符（即目标占位符）。与响应光标位置变更事件类似，系统调用代码编辑器的视觉装饰标记更新API（如deltaDecorations），将当前占位符（跳转前焦点）的范围，重新应用非聚焦样式的CSS类（如.placeholder-normal）。并为目标占位符（跳转后焦点）的范围，应用聚焦样式的CSS类（如.placeholder-focused）。在完成视觉更新后，系统立即将内部维护的当前占位符状态值更新为目标占位符的标识（即更新索引指针），确保系统状态与界面显示完全同步，为下一次导航做好准备。

[0061] 本实施例中，将导航动作绑定到Tab等高频快捷键，创造了符合用户肌肉记忆的一键跳转体验，用户无需将手离开键盘去移动鼠标，即可在占位符间快速穿梭，将分散的编辑点串联成流畅的流水线，极大提升了模板填充的效率，实现高效、无感的顺序导航。进一步的，与自由光标移动不同，基于预定义占位符顺序的编辑光标跳转提供了确定性的导航路径，用户每按一次快捷键，编辑光标焦点都会准确移向下一个预定位置，消除了在复杂模板中手动寻找下一个输入点的认知负荷，使编辑过程变得有条不紊、可预测，而且将物理跳转（光标移动）与视觉反馈（样式切换）以及状态更新在一个指令周期内完成，用户获得的是按下快捷键->光标瞬间移位->高亮同步跟随的一体化流畅反馈，提升用户的操作控制感与界面可靠性。

[0062] 在基于模板的引导式编码过程中，各步骤之间相互独立、缺乏智能联动。为了解决这一问题，在本发明的一些实施例中，如图6所示，还包括：S601、判断所述下一个占位符是否被配置为允许触发代码提示。

[0063] 需要说明的是：占位符是否允许触发代码提示的配置，是由后端服务在生成模板时预先定义并下发的。该配置信息通常作为元数据，随占位符的位置信息一同返回。例如，在indexesInfo数组中，每个占位符的描述对象可能包含一个triggerTip布尔字段：{"index”：[0，14，0，20]，"triggerTip”：true}。当导航跳转完成，光标已定位至目标占位符（即S601或SS502的下一个占位符）后，系统会立即检查该目标占位符对应的triggerTip属性。若triggerTip的值为true，则判定为该目标占位符允许并期望触发下一轮智能提示，流程进入S602；若为false或未定义，则流程终止，等待用户手动输入。

[0064] S602、若是，重新获取所述编辑光标所在位置的所述编辑上下文信息，以获取并插入基于所述目标占位符处已输入内容的下一模板代码文本。

[0065] 需要说明的是：S602中的编辑光标所在位置即新的目标占位符的起始位置。需要获取新的上下文代码，并非仅指该目标占位符内的文本，而是指包含了用户在当前模板中所有已输入或已修改内容的最新完整代码快照。具体操作为调用editor.getModel().getValue()获取当前代码编辑器中的全部代码文本。光标位置即为新的目标占位符的起始位置，以此构建的、包含了用户已填信息的全新编辑上下文信息作为输入，自动、无缝地重新执行从S101开始的完整流程，将新的编辑上下文信息发送至后端服务。后端服务基于这个包含了部分已填模板的新的编辑上下文信息进行更深度的分析，生成与当前进度匹配的下一模板代码文本。前端接收并插入这个新的下一模板代码文本。下一模板代码文本将拥有自己独立的占位符和视觉标记，从而开启又一个插入-高亮-跳转的循环。

[0066] 本实施例中，在确定下一个占位符被配置为允许触发代码提示时，重新获取编辑光标所在位置的编辑上下文信息，以获取并插入基于目标占位符处已输入内容的下一模板代码文本，将单次模板插入升级为链式、上下文感知工作流，不仅能引导用户填写一个模板，还能根据用户已填写的内容，智能地推荐并展开下一步该写什么，实现了多步骤编码任务的自动化衔接，将开发效率提升了一个数量级，实现真正的连续与智能引导。进一步的，通过将用户在当前模板中的编辑成果作为新上下文的输入，后端服务能够进行更深层次、更具针对性的代码分析与推理，使得后续生成的下一模板代码文本不再是孤立的，而是与用户之前的操作强相关，大幅提高代码编辑建议的精准度和有用性。进一步的，用户的操作（填写一个占位符并跳转）与系统的响应（自动给出下一步建议）形成了一个紧密的交互闭环，为用户提供无缝的对话式编程体验。

[0067] 由于在智能模板的占位符内进行自由编辑时，因代码文本长度变化而导致后续所有视觉高亮标记位置发生偏移、从而失去精准引导作用。为了解决上述问题，在本发明的一些实施例中，如图7所示，还包括：S701、当检测到对任一所述占位符内的内容进行编辑时，根据编辑后的代码内容计算受影响占位符的目标位置信息。

[0068] 需要说明的是：在代码编辑器初始化时，注册对内容变更的监听器。以MonacoEditor为例，通过editor.getModel().onDidChangeContent(event)监听。当事件触发时，从回调参数event中可获取变更的详细信息，包括变更范围（range）和变更文本（text）。将变更事件的range起始位置（即编辑发生的位置）与内存中所有占位符的原始位置范围进行比对。如果该起始位置落在某个占位符（假设为占位符A）的范围内，则判定为对占位符内容进行了编辑。分析变更内容。event.text是插入的新字符串，而被替换的旧文本长度可从event.range计算得出。长度变化量（Δ）=新文本长度 - 旧文本长度。例如，用户输入了5个字符（Δ=+5），或删除了3个字符（Δ=-3）。由于源代码是线性文本，占位符A内容的长度变化，会导致其之后的所有文本（包括其他占位符）的绝对行、列坐标发生偏移。遍历所有占位符的位置数组，对于每一个在占位符A之后的占位符，根据其原始位置和长度变化量Δ，重新计算其新的起止行号与列号，生成目标位置信息。

[0069] S702、根据所述目标位置信息调整所述视觉装饰标记的显示范围。

[0070] 需要说明的是：基于S701计算出的目标位置信息数组，为每一个位置发生变化的占位符，创建一个新的装饰器配置对象。该对象包含了更新后的文本范围和应用的样式类（聚焦或非聚焦）。调用代码编辑器的视觉装饰标记更新API（如Monaco的editor.deltaDecorations）。将所有需要更新的旧视觉装饰标记的ID以及对应的新配置数组一次性传入该API。API调用后，代码编辑器会立即、无闪烁地更新屏幕上所有高亮块的显示位置。同时，系统将内存中维护的占位符位置信息同步更新为计算后的目标位置信息，确保内部状态与视觉表现一致，为下一次事件监听提供正确基准。

[0071] 本实施例中，通过实时追踪文本变化并重新计算，确保了无论用户如何增删修改，视觉引导（高亮框）都能准确固定在正确的代码区域上，避免编辑后视觉标记错位或失效，实现了真正动态、精确的视觉交互。而且，保证了整个智能模板引导流程的连续性不被破坏，用户可以放心地在任何占位符内自由编辑，不必担心编辑光标显示在错误的地方，维持了引导式编辑的信任感和流畅度，提升用户体验。

[0072] 为了更好地实施本发明实施例中的基于代码编辑器的提示实现方法，在基于代码编辑器的提示实现方法基础之上，对应的，如图8所示，本发明实施例还提供了一种基于代码编辑器的提示实现装置800，基于代码编辑器的提示实现装置800包括：获取模块801，用于根据用户在代码编辑器中的输入操作，获取编辑光标所在位置的编辑上下文信息；请求反馈模块802，用于将所述编辑上下文信息发送至后端服务，并接收来自所述后端服务的响应数据；所述响应数据包括基于所述编辑上下文信息生成的模板代码文本和至少一个占位符的位置信息；插入模块803，用于在所述代码编辑器的当前光标位置插入所述模板代码文本；提示创建模块804，用于基于所述至少一个占位符的位置信息，在所述代码编辑器中为每个占位符创建对应的视觉装饰标记，并将所述编辑光标定位至初始占位符；所述初始占位符为所述响应数据中第一个位置信息所对应的占位符；提示更新模块805，用于当监听到预设触发事件时，将所述编辑光标从当前占位符跳转至目标占位符，并相应更新所有所述占位符的视觉装饰标记；其中，所述编辑光标所对应的占位符的所述视觉装饰标记为聚焦样式。

[0073] 上述实施例提供的基于代码编辑器的提示实现装置800可实现上述基于代码编辑器的提示实现方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述基于代码编辑器的提示实现方法实施例中的相应内容，此处不再赘述。

[0074] 如图9所示，本发明还相应提供了一种电子设备900。该电子设备900包括处理器901、存储器902及显示器903。图9仅示出了电子设备900的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

[0075] 处理器901在一些实施例中可以是一中央处理器（Central Processing Unit，CPU），微处理器或其他数据处理芯片，用于运行存储器902中存储的程序代码或处理数据，例如本发明中的基于代码编辑器的提示实现方法。

[0076] 在一些实施例中，处理器901可以是单个服务器或服务器组。服务器组可为集中式或分布式的。在一些实施例中，处理器901可为本地的或远程的。在一些实施例中，处理器901可实施于云平台。在一实施例中，云平台可包括私有云、公共云、混合云、社区云、分布式云、内部间、多重云等，或以上的任意组合。

[0077] 存储器902在一些实施例中可以是电子设备900的内部存储单元，例如电子设备900的硬盘或内存。存储器902在另一些实施例中也可以是电子设备900的外部存储设备，例如电子设备900上配备的插接式硬盘，智能存储卡（Smart Media Card，SMC），安全数字（Secure Digital，SD）卡，闪存卡（Flash Card）等。

[0078] 进一步地，存储器902还可既包括电子设备900的内部储存单元也包括外部存储设备。存储器902用于存储安装电子设备900的应用软件及各类数据。

[0079] 显示器903在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED（Organic Light-Emitting Diode，有机发光二极管）触摸器等。显示器903用于显示电子设备900的信息以及用于显示可视化的用户界面。电子设备900的部件901-903通过系统总线相互通信。

[0080] 在一实施例中，当处理器901执行存储器902中的基于代码编辑器的提示实现程序时，可实现以下步骤：根据用户在代码编辑器中的输入操作，获取编辑光标所在位置的编辑上下文信息；将所述编辑上下文信息发送至后端服务，并接收来自所述后端服务的响应数据；所述响应数据包括基于所述编辑上下文信息生成的模板代码文本和至少一个占位符的位置信息；在所述代码编辑器的当前光标位置插入所述模板代码文本；基于所述至少一个占位符的位置信息，在所述代码编辑器中为每个占位符创建对应的视觉装饰标记，并将所述编辑光标定位至初始占位符；所述初始占位符为所述响应数据中第一个位置信息所对应的占位符；当监听到预设触发事件时，将所述编辑光标从当前占位符跳转至目标占位符，并相应更新所有所述占位符的视觉装饰标记；其中，所述编辑光标所对应的占位符的所述视觉装饰标记为聚焦样式。

[0081] 应当理解的是：处理器901在执行存储器902中的基于代码编辑器的提示实现程序时，除了上面的功能之外，还可实现其它功能，具体可参见前面相应方法实施例的描述。

[0082] 进一步地，本发明实施例对提及的电子设备900的类型不做具体限定，电子设备900可以为手机、平板电脑、个人数字助理(personaldigital assistant，PDA)、可穿戴设备、膝上型计算机(laptop)等便携式电子设备。便携式电子设备的示例性实施例包括但不限于搭载IOS、android、microsoft或者其他操作系统的便携式电子设备。上述便携式电子设备也可以是其他便携式电子设备，诸如具有触敏表面(例如触控面板)的膝上型计算机(laptop)等。还应当理解的是，在本发明其他一些实施例中，电子设备900也可以不是便携式电子设备，而是具有触敏表面(例如触控面板)的台式计算机。

[0083] 相应地，本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质用于存储计算机可读取的程序或指令，程序或指令被处理器执行时，能够实现上述各方法实施例提供的基于代码编辑器的提示实现方法中的步骤或功能。

[0084] 本领域技术人员可以理解，实现上述实施例方法的全部或部分流程，可以通过计算机程序来指令相关的硬件（如处理器，控制器等）来完成，计算机程序可存储于计算机可读存储介质中。其中，计算机可读存储介质为磁盘、光盘、只读存储记忆体或随机存储记忆体等。

[0085] 以上对本发明所提供的基于代码编辑器的提示实现方法、装置、设备及介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。< / script>

Claims

1. A code editor based hint implementation method, characterized in that, The method comprises the following steps: According to the input operation of the user in the code editor, the editing context information at the position of the editing cursor is obtained; Send the editing context information to the backend service and receive the response data from the backend service; the response data includes template code text and position information of at least one placeholder generated based on the editing context information; Insert the template code text at the current cursor position of the code editor; Based on the position information of the at least one placeholder, create a corresponding visual decoration mark for each placeholder in the code editor, and position the editing cursor to the initial placeholder; The initial placeholder is the placeholder corresponding to the first position information in the response data; When a preset trigger event is detected, the editing cursor jumps from the current placeholder to the target placeholder, and the visual decoration marks of all the placeholders are updated accordingly; wherein the visual decoration mark of the placeholder corresponding to the editing cursor is in focus style.

2. The code editor based hint implementation method of claim 1, wherein, Before the step of obtaining the editing context information at the position of the editing cursor according to the input operation of the user in the code editor, the method further comprises the following steps: Obtain the code editor database; Create a corresponding instance of the code editor; Call the language application program interface provided by the code editor database to register the custom code completion provider associated with the code editor.

3. The code editor based hint implementation method of claim 2, wherein, The step of obtaining the editing context information at the position of the editing cursor according to the input operation of the user in the code editor comprises the following steps: In response to the input operation, determine whether the user input character belongs to the preset trigger character set; If the input character belongs to the preset trigger character set, call the custom code completion provider to obtain the editing context information; the editing context information includes the cursor position information of the editing cursor and the context code based on the cursor position.

4. The code editor based hint implementation method of claim 1, wherein, The preset trigger event includes a cursor position change event; the step of jumping the editing cursor from the current placeholder to the target placeholder and updating the visual decoration marks of all the placeholders accordingly comprises the following steps: When the cursor position change event is detected, determine that the placeholder newly entered by the editing cursor is the target placeholder; Update the visual decoration mark of the current placeholder from the focus style to the non-focus style, and update the visual decoration mark of the target placeholder from the non-focus style to the focus style.

5. The code editor based hint implementation method of claim 1, wherein, The preset trigger event includes a navigation jump instruction associated with a preset shortcut key; the step of jumping the editing cursor from the current placeholder to the target placeholder and updating the visual decoration marks of all the placeholders accordingly further comprises the following steps: When the navigation jump instruction is detected, determine the next placeholder of the current placeholder as the target placeholder based on the pre-stored placeholder sequence; Update the visual decoration mark of the current placeholder from the focus style to the non-focus style, and update the visual decoration mark of the target placeholder from the non-focus style to the focus style.

6. The code editor based hint implementation method of claim 5, wherein, Further comprising the following steps: Determine whether the next placeholder is configured to allow triggering code prompt; If yes, reacquire the editing context information at the position of the editing cursor to acquire and insert the next template code text based on the input content at the target placeholder.

7. The code editor based hint implementation method according to any one of claims 1 to 6, characterized in that, Also comprising: When detecting editing of the content within any of the placeholders, calculating the target position information of the affected placeholder according to the edited code content; Adjusting the display range of the visual decoration mark according to the target position information.

8. An apparatus for implementing a hint based on a code editor, the apparatus comprising: Comprising: An acquisition module, configured to acquire editing context information at the position of an editing cursor according to input operations of a user in a code editor; A request feedback module, configured to send the editing context information to a backend service and receive response data from the backend service; the response data includes template code text generated based on the editing context information and position information of at least one placeholder; An insertion module, configured to insert the template code text at the current cursor position of the code editor; A prompt creation module, configured to create a corresponding visual decoration mark for each placeholder in the code editor based on the position information of the at least one placeholder, and position the editing cursor to an initial placeholder; The initial placeholder is the placeholder corresponding to the first position information in the response data; A prompt update module, configured to jump the editing cursor from a current placeholder to a target placeholder when a preset trigger event is detected, and update the visual decoration marks of all the placeholders accordingly; wherein the visual decoration mark of the placeholder corresponding to the editing cursor is in a focus style.

9. An electronic device, comprising: Comprising a memory and a processor, wherein, The memory is configured to store a program; The processor is coupled with the memory and is configured to execute the program stored in the memory to implement the steps in the code editor-based prompt implementation method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, A computer readable program or instruction for storing, which can implement the steps in the code editor-based prompt implementation method of any one of claims 1 to 7 when executed by a processor.

Images