w3resource

How to Work with JSON in Sublime Text Effectively


JSON in Sublime Text

Sublime Text is a popular and powerful text editor that supports various programming languages and file types, including JSON. JSON (JavaScript Object Notation) is a lightweight data format commonly used for data interchange. When working with JSON files in Sublime Text, you can leverage several features like syntax highlighting, validation, and plugins to improve your productivity.

This guide covers how to use Sublime Text effectively for JSON, including syntax highlighting, formatting, and validation.


Syntax:

JSON syntax is simple and consists of the following key elements:

1.	Objects: Key-value pairs enclosed in curly braces {}.
2.	Arrays: Ordered lists of values enclosed in square brackets [].
3.	Values: Can be strings, numbers, objects, arrays, true, false, or null.

Basic JSON Syntax Example:

{
    "name": "Rohit",
    "age": 30,
    "city": "New York",
    "skills": ["Python", "JavaScript"]
}

Example 1: Syntax Highlighting in Sublime Text

Sublime Text automatically detects the JSON file type based on its .json extension. Once a JSON file is opened, it applies syntax highlighting to differentiate keys, values, and symbols for better readability.

Steps:

    1. Open a JSON file with the .json extension in Sublime Text.

    2. The editor will automatically apply syntax highlighting, making it easier to read.

Sample Code:

{
    "title": "Sublime JSON Example",
    "description": "Working with JSON in Sublime Text",
    "status": true
}

Output:

  • Keys will appear in one color (e.g., blue).
  • Strings and values will appear in another color (e.g., green or red).

Example 2: Formatting and Pretty Printing JSON

Sublime Text supports JSON formatting using external plugins or built-in commands. Proper formatting improves readability and helps in identifying errors.

Steps to Format JSON:

    1. Manual Formatting: Use the Edit > Line > Reindent option to format the selected JSON.

    2. Using a Plugin: Install the Pretty JSON plugin from the Package Control for advanced formatting and validation.

Sample Code (Before Formatting):

{"name":"Olivie","age":25,"skills":["HTML","CSS"]}

Formatted Code (After Using Pretty JSON Plugin):


{
    "name": "Olivie",
    "age": 25,
    "skills": [
        "HTML",
        "CSS"
    ]
}

Explanation:

    1. Syntax Highlighting: Sublime Text automatically highlights the syntax when you open a .json file, helping you visually distinguish between keys, values, and punctuation.

    2. Formatting: Properly indented JSON is easier to read and debug. Using built-in reindentation or the Pretty JSON plugin ensures well-formatted output.

    3. Validation: Plugins like Pretty JSON can also validate your JSON, ensuring that it adheres to correct syntax rules.


Note:

    1. Auto-Completion: Sublime Text offers auto-completion for frequently used keys and values in JSON files.

    2. Error Highlighting: While Sublime Text does not natively validate JSON syntax, plugins like Pretty JSON or SublimeLinter-json can highlight syntax errors in real-time.

    3. Minification: You can use the Pretty JSON plugin to minify JSON (remove unnecessary whitespace) for compact storage.

Practical Guides to JSON Snippets and Examples.



Follow us on Facebook and Twitter for latest update.