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;

在这里插入图片描述

相关推荐

  1. MYSQL实现转列三种方式

    2024-07-11 00:36:03       41 阅读
  2. Android RadioButton+GridLayout实现单选效果

    2024-07-11 00:36:03       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 00:36:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 00:36:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 00:36:03       87 阅读
  4. Python语言-面向对象

    2024-07-11 00:36:03       97 阅读

热门阅读

  1. centos7yum-mysql-community-server安装流程步骤

    2024-07-11 00:36:03       28 阅读
  2. toFixed 四舍五入问题

    2024-07-11 00:36:03       23 阅读
  3. [C++][CMake][嵌套的CMake]详细讲解

    2024-07-11 00:36:03       22 阅读
  4. 65.指针函数和函数指针

    2024-07-11 00:36:03       26 阅读
  5. 网络安全测评技术与标准

    2024-07-11 00:36:03       28 阅读
  6. Qt之多线程编程(QThread)

    2024-07-11 00:36:03       27 阅读
  7. MySQL:left join 后用 on 还是 where?

    2024-07-11 00:36:03       24 阅读
  8. 最短路径算法(算法篇)

    2024-07-11 00:36:03       25 阅读
  9. 【数学建模】生产企业原材料的订购与运输

    2024-07-11 00:36:03       24 阅读
  10. Spring Boot与Traefik的集成

    2024-07-11 00:36:03       28 阅读