在 Vue + Codemirror 中优雅回显 JSON

💡 小技巧：在 Vue + Codemirror 中优雅回显 JSON

在开发后台管理系统时，经常会遇到需要在编辑器里 展示 JSON 数据 的场景。

如果直接把 JSON 字符串丢给 vue-codemirror，结果可能是 ------ 一整行的压缩数据，非常难看。

今天分享一个小技巧，让 JSON 在编辑器里自动格式化，更清晰易读。

🚨 使用前（问题）

直接赋值给 codemirror，数据会被压成一行：

json 复制代码

{"mcpServers":{"WebParser":{"type":"sse","description":"网页解析（WebParser）MCP 服务，一个专用于网页内容解析的工具包。","isActive":true,"name":"阿里云百炼_网页解析","url":"https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse","headers":{"Authorization":"Bearer sk-63ff75f5081e4bf4a3d0ab8532e01924"}}}}

🎯 使用后效果

直接赋值给 codemirror，数据会被压成一行：

json 复制代码

{
  "mcpServers": {
    "WebParser": {
      "type": "sse",
      "description": "网页解析（WebParser）MCP 服务，一个专用于网页内容解析的工具包。",
      "isActive": true,
      "name": "阿里云百炼_网页解析",
      "url": "https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse",
      "headers": {
        "Authorization": "Bearer sk-63ff75f5081e4bf4a3d0ab8532e01924"
      }
    }
  }
}

✅ 解决方案

在把数据传给 codemirror 之前，先用 JSON.stringify 进行格式化：

vue 复制代码

<template>
  <codemirror
    v-model="code"
    :extensions="extensions"
    style="height: 400px"
  />
</template>

<script setup>
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { json } from "@codemirror/lang-json";
import { oneDark } from "@codemirror/theme-one-dark";
import { EditorView } from "@codemirror/view";

const defaultExtensions = [json(), EditorView.lineWrapping];
const extensions = [...defaultExtensions, oneDark];

const rawData = {
  mcpServers: {
    WebParser: {
      type: "sse",
      description: "网页解析（WebParser）MCP 服务，一个专用于网页内容解析的工具包。",
      isActive: true,
      name: "阿里云百炼_网页解析",
      url: "https://dashscope.aliyuncs.com/api/v1/mcps/WebParser/sse",
      headers: {
        Authorization: "Bearer sk-63ff75f5081e4bf4a3d0ab8532e01924"
      }
    }
  }
};

// ✅ 格式化 JSON 再回显
const code = ref(JSON.stringify(rawData, null, 2));
</script>

第二个参数 null → 表示不使用自定义替换器
第三个参数 2 → 控制缩进空格数（常用 2 或 4）