安装npm包

npm安装

npm i vue-codemirror6 codemirror

或者yarn安装

yarn add vue-codemirror6 codemirror

基础配置+自定义主题+json格式显示

效果如下

安装json语言包

npm i @codemirror/lang-json

完整代码显示如下

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CodeMirror from 'vue-codemirror6'
import { json } from '@codemirror/lang-json';

const initJson = {
  name: `maybaby`,
  year: 25,
  weight: 45,
  height: 165
}
// 初始化
let codeVal = ref('');
// 转成json字符串并格式化
codeVal.value = JSON.stringify(initJson, null, '\t')
// json
const lang = json();
// 主题样式设置
const theme = {
  "&": {
    color: "white",
    backgroundColor: "#034"
  },
  ".cm-content": {
    caretColor: "#0e9"
  },
  "&.cm-focused .cm-cursor": {
    borderLeftColor: "#0e9"
  },
  "&.cm-focused .cm-selectionBackground, ::selection": {
    backgroundColor: "#074"
  },
  ".cm-gutters": {
    backgroundColor: "#045",
    color: "#ddd",
    border: "none"
  }
}
onMounted(() => {

})
</script>

<template>
  <div class="main">
    <code-mirror basic :lang="lang" v-model="codeVal" style="height: 400px;" :theme="theme"/>
  </div>
</template>
<style >
.main {
  width: 100%;
  height: 100%;
}
/* required! */
.cm-editor {
  height: 100%;
}
</style>

设置官方主题

官网有这3种主题，任君选择

我这用了第一种主题，效果如下

安装主题包

npm i @codemirror/theme-one-dark

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CodeMirror from 'vue-codemirror6'
import { oneDark } from '@codemirror/theme-one-dark'
import { json } from '@codemirror/lang-json';

const initJson = {
  name: `maybaby`,
  year: 25,
  weight: 45,
  height: 165
}
// 初始化
let codeVal = ref('');
// 转成json字符串并格式化
codeVal.value = JSON.stringify(initJson, null, '\t')

// json语言
const lang = json();
// 扩展
const extensions = [oneDark];

onMounted(() => {
})
</script>

<template>
  <div class="main">
    <code-mirror 
    v-model="codeVal" 
    basic 
    :lang="lang" 
    style="height: 400px;" 
    :extensions="extensions"/>
  </div>
</template>
<style>
/* required! */
.cm-editor {
  height: 100%;
}
</style>

basic使用了基础的配置，例如行高，可折叠这些。

后面有时间把校验加上