vue中使用monaco-editor 和 prettier

使用prettier美化代码后用monaco-editor 编辑

monaco-editor

• 引入你需要的组件

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
// ctrl + f查找功能
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'
// 可以根据自己的需求引入

• 配置编辑器，如语言，主题，可否编辑，缩略图minimap

      const options = {
        language: 'html',
        theme: 'vs-dark',
        automaticLayout: true,
        // 代码略缩图
        minimap: {
          enabled: false
        },
        readOnly: true // 编辑器不可编辑
      }

• 创建编辑器实例

if (!this.monacoInstanceEditor) {
        // dom = this.$refs.editor
        // content = '你要放进去的内容'
        this.monacoInstanceEditor = monaco.editor.create(dom, options)
        this.monacoInstanceEditor.setValue(content)
      }

• 用完后销毁实例

    if (this.monacoInstanceEditor) {
      this.monacoInstanceEditor.dispose()
    }

prettier

• 引入你需要的组件

const prettier = require('prettier/standalone')
const prettierHtml = require('prettier/parser-html')

• 美化代码

    /**
     * 美化代码
     */
    prettierCode (text) {
      return prettier.format(text,
        { parser: 'html', plugins: [prettierHtml]
        })
    },

• 可以将代码美化后放进编辑器

const editorContent = this.prettierCode(text)
this.monacoInstanceEditor.setValue(editorContent)