monaco-editor 格式化json,sql

初始化monaco-editor

微软的开源项目有点坑，纯英文的文档对很多刚开始前端的小朋友很不友好，刚好这段时间公司的项目遇到了文本编辑，发现这个居然是微软的vscode网页版，巧了，刚好开发工具正是vscode，秉着用了这么久我还不熟悉你这玩意的心态，就开始看着官方文档琢磨了，没想到这玩意是真的坑，文档不全的厉害，很多修改难弄的很。一路写下来真的是头疼的厉害
第一步：肯定是初始化这个插件
npm install monaco-editor -s
import * as monaco from 'monaco-editor'

this.monacoEditor = monaco.editor.create(this.$refs.container, {
   value: this.value,
   readOnly: false,
   language: this.language,
   theme: this.$store.state.menu.flinkColor
 })
 //调用updateOptions可以动态修改options需要更多的参数可以去官网去看看
this.editor.updateOptions({ theme: 'vs' })

初始化插件之后就可以调用插件提供的所有方法了，不得不说真的是网页版的vscode，功能真的是很强大很全，用完之后就爱了爱了。

格式化sql

npm install sql-formatter -s
import { format } from ‘sql-formatter’

this.monacoEditor.setValue(format(this.monacoEditor.getValue()))

格式化json

//这里的editor不是当前的是实例monacoEditor
this.monacoEditor.trigger('anyString', 'editor.action.formatDocument')
this.monacoEditor.setValue(this.monacoEditor.getValue())

至此收工。