React使用AceEditor实现自定义代码提示

一、安装依赖       

        首先，需要引入需要的依赖

yarn add react-ace ace-builds

        我安装的版本是"react-ace": "^10.0.0",   "ace-builds": "^1.4.14"     

二、引入依赖

        在页面上引入一些内容

// 核心组件
import AceEditor from 'react-ace'
// 引入对应的语言
import 'ace-builds/src-noconflict/mode-javascript'
//以下import的是风格
import 'ace-builds/src-noconflict/theme-eclipse'
// 代码提示
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/webpack-resolver'
import './code.less'

const CodeView = () => {
  return (
    <div className='code-wrapper'>
      <AceEditor />
    </div>
  )
}

export default CodeView

        样式：

.code-wrapper {
  display: flex;
  height: calc(100vh);
  background: #f0f0f0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
}

        效果：

 三、简单设置

        AceEditor的基础设置包括语言、主题风格等，语言和主题需要引入对应的依赖才会生效。

• name: 等同于普通div 的id属性，需要保持唯一性

<AceEditor
   // name类似于id和key需要保持唯一性
   name='myCodeView'
 />

实际渲染效果

• fontSize: 字体大小

•  style：样式
• mode:  模式，语言

• theme：主题样式

<AceEditor
      // name类似于id和key需要保持唯一性
      name='myCodeView'
      // 字体大小
      fontSize={16}
      style={{ width: '80%', height: '80%', minHeight: 80 }}
      mode='javascript'
	  theme='eclipse'
/>

        看一下效果

 四、智能提示补全

        setOptions属性设置：

• enableBasicAutocompletion:  基础的自动完成功能

• enableLiveAutocompletion：实时自动完成

• enableSnippets：代码块

• showLineNumbers：显示行号

<AceEditor
  // name类似于id和key需要保持唯一性
  name='myCodeView'
  // 字体大小
  fontSize={16}
  style={{ width: '80%', height: '80%', minHeight: 80 }}
  mode='javascript'
  theme='eclipse'
  setOptions={{
    // 基础的自动完成
    enableBasicAutocompletion: true,
    // 实时自动完成
    enableLiveAutocompletion: true,
    // 代码块
    enableSnippets: true,
    // 显示行号
    showLineNumbers: true,
    // tab键两个空格
    tabSize: 2,
  }}
/>

效果：

 

React使用AceEditor实现代码自动补全效果

五、自定义提示

        在调试脚本的时候，可能会用到一些，提前写好的内置的方法，比如可能需要通过后台实现去查询SQL的方法，这个方法就叫“sqlQuery”，参数是一个查询的SQL语句，让这个sqlQuery()也能自动提示。

        

// 核心组件
import AceEditor from 'react-ace'
// 引入对应的语言
import 'ace-builds/src-noconflict/mode-javascript'
//以下import的是风格
import 'ace-builds/src-noconflict/theme-eclipse'
// 代码提示
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/webpack-resolver'
import './code.less'
const basicCompletors = [
  {
    name: 'sqlQuery',
    value: 'sqlQuery()',
    score: 100,
    meta: 'sql查询'
  },
]
const CodeView = () => {
  
  const complete = editor => {
    //向编辑器中添加自动补全列表
    editor.completers.push({
      getCompletions: function (
        editor,
        session,
        pos,
        prefix,
        callback
      ) {
        callback(null, basicCompletors);
      }
    });
  }
  return (
    <div className='code-wrapper'>
      <AceEditor
        // name类似于id和key需要保持唯一性
        name='myCodeView'
        // 字体大小
        fontSize={16}
        style={{ width: '80%', height: '80%', minHeight: 80 }}
        mode='javascript'
        theme='eclipse'
        setOptions={{
          // 基础的自动完成
          enableBasicAutocompletion: true,
          // 实时自动完成
          enableLiveAutocompletion: true,
          // 代码块
          enableSnippets: true,
          // 显示行号
          showLineNumbers: true,
          // tab键两个空格
          tabSize: 2,
        }}
        onLoad={editor => complete(editor)}
      />
    </div>
  )
}

export default CodeView

        效果：