web-dev-qa-db-ja.com

必要なもの：十分に強調されたJSONログビューア

Node.jsのロギングに winston を使用すると、jsonログファイルが取得されます。この静脈のログファイルは、単純に（改行で区切られた）jsonオブジェクトのシーケンスです。これは、ログのクエリやログをファーストクラスのデータとして扱うのに最適です！

ただし、Sublimeとgedit（少なくとも、Ubuntu、sublime 2、gedit 3.6.2で使用しているバージョン）は、jsonの強調表示が不十分です。キーには同じ色を使用していますおよび値、ログの掘削は非常に苦痛であり、リモートで人道的に行うことは本当に不可能です。

既存のchrome extensions jsonの強調表示もここでは役に立たない-jsonオブジェクトのコレクションを処理できないため、最初に手動で合成親オブジェクト内の配列に変換しない限り、これらのログファイルの表示に失敗する（したがって、jsonに変換する）オブジェクト）。これは、まだ一般的に書き込まれているログファイルを表示する場合は退屈です......

Jsonログファイルをそのまま飲み込み、同時にキーを値とは異なる色で強調表示できるツールがありますので、jsonログはマシンだけでなく人にも優しいですか？これは本当の痛みです。

ありがとう！

jsonsublimetextgeditwinston
23
matanster

Sublime Textの Package Control および Github で利用可能な Neon Color Scheme を確認してください。キーと値は異なる色で強調表示され、レベルごとに異なるキー色があります。

JSON with Neon

完全な開示：私はこのプロジェクトのメンテナーですが、本当に役立つと思います-上に示したようなマルチレベルのJSONファイルで作業するときは確かに役立ちます。

27
MattDMo

デフォルトのMonkaiテーマが気に入ったら、MonokaiJSON + Themeをチェックしてください！文字列、辞書、配列、およびこれらすべての混合もサポートします！

https://github.com/ColibriApps/MonokaiJsonPlus

Monokai JSON+ Theme

24
Ben Marten

オリジナルのミステリーテーマを変更して、よりきれいなjsonのルールを追加しました。 @MattDMoの回答の修正版であり、さまざまなレベルで同様のさまざまなキーの色があります。ここから入手できます

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

JSONの外観は次のとおりです。

enter image description here

5
Shaunak

Allen Bargui の答えと MattDMo の答えを混ぜて、追加することでコードの深さを指定する辞書を追加するだけで、ネストされたキー/値の色を変更できますmeta source.jsonワードの後。

Preferences> Browse Packagesに移動し、Color Scheme-Defaultフォルダー内でテーマファイルを見つけます。次の行を追加して編集します。

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

Sublimeは最初に一致するオカレンスを選択するため、残りの前により深いものを追加することが重要です。 metaを追加することでさらに深さを上げることができると思いましたが、実際にはうまくいきませんでした...しかし、少なくとも深さ1ではうまくいきました。

4
kikus

sublimeTextの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

このスニペットを配色ルールの下部に追加すると、異なる色で表示されるはずです。

    <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>
0
Allen Bargi

投稿された他の素晴らしい回答とは別に、問題に対する別の本当にシンプルで非常にエレガントなソリューションは、 Boxy Theme を使用することです。含まれているカラースキームの1つを使用する場合、デフォルトでJSONの構文が強調表示されます。

Installation

Package Control を使用してインストールします。ここで、Boxyは_Boxy Theme_。

  1. Command+Shift+P (mac) / Ctrl+Shift+P (win)経由で_Command Palette_を開きます
  2. _Package Control: Install Package_を選択します
  3. _Boxy Theme_を見つけて、Enterを押します
  4. Sublime Textを再起動
  5. ステップ1を繰り返し、_Package Control: Satisfy Dependencies_を選択します
  6. 崇高なテキストを再開する

アクティベーション

テーマが提供するコマンドを使用して、UIテーマと配色をアクティブにします。

  1. Command+Shift+P (mac) / Ctrl+Shift+P (win)経由で_Command Palette_を開きます
  2. _Boxy Theme: Activation_または_Boxy Theme: Configuration_を選択します
  3. Enterをヒット
  4. 崇高なテキストを再開する

拡張構成→

Boxy Theme withBoxy Tomorrowカラースキーム適用されます。カラーバリエーションは、10レベルの深さで利用できます。

Boxy Tomorrow Color Scheme

0
Ce.