非常需要：突出显示的 JSON 日志查看器

Much needed: well-highlighted JSON log viewer

提问by matanster

Using winstonfor node.js logging, I get json log files. A log file in this vein is simply a sequence of (newline delimited) json objects. This is great for log querying and treating logs as first-class data!

使用winston进行 node.js 日志记录，我得到 json 日志文件。这种情况下的日志文件只是一系列（换行符分隔的）json 对象。这对于日志查询和将日志视为一流数据非常有用！

However, both Sublimeand gedit(at least the versions of them I'm using on Ubuntu, sublime 2 and gedit 3.6.2), poorly highlight json - they use the same color for keys and values, making any log drilling quite painful and really impossible to go through in any remotely humane manner.

但是，Sublime和gedit（至少是我在 Ubuntu、sublime 2 和 gedit 3.6.2 上使用的版本）都没有很好地突出 json - 它们对键和值使用相同的颜色，使得任何日志钻取都非常痛苦并且真的不可能以任何远程人道的方式通过。

Existing chrome extensionsfor json highlighting aren't helpful here either - they can't handle a collection of json objects and thus fail displaying these log files unless I manually turn them into an array within a synthetic parent object first (thus turning them into a json object). This is tedious in the case of viewing a log file that is still being written to and in general......

现有chrome extensions的 json 突出显示在这里也没有帮助 - 它们无法处理 json 对象的集合，因此无法显示这些日志文件，除非我首先手动将它们转换为合成父对象中的数组（从而将它们转换为 json 对象） ）。在查看仍在写入和一般情况下的日志文件的情况下，这很乏味......

Is there any tool that can both swallow json log files as is, and at the same time highlight keys in a different color than values, so that json logs are also friendly to man, not only to machine?? this is a real pain.

有没有什么工具既可以吞下json日志文件，又可以用与值不同的颜色高亮键，这样json日志对人也很友好，不仅对机器友好？？这是一个真正的痛苦。

Thanks!

谢谢！

回答by MattDMo

Check out the Neon Color Scheme, available via Package Controland Githubfor Sublime Text. Keys and values are highlighted in different colors, and there are different key colors for different levels.

查看Neon Color Scheme，可通过Package Control和Githubfor Sublime Text 获得。键和值以不同颜色突出显示，不同级别有不同的键颜色。

Full disclosure: I'm the maintainer for this project, but I really think it'll help you out - it certainly helps me when working with multi-leveled JSON files like the one shown above.

完全披露：我是这个项目的维护者，但我真的认为它会帮助你 - 在处理多级 JSON 文件（如上所示）时，它肯定会帮助我。

回答by electronix384128

If you like the default Monkai Theme, check out MonokaiJSON+ Theme! It supports strings, dictionaries, arrays and all of these mixed as well!

如果您喜欢默认的 Monkai 主题，请查看 MonokaiJSON+ 主题！它支持字符串、字典、数组和所有这些混合的！

https://github.com/ColibriApps/MonokaiJsonPlus

https://github.com/ColibriApps/MonokaiJsonPlus

回答by Shaunak

I modified original twilight theme to add rules for prettier json. It's a modified version of @MattDMo 's answer, and has the similar different key colors for different levels. You can get it from here

我修改了原始的 twilight 主题以添加更漂亮的 json 规则。这是@MattDMo 答案的修改版本，不同级别具有相似的不同键颜色。你可以从这里得到

https://github.com/shaunakv1/twilight-tmTheme-better-json-highlight

https://github.com/shaunakv1/twilight-tmTheme-better-json-highlight

Here's how JSON looks:

以下是 JSON 的外观：

回答by kikus

Mixing Allen Bargui's and MattDMo's answers, you can change the color of the nested keys/values by simply adding more dicts specifying the depth of the code by adding a metaafter the source.json word.

混合Allen Bargui和MattDMo的答案，您可以通过meta在 source.json 单词之后添加更多指定代码深度的字典来更改嵌套键/值的颜色。

Locate the theme file by going to Preferences > Browse Packagesand then inside the Color Scheme - Defaultfolder. Edit it by adding these lines:

通过转到首选项 > 浏览包，然后在配色方案 - 默认文件夹中找到主题文件。通过添加这些行来编辑它：

<dict>
    <key>name</key>
    <string>Json Keys - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values - 1 deep</string>
    <key>scope</key>
    <string>source.json meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Json Keys</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF0000</string> <!-- your keys color -->
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>JSON Values</string>
    <key>scope</key>
    <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#00FF00</string> <!-- your custom color -->
    </dict>
</dict>

It's important to add the deeper ones BEFORE the rest, as Sublime will select the first matching occurrence. I guessed adding more metawould work for further depths but it actually didn't... But it did the trick for depth 1 at least.

在其余部分之前添加更深的部分很重要，因为 Sublime 将选择第一个匹配项。我猜想增加更多meta会适用于更深的深度，但实际上并没有……但它至少对深度 1 起到了作用。

回答by Evan Scoboria

You'll find that https://jsonlog.io/is a solution that provides great visibility into your application's structured data IO. I'm the developer behind this, but it's a free resource I built to solve this exact issue in my own workflow.

您会发现https://jsonlog.io/是一种解决方案，可提供对应用程序结构化数据 IO 的出色可见性。我是这背后的开发人员，但它是我构建的免费资源，用于在我自己的工作流程中解决这个确切的问题。

Here's an example of one of the log formats that might help:

以下是可能有帮助的一种日志格式的示例：

JSONLog Pretty Log View

JSONLog 漂亮的日志视图

And since it's a live logging-type platform the data displays live as they are sent from your application. It's a great way to get insight into your live/dev application IO.

而且由于它是一个实时日志类型平台，因此数据在从您的应用程序发送时实时显示。这是深入了解实时/开发应用程序 IO 的好方法。

回答by Rowe Morehouse

in 2020:

2020年：

For Sublime Text 3…

对于Sublime Text 3……

to colorize keys in a different color than values …

以与值不同的颜色为键着色……

install JSON Key-Valuemanually or with package control:

JSON Key-Value手动安装或使用包控制安装：

https://packagecontrol.io/packages/JSON%20Key-Value

https://packagecontrol.io/packages/JSON%20Key-Value

Now you'll have a new tmThemecalled JSON Key-Valuein the lower right corner that you can select. This will render keys and values in different colors.

现在您将在右下角有一个可以选择的新tmTheme调用JSON Key-Value。这将以不同的颜色呈现键和值。

If you set your theme as Adaptive.sublime-themethen your new JSON styling will follow your active color scheme.

如果您将主题设置为，Adaptive.sublime-theme那么您的新 JSON 样式将遵循您的活动配色方案。

回答by Allen Bargi

looking at a json file in SublimeText, I realised keys and values have different scopes. so it should be very trivial to customize your color scheme and add different color for keys and values.

查看 SublimeText 中的 json 文件，我意识到键和值具有不同的范围。所以自定义你的配色方案并为键和值添加不同的颜色应该是非常简单的。

keys have scope of source.json meta.structure.dictionary.json string.quoted.double.json while values have source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json

键有范围，source.json meta.structure.dictionary.json string.quoted.double.json 而值有source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json

so if you add this snippet at the bottom of you color scheme rules you should see them in different colors:

因此，如果您在配色方案规则的底部添加此代码段，您应该会看到它们的不同颜色：

    <dict>
        <key>name</key>
        <string>Json Keys</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FF0000</string> <!-- your keys color -->
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>JSON Values</string>
        <key>scope</key>
        <string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#00FF00</string> <!-- your custom color -->
        </dict>
    </dict>