使用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)
