当前位置：首页 > news >正文

Monaco 多行提示的实现方式

news 2025/7/26 10:01:06

AI 代码助手最近太火爆，国内有模型厂商都有代码助手，代码助手是个比较典型的 AI 应用，主要看前端，后端的模型都差不多，国内外都有专门的代码模型。现在都是集中在 VSCode 和 Idea的插件，本文通过 Monaco 实现一个多行代码提示，通过 monaco.languages.registerInlineCompletionsProvider 实现即可，Monaco 的 API 特别丰富，就是文档差点儿。代码中这个 range 没什么用，从 API 来看应该是代码插入代码的区域，但是 end-start 不要出现负值，否则会出问题。在调用的后端的时候，要用节流，请求就太多了，模型受不了。

import logo from './logo.svg';
import './App.css';
import MonacoEditor from 'react-monaco-editor';import { useRef, useState,useEffect }  from 'react';function App() {const editorRef = useRef(null);const monacoRef = useRef(null);const decorationsRef = useRef([]);const handleEditorDidMount = (editor, monaco) => {editorRef.current = editor;monacoRef.current = monaco;monaco.languages.registerInlineCompletionsProvider('javascript', {provideInlineCompletions: (model, position, context, token) => {const multiLineCompletion = {text: "example() {\n\tconsole.log('Hello, world!');\n}\nexample();",range: {startLineNumber: position.lineNumber,startColumn: 10,endLineNumber: position.lineNumber,endColumn: 10,},};return {items: [{insertText: multiLineCompletion.text,range: new monaco.Range(multiLineCompletion.range.startLineNumber,multiLineCompletion.range.startColumn,multiLineCompletion.range.endLineNumber,multiLineCompletion.range.endColumn),},],};},freeInlineCompletions(arg) {}});};useEffect(() => {// Define custom styles for the decorationsconst style = document.createElement('style');style.innerHTML = `.myAfterContentDecoration::after {content: ' // 备注';color: green;font-weight: bold;}`;document.head.appendChild(style);}, []);return (<div style={{'margin':'100px auto', 'width': '800px'}}><MonacoEditorwidth="800"height="600"language="javascript"theme="vs-dark"value={`// Write your JavaScript code here
function helloWorld() {console.log('Hello, world!');
}
helloWorld();`}options={{selectOnLineNumbers: true}}editorDidMount={handleEditorDidMount}/></div>);
}export default App;

在这里插入图片描述