vue-codemirror搭配js代码美化使用指南

//安装
npm i vue-codemirror -S


//使用
<codemirror
      ref="chartOption"
      :value="mirrorCode"//响应式使用v-model
      :options="cmOptions" 
      @change="mirrorCodeChange">
</codemirror>

import {codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-light.css' //主题
import 'codemirror/mode/javascript/javascript.js' //

//定义
export default {
    name: "basic-line-configs",
    components:{
      codemirror // 声明组件
    },
    data() {
      return {
        mirrorCode:'',
        cmOptions: {
          tabSize: 2, 
          mode: 'text/javascript', 
          theme: 'base16-light', // 主题
          lineNumbers: true, 
          line: true,
        },
      }
    },
}

因为一些场景下我们的内容可能不是格式化的,放进去很难查看,需要自行格式化下

这里使用js-beautify

//安装
npm install js-beautify

//使用
import { js_beautify, css_beautify, html_beautify } from 'js-beautify'

// 使用,css、html均是这种策略使用
code = js_beautify(code)

芜湖,结束