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

相关推荐
namekong85 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天6 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄8 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10110 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194310 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧10 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台10 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10010 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc11 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅12 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学