效果图：
方法：
1：下载插件：vue-codemirror：npm i vue-codemirror -S
官方网址：https://codemirror.net/index.html
2：下载格式化SQL语句插件：sql-formatter：npm i sql-formatter -S
注意：sql-formatter插件的版本要求4以下，否则会报错
网址：https://www.npmjs.com/package/sql-formatter
步骤：
1：vue子组件：preview.vue文件代码：
<template> <div> <textarea ref="mycode" class="codesql" v-model="value" > </textarea> </div></template><script> import "codemirror/theme/ambiance.css"; import "codemirror/lib/codemirror.css"; import "codemirror/addon/hint/show-hint.css"; let CodeMirror = require("codemirror/lib/codemirror"); require("codemirror/addon/edit/matchbrackets"); require("codemirror/addon/selection/active-line"); require("codemirror/mode/sql/sql"); require("codemirror/addon/hint/show-hint"); require("codemirror/addon/hint/sql-hint"); export default { data() { return { editor: null } }, props: { value: { type: String, default: '' }, sqlStyle: { type: String, default: 'default' }, readOnly: { type: [Boolean, String] } }, watch: { newVal (newV, oldV) { if (this.editor) { this.$emit('changeTextarea', this.editor.getValue()) } } }, computed: { newVal () { if (this.editor) { return this.editor.getValue() } } }, mounted(){ let mime = 'text/x-mariadb' //let theme = 'ambiance'//设置主题，不设置的会使用默认主题 this.editor = CodeMirror.fromTextArea(this.$refs.mycode, { value: this.value, mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可 indentWithTabs: true, smartIndent: true, lineNumbers: true, matchBrackets: true, cursorHeight: 1, lineWrapping: true, readOnly: this.readOnly, //theme: theme, // autofocus: true, extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键 hintOptions: {//自定义提示选项 // 当匹配只有一项的时候是否自动补全 completeSingle: false, // tables: { // users: ['name', 'score', 'birthDate'], // countries: ['name', 'population', 'size'] // } } }) //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死 this.editor.on('inputRead', () => { this.editor.showHint() }) }, methods: { setVal () { if (this.editor) { if (this.value === '') { this.editor.setValue('') } else { this.editor.setValue(this.value) } } } } }</script><style>.CodeMirror { color: black; direction: ltr; line-height: 22px;}.CodeMirror-hints{ z-index: 9999 !important;}</style>2：父组件中引入
（1）：引入sql-formatter插件：
（2）：引入子组件preview.vue组件，并注册
<template> <div> <-- 子组件 --> <preview ref="sqleditor" :value="basicInfoForm.sqlMain" @changeTextarea="changeTextarea($event)" ></preview> </div></template>import sqlFormatter from 'sql-formatter' //引入sql-formatter插件import preview from './preview.vue' //引入子组件export default { //注册子组件 components: { preview, }, data(){ return{ basicInfoForm:{ sqlMain:'' //后端返回的sql语句 } } }, methods:{ //设置sql语句 changeTextarea(val) { this.$set(this.basicInfoForm, 'sqlMain', val) this.formaterSql(val) }, //格式化sql语句显示 formaterSql(val) { let dom = this.$refs.sqleditor console.log('formaterSql', sqlFormatter) dom.editor.setValue(sqlFormatter.format(dom.editor.getValue())) }, }}结果：问题：sql语句格式化样式没问题，但是comment注释语句并没格式化
解决comment注释语句并没格式化的方法：
vue展示SQL语句第二篇：vue的sql-formatter插件解决sql语句前端展示comment注释语句并没格式化问题_丽雪的空间的博客-CSDN博客