2

我正在使用 ReactCodemirror2 包装器将 Javascript 编辑器带到我的 ReactJS 应用程序中。问题是我不知道如何重用定义的变量，我的意思是：

在此处输入图像描述

如您所见firstNumber，不会出现在自动完成对话框中。我做了一项研究，发现这anyword-hint.js可能会奏效，期待任何以前的书面文字。我怎样才能告诉编辑器使用anyword-hint？还是有更好的方法来使用预定义变量？

这是我所拥有的：

import React from 'react';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/abcdef.css';
import 'codemirror/theme/eclipse.css';
import 'codemirror/lib/codemirror';
import 'codemirror/theme/mbo.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import { JSHINT } from 'jshint';
import { Controlled as CodeMirror } from 'react-codemirror2';

import 'codemirror/addon/hint/anyword-hint';

window.JSHINT = JSHINT;

export default function MyEditor(props) {
  const [options, setOptions] = useState({
    mode: 'javascript',
    lineWrapping: true,
    smartIndent: true,
    lineNumbers: true,
    foldGutter: true,
    gutters: [
      'CodeMirror-linenumbers',
      'CodeMirror-foldgutter',
      'CodeMirror-lint-markers'
    ],
    autoCloseTags: true,
    keyMap: 'sublime',
    matchBrackets: true,
    autoCloseBrackets: true,
    lint: true
  });

  const extraKeys = React.useMemo(() => ({
    'Ctrl-Space': 'autocomplete',
    Tab: 'autocomplete'
  }), []);

  useEffect(() => {
    const opt = { ...options };
    opt.extraKeys = extraKeys;
    setOptions(opt);
  }, []);

  return (
    <CodeMirror
      editorDidMount={editor => {
        
      }}
      value={code}
      options={options}
      onBeforeChange={(editor, data, value) => {
        
      }}
      onChange={(editor, data, value) => {

      }}

      className={height !== 0 ? classes.setHeight : null}
    />
  );
}
4

0 回答 0