How to use Vim Editor to Format JSON Files

Vim is a lightweight widely used text editor among Linux administrators and developers because of its rich functionalities. Vim editor is based on shortcuts used to modify the text or code which makes it efficient and faster compared to other editors. Moreover, it supports many plugins which ultimately enhance its functionality.

Vim editor is a universal editor for writing and editing code since it supports many programming languages. It can not only edit codes but also be used to view and format data in various file formats such as CSV, XML, and JSON.

What is JSON
Why do We Need to Format the JSON File In Vim
How to Open JSON File in Vim
How to Format JSON Files in Vim

1. Format JSON Files in Vim using JQ Utility
2. Format JSON Files in Vim using Python json.tool Module

Conclusion

In this guide, I will cover using the Vim editor to format JSON data. Before that let’s understand what a JSON file is.

Requirement

System	Any system that supports the Vim text editor: Linux, macOS, or BSD.
Software	Vim text editor.

Note: For this guide, I am using Vim editor on Ubuntu 22.04.

What is JSON

JSON stands for JavaScript Object Notation which is a data interchange format that easily works with many programming languages. JSON has two main components: objects and arrays.

What is JSON Object

JSON object is enclosed into the curly braces {} and contains key-value pairs. The key can be in string format while the value can be in different JSON-supported data types such as string, integers, boolean, null, and arrays.

{"key":"value", "key":"value"}

Key and value are enclosed in double quotes (“”) and separated by colons (:). While each key-value pair is separated by a comma (,).

What is JSON Array

A JSON array is enclosed in the square brackets [] and contains the JSON objects as elements.

[{"key":"value"},{"key":"value"}]

In JSON arrays objects are separated by comma (,).

Why do We Need to Format the JSON File In Vim

JSON files or data are usually in minified form in the files which is hard to read for humans. To make it clearer and more comprehensible we need to format in human readable format. And this is where Vim comes in handy. For example:

{"name":"Sam","year":2023,"phoneNumber":null,"manager":{"firstName":"Sam","lastName":"Roe"},"team_members":[{"firstName":"Alex","lastName":"Merrick"},{"firstName":"Sarah","lastName":"Oliver"},{"firstName":"Johnny","lastName":"Ethan"}]}

The above JSON format is not easy to read and it would be difficult for a developer to understand it.

How to Open JSON File in Vim

The Vim text editor comes by default in macOS and many Linux distributions. If it is not installed then use the following commands to install it:

sudo apt install vim

Let’s assume we have a file with JSON data in minified form. The JSON file comes in .json file extension. To open the JSON file in Vim use:

vim [filename].json

How to Format JSON Files in Vim

There are two different methods to format the JSON file in Vim.

Using JQ Utility for Vim
Using Python json.tool Module

Let’s explore these methods to format JSON data in Vim.

1. Format JSON Files in Vim using JQ Utility

First, we need to install the JQ utility which can be accessed from the official source, where it can be downloaded for all supported operating systems.

Or if you are using Linux (Debian-based), use the apt package manager to install it:

sudo apt install jq

Now, open the JSON file; I have a JSON file with the name of myfile.json; to open it in Vim, use:

vim myfile.json

The file will open in the Vim editor:

Now, that the file is opened in Vim, ensure you are in the command mode, if not press the escape (Esc) key to enter the Vim command mode (normal mode). Type the following command and press enter:

:%!jq .

In the above command:

% (range) is used to specify the range, % particularly means the whole file. It is a shortcut way of representing 1,$ mean from line 1 to the end of the file.
! (filter) is applying the command to the specified range of the file.

After applying the jq command press Enter, and the JSON file will be formatted in a comprehensible way as can be seen in the following image:

To save the file enter in the command mode and type :w.

2. Format JSON Files in Vim using Python json.tool Module

To format JSON files using Python json.tool module, first, ensure you have Python installed on your system. In Linux, to check if Python is installed or not use the following command:

python3 --version

Open the JSON file in the Vim editor and execute the following command to format the data:

:%!pyhton3 -m json.tool

The -m is a module name flag used to run the specific module script from the system.

Press Enter to view the output:

Here we go, the JSON data is now formatted in a human-readable format. Type :w in the command mode of Vim to save the changes.

The python3 command can directly be used to format the JSON file, for that, use the following syntax:

pyhton3 -m json.tool [filename].json

For example:

pyhton3 -m json.tool myfile.json

The output of the above command will be:

To save the output into another file use the redirection operator:

python3 -m json.tool myfile.json > myfile_new.json

To verify read the file:

cat myfile_new.json

Conclusion

Vim is a powerful editor that is not only used to modify the code of various programming languages but also to format the text using many plugins. JSON is a widely used cross-platform data interchange format that usually comes in minified form which is hard to read. Well, Vim can help to format complex JSON files into the human-readable form using the JQ plugin with :%!jq . command and Python json.tool module with :%!python3 -m json.tool command.