objeto - Muy necesario: visor de registro JSON bien destacado

mostrar datos json javascript

Question

Usando winston para el registro de node.js, obtengo archivos de registro json. Un archivo de registro en este sentido es simplemente una secuencia de objetos json (delimitados por nueva línea). ¡Esto es excelente para la consulta de registros y para tratar los registros como datos de primera clase!

Sin embargo, tanto Sublime como gedit (al menos las versiones de las que estoy usando en Ubuntu, sublime 2 y gedit 3.6.2), resaltan mal json: usan el mismo color para las claves y los valores, lo que hace que cualquier perforación de registros sea bastante dolorosa y Realmente imposible pasar de manera remotamente humana.

Las chrome extensions existentes para resaltar json tampoco son útiles aquí, ya que no pueden manejar una colección de objetos json y, por lo tanto, no pueden mostrar estos archivos de registro a menos que manualmente los convierta en una matriz dentro de un objeto primario sintético (convirtiéndolos así en un objeto json). Esto es tedioso en el caso de ver un archivo de registro que aún se está escribiendo y, en general ...

¿Existe alguna herramienta que pueda tragar los archivos de registro json tal como están y, al mismo tiempo, resaltar las teclas en un color diferente al de los valores, de modo que los registros json también sean amigables para el hombre, no solo para la máquina? Esto es un dolor verdadero.

¡Gracias!

Answer 1

Al mirar un archivo json en SublimeText, me di cuenta de que las claves y los valores tienen diferentes ámbitos. por lo tanto, debería ser muy trivial personalizar su combinación de colores y agregar colores diferentes para las claves y los valores.

las claves tienen el alcance de source.json meta.structure.dictionary.json string.quoted.double.json mientras que los valores tienen source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json

así que si agrega este fragmento en la parte inferior de las reglas de la combinación de colores, debería verlos en diferentes colores:

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

Answer 2

Aparte de las otras grandes respuestas publicadas, otra solución realmente simple y muy elegante para el problema es utilizar el tema de Boxy . Tiene resaltado de sintaxis de forma predeterminada para JSON cuando se utiliza uno de los esquemas de color incluidos.

Instalación

Instale usando Package Control , donde Boxy aparece como Boxy Theme .

1. Abra Command Palette través de Command+Shift+P (mac) / Ctrl+Shift+P (win)
2. Elegir Package Control: Install Package
3. Encuentra Boxy Theme y pulsa Enter
4. Reiniciar texto sublime
5. Repita el paso 1, luego elija Package Control: Satisfy Dependencies
6. Reiniciar texto sublime

Activación

Active el tema de la interfaz de usuario y la combinación de colores con los comandos proporcionados por el tema:

1. Abra Command Palette través de Command+Shift+P (mac) / Ctrl+Shift+P (win)
2. Elija Boxy Theme: Activation o Boxy Theme: Configuration
3. Pulsa Enter
4. Reiniciar texto sublime

Configuración extendida →

Tema cuadrado con el esquema de color de Boxy Tomorrow aplicado. Las variaciones de color están disponibles a 10 niveles de profundidad:

Answer 3

Echa un vistazo a la combinación de colores de neón , disponible a través de Package Control y Github para texto sublime. Las claves y los valores se resaltan en diferentes colores, y hay diferentes colores clave para diferentes niveles.

Revelación completa: soy el mantenedor de este proyecto, pero realmente creo que lo ayudará, ciertamente me ayuda cuando se trabaja con archivos JSON de varios niveles como el que se muestra arriba.

Answer 4

Mezclando las respuestas de Allen Bargui y MattDMo , puede cambiar el color de las claves / valores anidados simplemente agregando más dictados que especifiquen la profundidad del código agregando un meta después de la palabra source.json.

Para localizar el archivo de tema, vaya a Preferencias> Examinar paquetes y luego dentro de la carpeta de color - Predeterminada . Edítalo añadiendo estas líneas:

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

Es importante agregar las más profundas ANTES del resto , ya que Sublime seleccionará la primera aparición coincidente. Supuse que agregar más meta funcionaría para profundidades más profundas, pero en realidad no lo hizo ... Pero hizo el truco para la profundidad 1 al menos.

Answer 5

Modifiqué el tema original de Twilight para agregar reglas para json más bonita. Es una versión modificada de la respuesta de @MattDMo, y tiene los mismos colores clave diferentes para diferentes niveles. Puedes conseguirlo desde aquí.

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

Así es como se ve JSON:

Answer 6

Si te gusta el tema predeterminado de Monkai, echa un vistazo al tema MonokaiJSON +. Es compatible con cadenas, diccionarios, matrices y todos estos mezclados también!

https://github.com/ColibriApps/MonokaiJsonPlus