React-ace支持snippet和代码提示

import AceEditor from 'react-ace'
import languageTools from 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/ext-searchbox'
import 'ace-builds/src-min-noconflict/theme-sqlserver'
import 'ace-builds/src-min-noconflict/mode-sql'
import ReactAce from 'react-ace/lib/ace'

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

  useEffect(() => {
    const completer = {
      getCompletions: function(editor, session, pos, prefix, callback) {
        const completions = [{
            caption: 'hello',
            snippet: 'hello ${1:world}',
            type: 'snippet',
            meta: 'snippet'
        }]
        callback(null, completions);
      }
    };

    setCompleters([completer]);
  }, []);

  return (
    <AceEditor
      mode="sql"
      theme="theme-sqlserver"
      enableSnippets={true}
      enableBasicAutocompletion={true}
      enableLiveAutocompletion={true}
      ref={editorRef}
      fontSize={16}
      showPrintMargin={false}
      style={{ height: "100vh", width: "100vw" }}
    />
  );
}

export default App;

代码补全也是同样的方式，只是completions中存放的对象不太一样。是如下格式的

{
  name: 'hello',
  value: 'hello world',
  score: 0,
  meta: "keyword"
}