在 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)

相关推荐
ObjectX前端实验室7 小时前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js
北城以北88888 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室8 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js
tanxiaomi10 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation9710 小时前
Android App Links 配置
前端
FuckPatience10 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
sophie旭10 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(三)
前端·面试·性能优化
开心不就得了10 小时前
构建工具webpack
前端·webpack·rust
gerrgwg10 小时前
Flutter中实现Hero Page Route效果
前端
不枯石10 小时前
Matlab通过GUI实现点云的ICP配准
linux·前端·图像处理·计算机视觉·matlab