V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wenjie0032
V2EX  ›  分享创造

留下你的 json 格式化查看工具吧, 看看那个更好用

  •  
  •   wenjie0032 · 222 天前 · 11816 次点击
    这是一个创建于 222 天前的主题,其中的信息可能已经有所发展或是发生改变。
    由于经常有 格式化查看 json 的需求,

    我的工作流是: 复制 -> 开浏览器 -> 打开 json.cn -> 黏贴看内容

    用多了就觉得这个链路太长, 所以想 有没有自动化的一些工具, 没有找到

    所以做了这个小应用, 基于 tauri2 + react,

    特性是: 当你复制了 json 数据后, 可以自动展示格式化后的数据

    口号是: Json 美化, 只需一步!

    现在已经支持了 json/sql 的自动美化, 后续考虑增加 xml/curl 等

    https://github.com/daodao97/quick-view

    104 条回复    2024-05-26 02:11:52 +08:00
    1  2  
    lichao
        1
    lichao  
       222 天前
    root@localhost:~/hello[main]$ echo '{ "face": "\uD83D\uDE02" }' | jq
    {
    "face": "😂"
    }
    wanniwa
        2
    wanniwa  
       222 天前   ❤️ 2
    utool 里的 json 插件
    FawkesV
        3
    FawkesV  
       222 天前
    utools
    archxm
        4
    archxm  
       222 天前
    archxm
        5
    archxm  
       222 天前
    楼主,没必要整 web app 吧,非要搞个浏览器,太重了

    这个,mfc 的
    http://tomeko.net/software/JSONedit/
    F12
        6
    F12  
       222 天前   ❤️ 11
    fehelper
    w3b5h3ll
        8
    w3b5h3ll  
       222 天前
    @lichao jq 多利索,哈哈哈
    g0o0gle
        9
    g0o0gle  
       222 天前   ❤️ 2
    FeHelper
    ingbyr
        10
    ingbyr  
       222 天前   ❤️ 2
    jq
    python3 -m json.tool
    Nosub
        11
    Nosub  
       222 天前
    @archxm 同样的使用的 JSONedit ,简单的可以用 nodepad++的 json 插件,没必要开浏览器,这完全是反人类,我觉得 op 的这个开发需求可以结束了,复杂需求用 JSONedit ,JSON 工具,暂时没有发现比 JSONedit 牛逼的。
    likeme
        12
    likeme  
       222 天前
    utools 的 json 格式化工具,很好用。
    mcfog
        13
    mcfog  
       222 天前
    pbpaste | jq
    pbpaste | jq | less
    pbpaste | ijq

    ( brew install ijq )
    ZZ74
        14
    ZZ74  
       222 天前
    编辑器自带的 json 格式化工具。
    不过我有个问题,怎么才能去掉转义字符。
    有些 json 的 value 就是一个带了转义符 json 字符串
    有什么工具能够方便将其转换成正常的不带转义符的 json 字符串呢
    DOLLOR
        15
    DOLLOR  
       222 天前
    vscode 侧栏自带的 outline
    black1
        16
    black1  
       222 天前
    linxiaojialin
        17
    linxiaojialin  
       222 天前
    sublimeText 拓展 prettyJSON ,设置快捷键 Ctrl+Alt+J
    wenjie0032
        18
    wenjie0032  
    OP
       222 天前
    哈哈, 果然大家用的都差不多, 上面很多工具我都用过

    @archxm #4 打开浏览器还是打开 JSONedit 是一样, 都会有打开这个动作
    @Nosub #11 要的就是不用手动去打开任何软件, 当你复制完后, 自动给你展示
    @ZZ74 #14 我这个就支持, 使用的 react-json-view 组件实现
    ningcol
        19
    ningcol  
       222 天前
    alfred
    fzdwx
        20
    fzdwx  
       222 天前
    xclip -o | fx
    ccbikai
        21
    ccbikai  
       222 天前   ❤️ 5
    JSON 可视化工具很多,但 JSON Crack 有些特别,可以将 JSON 使用思维导图的形式展示出来。

    除了 JSON 还支持 YAML 、TOML 、XML 、CSV 格式。

    https://s.mt.ci/jsoncrack

    Github: https://git.new/jsoncrack

    VSCode 插件: https://dub.sh/jsoncrack-vscode
    neochen13
        22
    neochen13  
       222 天前
    我用的是 okjson ,还挺好用的
    Mrun
        23
    Mrun  
       222 天前
    浏览器扩展 ctool ,自带程序员常用工具库
    ooee2016
        24
    ooee2016  
       222 天前
    DevToys
    PingAn66
        25
    PingAn66  
       222 天前   ❤️ 1
    postman
    darksword21
        26
    darksword21  
       222 天前
    emacs M-x json-pretty-print
    blackshh
        27
    blackshh  
       222 天前
    有没有可以对比两个 json 的工具
    cedoo22
        28
    cedoo22  
       222 天前
    chatgpt
    issakchill
        29
    issakchill  
       222 天前
    vscode
    calano
        30
    calano  
       222 天前
    经历过 json.cn 比较大的 json 文件直接干爆内存
    connor123
        31
    connor123  
       222 天前
    @blackshh vscode
    chenzw2
        32
    chenzw2  
       222 天前
    RainyH2O
        33
    RainyH2O  
       222 天前
    没有什么是 VSCode+插件不能解决的,如果有就再加一些插件。
    wolfie
        34
    wolfie  
       222 天前
    Nodepad++ 插件 JSON Viewer
    xlzyxxn
        35
    xlzyxxn  
       222 天前
    utools ,选中,鼠标中键
    qianyan
        36
    qianyan  
       222 天前
    sublime text 安装 Pretty JSON 插件,设置格式化快捷键
    一个页面可以格式化多个 json 字符串,自此之后就不再使用网页了
    tsem1n
        37
    tsem1n  
       222 天前
    nanfeng123
        38
    nanfeng123  
       222 天前
    utools
    proxychains
        39
    proxychains  
       222 天前
    shell: echo {"a":"b"}
    浏览器: https://github.com/tulios/json-viewer/tree/master 扩展.
    proxychains
        40
    proxychains  
       222 天前
    shell: echo {"a":"b"} | jq
    浏览器: https://github.com/tulios/json-viewer/tree/master 扩展.
    ProPh3t
        41
    ProPh3t  
       222 天前
    neovim+coc-prettier
    Seulgi
        42
    Seulgi  
       222 天前
    vscode 插件
    cobert
        43
    cobert  
       222 天前   ❤️ 1
    bejson 会不会被鄙视.
    TAFMT
        44
    TAFMT  
       222 天前
    utools 里面的 JSON 插件
    hsmbl
        45
    hsmbl  
       222 天前
    kernelpanic
        46
    kernelpanic  
       222 天前
    VSCODE Data Preview 插件
    mailx3
        47
    mailx3  
       222 天前
    console.log(JSON.stringify(JSON.parse('{"a":1,"b":2}'), null, 2))
    xuanbg
        48
    xuanbg  
       222 天前
    vs code
    dwzrlp
        49
    dwzrlp  
       222 天前
    @ccbikai 打开网站没法编辑
    lukesy
        50
    lukesy  
       222 天前
    https://jsoneditoronline.org/ 支持对象转 json 非常好用
    DataPipe
        51
    DataPipe  
       222 天前   ❤️ 1
    lmengmeng
        52
    lmengmeng  
       222 天前
    @ccbikai 这个带图带好 cool
    imzcc
        53
    imzcc  
       222 天前
    alpha4zeta
        54
    alpha4zeta  
       222 天前
    如果使用 Raycast, 推荐这个 👉 https://www.raycast.com/HerbertLu/json-editor
    HuKing
        55
    HuKing  
       222 天前
    微软应用商店下载 DevToys
    admol
        56
    admol  
       222 天前
    小 JSON 用插件 FeHelper
    大 JSON 用 dadroit JSON Viewer
    HeasyYS
        57
    HeasyYS  
       222 天前
    vscode
    evam
        58
    evam  
       222 天前
    hapigo 自带
    klo424
        59
    klo424  
       222 天前
    https://www.bejson.com/

    完全满足我的需求
    maemolee
        60
    maemolee  
       222 天前
    qianxaingmoli
        61
    qianxaingmoli  
       222 天前
    idea 自带
    bigant071
        62
    bigant071  
       222 天前
    idea 的 json helper 插件
    jun771480011
        63
    jun771480011  
       222 天前
    devUtils
    8355
        64
    8355  
       222 天前
    当然是 FeHelper
    yangxiaopeipei
        65
    yangxiaopeipei  
       222 天前
    idea 新建临时 json 文件
    Soar360
        66
    Soar360  
       222 天前
    aagaguai
        67
    aagaguai  
       222 天前
    我是用 html
    Zzdex
        68
    Zzdex  
       222 天前


    utools 尤其喜欢这个自己写 filter 过滤( js 语法
    evercyan
        69
    evercyan  
       222 天前
    alfred workflow

    复制文本 -> 快捷键触发脚本 -> 格式化 JSON -> 写入本地 HTML -> 浏览器自动打开

    做的动作就是 "复制文本 -> 快捷键"

    好处是格式化 JSON 这一步可以做很多兼容处理, 支持以下文本预览

    {\"name\":\"abc\"}
    "{\"name\":\"abc\"}"
    aaa[1, 2, 3]bbb

    写入 HTML 可以使用丰富的插件, 自定义样式

    效果如图:
    <img src=""/>

    同理比对工具也可以这样实现:
    <img src=""/>
    kqq19930511
        70
    kqq19930511  
       222 天前   ❤️ 1
    https://dadroit.com/ daroit json viewer
    happydebug
        72
    happydebug  
       222 天前
    fehelper 前端助手 还能对比 挺好用的 https://chromewebstore.google.com/detail/fehelper 前端助手/pkgccpejnmalmdinmhkkfafefagiiiad
    kinkin666
        74
    kinkin666  
       222 天前
    edge 浏览器, f12, a = {ctrl + v}
    wewin
        75
    wewin  
       222 天前
    一直用的这个:
    chrome-extension://pkgccpejnmalmdinmhkkfafefagiiiad/json-format/index.html

    简洁好用
    Mush
        76
    Mush  
       222 天前
    power json editor
    xxbing
        77
    xxbing  
       222 天前
    forty
        78
    forty  
       222 天前
    这里是 2 个不同功能:1.格式化 2.查看

    格式化,最好是提供更多的配置选项,可以格式化为不同的格式细节。
    查看,那就要做好查看的细节,包括但不限于:语法高亮、折叠、跳转、自动换行、长文本显示优化、表格式显示、Schema ;如果还要实现可编辑,那还需要更多交互优化。

    OP 的这个,对我来说不太有用,我一般不是这么用的,我是双击 JSON 文件,直接是用某款 JSON Viewer 关联打开,查看效果比你这个强太多了。 如果是没有文件的 JSON ,需要复制,那快捷键呼唤出软件再粘贴一下就行了。
    yyyyhere
        79
    yyyyhere  
       222 天前
    utools
    iikebug
        80
    iikebug  
       222 天前
    he3
    hawken
        81
    hawken  
       222 天前
    boop
    bandian
        82
    bandian  
       222 天前
    VSCode ,新开一个标签,把 JSON 贴进去,Alt+Shift+F 格式化。日常开发工具就是 VSCode ,简单方便,原生支持也不需要再安装什么插件
    Xinu
        83
    Xinu  
       222 天前
    utools +1
    sleepm
        84
    sleepm  
       222 天前
    fred649
        85
    fred649  
       221 天前
    Geany 里也可以设置 jq 为 formater ,还能设置快捷键
    iseki
        86
    iseki  
       221 天前 via Android
    命令行用 jq ,其他场景用浏览器开发者工具,本地已有文件用 vscode 。无它,我的 json 很大,不用 jq 会卡;我需要灵活的操作和处理,浏览器 F12 正合适~
    JerryLee13
        87
    JerryLee13  
       221 天前
    浏览器插件,FeHelper 。😂
    daoqiongsi1101
        88
    daoqiongsi1101  
       221 天前
    burby
        89
    burby  
       221 天前 via iPhone
    vscode
    Tink
        90
    Tink  
       221 天前
    直接 pycharm 看
    changdy
        91
    changdy  
       221 天前
    巧了,此时此刻我也正在做一个字符串处理工具的 V2 版本 ,其中就包含了 json 预览

    之前也找过几乎所有的 json 预览库

    上文提到的 jsoncrack 和 jsonhero 我都用过.是我用过比较不错的三方库
    https://www.jsont.run/ 倒是第一次见.感觉像是基于 jsonhero 做的二开

    不过我做的是工具比你功能更强一些 . 大部分是基于我日常使用的痛点找的解决方案

    https://imgur.com/NZvdkbH
    Lullaby
        92
    Lullaby  
       221 天前
    RobinzzZ
        94
    RobinzzZ  
       221 天前
    vscode ,cmd+n ,新建一个标签页粘贴进去,然后格式化
    zgsi
        95
    zgsi  
       221 天前
    AlvaMu
        96
    AlvaMu  
       221 天前
    FeHelper 就很好用了,不想在线的话,vscode 装一个自动格式化的插件,粘贴到文档里面,也能自动格式化
    nyakoy
        97
    nyakoy  
       221 天前
    chrome 里插件 json-handle
    shayebushi
        98
    shayebushi  
       221 天前
    没有智能纠错提醒的 json 工具是不完整的,
    其他人说的 FeHelper 就挺好用,还有我常用的 https://www.sojson.com/simple_json.html
    zsh2517
        99
    zsh2517  
       221 天前
    FE Helper + JSONHero 。之前想自己写但是太懒了
    layxy
        100
    layxy  
       220 天前
    JSON-handle 浏览器插件
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2689 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:40 · PVG 22:40 · LAX 06:40 · JFK 09:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.