react实现代码提示

实现代码提示的基本思路

在React中实现代码提示功能通常需要结合文本编辑器组件（如CodeMirror、Monaco Editor）和语言服务工具（如TypeScript编译器、自定义语法分析器）。核心是通过监听用户输入，匹配关键字或语法规则，动态生成提示列表并渲染。

使用Monaco Editor实现

Monaco Editor是VS Code的底层编辑器，内置代码提示功能。以下为集成示例：

import React, { useEffect, useRef } from 'react';
import * as monaco from 'monaco-editor';

function CodeEditor() {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = monaco.editor.create(editorRef.current, {
      value: '// Start typing...',
      language: 'javascript',
      suggest: {
        showKeywords: true,
        showSnippets: true
      }
    });

    // 自定义提示项
    monaco.languages.registerCompletionItemProvider('javascript', {
      provideCompletionItems: () => ({
        suggestions: [
          {
            label: 'log',
            kind: monaco.languages.CompletionItemKind.Function,
            documentation: 'Console log',
            insertText: 'console.log(${1:value})'
          }
        ]
      })
    });
  }, []);

  return <div ref={editorRef} style={{ height: '500px' }} />;
}

使用CodeMirror实现

CodeMirror是轻量级方案，需配合插件实现提示：

import React, { useRef, useEffect } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';

function Editor() {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = CodeMirror(editorRef.current, {
      lineNumbers: true,
      mode: 'javascript',
      extraKeys: {
        'Ctrl-Space': 'autocomplete'
      }
    });
  }, []);

  return <div ref={editorRef} />;
}

自定义简单提示组件

对于简单场景，可手动实现输入框提示：

import React, { useState } from 'react';

function SimpleAutoComplete() {
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const keywords = ['function', 'const', 'let', 'return'];

  const handleInput = (e) => {
    const value = e.target.value;
    setInput(value);
    setSuggestions(
      value ? keywords.filter(k => k.startsWith(value)) : []
    );
  };

  return (
    <div>
      <input value={input} onChange={handleInput} />
      <ul>
        {suggestions.map((item, i) => (
          <li key={i} onClick={() => setInput(item)}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

性能优化建议

编辑器组件应使用React.memo避免不必要的渲染。对于Monaco Editor等重型组件，推荐动态加载：

import React, { lazy } from 'react';
const MonacoEditor = lazy(() => import('@monaco-editor/react'));

高级功能扩展

实现上下文感知提示需要结合AST分析。例如使用Babel解析代码：

import { parse } from '@babel/parser';

const getASTContext = (code) => {
  return parse(code, {
    sourceType: 'module',
    plugins: ['jsx']
  });
};

错误处理

捕获语言服务异常并降级处理：

try {
  // 复杂语法分析
} catch (e) {
  console.warn('提示引擎异常', e);
  return fallbackSuggestions;
}