Monaco 多行提示的实现方式

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 decorations
    const 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'}}>
   <MonacoEditor
        width="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;