react-ace编辑器-格式化JSON数据

1、安装命令

// 安装 react-ace
yarn add react-ace  或者  npm install react-ace
// 安装 js-yaml
npm install js-yaml

2、导入ace 组件的相关配置信息

// 1、引入 react-ace
import AceEditor from “react-ace”;
// 2、ace mode 模式 json 格式
import “ace-builds/src-noconflict/mode-json”;
// 3、ace theme 主题 monokai
import “ace-builds/src-noconflict/theme-monokai”;
// 4、ace 语法：代码联想
import “ace-builds/src-noconflict/ext-language_tools”;
// 5、检测是否是json数据
const jsonlint = require(‘jsonlint-mod’)

// 6、其他引入项
import 'ace-builds/src-noconflict/mode-jsx';// jsx模式的包
import 'ace-builds/src-noconflict/mode-golang'; // 
// js编辑器插件中实现sql格式化 sql-formatter
import {
    format } from 'sql-formatter';
import 'ace-builds/src-noconflict/mode-sql'; // sql模式的包
import 'ace-builds/src-noconflict/mode-mysql';// mysql模式的包
import 'ace-builds/src-noconflict/theme-xcode';// xcode,(亮白)的主题样式
import "ace-builds/src-noconflict/theme-twilight";// twilight,(暗黑)的主题样式
//以下import的是风格，还有好多种，可以根据自己需求导入
// github、tomorrow、kuioir、twilight、xcode、textmeta、terminal、solarized-light、solarized-dark
import 'ace-builds/src-noconflict/ext-language_tools'; //（编译代码的文件）


// 转成YAML形式展示-需再引入以下几项。
import yaml from 'js-yaml';
// language_tools语言工具，（这个好像是检测语法，有点忘了，想不起来从哪里找到的）
import 'brace/ext/language_tools';
// searchbox过滤框，快捷键ctrl+F
import 'brace/ext/searchbox';
import 'brace/mode/yaml';
import 'brace/theme/monokai';

3，组件使用

<AceEditor
  mode="json"
  theme="monokai"
  value={
    json字符串 }
  placeholder={
   “默认json数据”}
  onChange={
    onChange }
  name="UNIQUE_ID_OF_DIV"
  highlightActiveLine={
   false}
  displayIndentGuides={
   false}
  editorProps={
   {
    $blockScrolling: false }