如何在React/Monaco Editor中实现Python的优质自动补全？

核心结论 #

如果要实现像JavaScript那样上下文感知的智能补全（比如识别自定义类的方法、当前代码里的变量/函数），确实离不开语言服务器，但不用自己部署复杂的后端服务，有轻量的前端集成方案；如果只是需要基础补全，也可以通过增强静态提示+简单代码解析来实现。

一、增强静态补全（无需语言服务器，适合简单场景） #

你当前的代码只能返回固定的静态提示，无法感知代码上下文。可以通过以下方式优化：

1. 预定义Python内置语法、常用库的补全项
2. 用简单的正则或AST解析当前编辑器内的代码，提取自定义的函数、类、变量名，生成补全提示

修改后的示例代码：

import { FC, useEffect } from "react";
import * as monaco from "monaco-editor";

// 预定义Python常用补全项
const builtInProposals = [
  { label: "print", insertText: "print(${1:})", kind: monaco.languages.CompletionItemKind.Function },
  { label: "len", insertText: "len(${1:})", kind: monaco.languages.CompletionItemKind.Function },
  { label: "list", insertText: "list(${1:})", kind: monaco.languages.CompletionItemKind.Class },
];

// 解析当前代码，提取自定义的函数、类
function extractCustomSymbols(code: string) {
  const proposals = [];
  // 匹配函数定义
  const funcRegex = /def\s+(\w+)\s*\(/g;
  let match;
  while ((match = funcRegex.exec(code)) !== null) {
    proposals.push({
      label: match[1],
      insertText: `${match[1]}(${1:})`,
      kind: monaco.languages.CompletionItemKind.Function,
    });
  }
  // 匹配类定义
  const classRegex = /class\s+(\w+)\s*/g;
  while ((match = classRegex.exec(code)) !== null) {
    proposals.push({
      label: match[1],
      insertText: match[1],
      kind: monaco.languages.CompletionItemKind.Class,
    });
  }
  return proposals;
}

function createProposals(range: monaco.IRange, code: string) {
  const customProposals = extractCustomSymbols(code);
  // 合并内置和自定义补全项
  return [...builtInProposals, ...customProposals].map(item => ({
    ...item,
    range: range,
  }));
}

export const MonacoEditorComponent: FC = () => {
  useEffect(() => {
    monaco.languages.registerCompletionItemProvider("python", {
      provideCompletionItems: function (model, position) {
        const word = model.getWordUntilPosition(position);
        const range = {
          startLineNumber: position.lineNumber,
          endLineNumber: position.lineNumber,
          startColumn: word.startColumn,
          endColumn: word.endColumn,
        };
        const fullCode = model.getValue();
        return {
          suggestions: createProposals(range, fullCode),
        };
      },
      // 触发补全的字符，比如.、空格等
      triggerCharacters: [".", " ", "("],
    });

    monaco.editor.create(document.getElementById("container")!, {
      value: "def something():\n\treturn 5\n\nclass MyClass:\n\tdef my_method(self):\n\t\tpass\n\n",
      language: "python",
    });
  }, []);
  return <div id="container" style={{ width: 800, height: 400 }}></div>;
};

这种方案的局限是无法识别类的内部方法、变量类型等深层上下文，只能做基础的符号提取。

二、轻量语言服务器集成（实现真正的智能补全） #

要达到JavaScript那样的补全效果，必须用语言服务器。现在可以直接在前端集成Pyright（微软的Python语言服务器），不用单独部署后端：

1. 安装依赖：

npm install monaco-editor monaco-languageclient vscode-languageserver-protocol vscode-languageserver-types pyright

2. 集成示例（简化版）：

import { FC, useEffect } from "react";
import * as monaco from "monaco-editor";
import { createLanguageClient, MonacoLanguageClient } from "monaco-languageclient";
import { Worker } from "worker_threads";
import * as pyright from "pyright";

export const MonacoEditorComponent: FC = () => {
  useEffect(() => {
    const container = document.getElementById("container")!;
    const editor = monaco.editor.create(container, {
      value: "def something():\n\treturn 5\n\nclass MyClass:\n\tdef my_method(self):\n\t\tpass\n\nobj = MyClass()\nobj.",
      language: "python",
    });

    // 创建Pyright worker
    const worker = new Worker(pyright.LanguageServer.createWorkerScript(), {
      execArgv: ["--no-warnings"],
    });

    // 创建语言客户端
    const client = createLanguageClient({
      worker,
      documentSelector: [{ language: "python" }],
      monaco,
    });

    // 启动客户端
    client.start();

    return () => {
      client.stop();
      editor.dispose();
    };
  }, []);
  return <div id="container" style={{ width: 800, height: 400 }}></div>;
};

这种方案可以实现完整的智能补全：识别自定义类的方法、变量类型、函数参数提示，甚至错误检查，效果和VS Code里的Python补全一致。

总结 #

• 如果只是需要基础补全，用增强静态补全的方案足够，无需额外依赖
• 如果要和JavaScript一样的智能补全体验，集成Pyright语言服务器是最优解，不用自己部署后端，直接前端集成即可

内容的提问来源于stack exchange，提问作者Effex