Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Python Tutorial
  • Interview Questions
  • Python Quiz
  • Python Glossary
  • Python Projects
  • Practice Python
  • Data Science With Python
  • Python Web Dev
  • DSA with Python
  • Python OOPs
Open In App
Next Article:
How to Comment in JSON Files?
Next article icon

How to Format JSON in VSCode

Last Updated : 17 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

VSCode offers multiple ways to format JSON files, making it easy for developers to choose the method that best suits their workflow. A well-formatted JSON file is easier to read, understand, and debug, especially when working with complex data structures.

Formatting JSON in VSCode

Let us see these ways one by one. JSON formatting refers to the way JSON data is organized and presented. Proper formatting involves:

  • Indentation: Using spaces or tabs to create a clear hierarchy of nested objects and arrays.
  • Whitespace: ensuring adequate space around colons, commas, and brackets for readability.
  • Consistency: adhering to a uniform style throughout the document to maintain clarity.

Using Built-in JSON Formatter

One way to format JSON in VSCode if by using the inbuild JSON formatted. All you need to do is follow the steps given below:

  • Open JSON File: Open the JSON file you want to format in VSCode.
  • Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
  • Format Document: Type "Format Document" and select it from the list of options.
  • Formatting: VSCode will automatically format the JSON file based on the default settings.

Here is an example of unformatted JSON data:

{"name":"John","age":30,"city":"New York","hobbies":["reading","traveling","swimming"],"
education":{"highschool":"ABC High","college":"XYZ University"}}
Annotation-2024-07-12-005231
Built-in JSON Formatter

After formatting, the JSON data should look like this:

Annotation-2024-07-12-005253
Output

JSON Formatter Extension

For more advanced formatting options, you can install a JSON formatter extension:

  • Extensions View: Click on the Extensions icon in the Activity Bar or press Ctrl+Shift+X.
  • Search for JSON Formatter: Type "JSON Formatter" in the search bar.
  • Install: Select the JSON Formatter extension and click "Install".
  • Format JSON: With the extension installed, you can format JSON files using the commands provided by the extension.
Search JSON Formatter Extension
Search JSON Formatter Extension
Install JSON Formatter Extension
Install JSON Formatter Extension

Conclusion

Formatting JSON in VSCode is straightforward and can be achieved through various methods, including built-in tools, command palette, and extensions like Prettier. Properly formatted JSON enhances readability and maintainability, making it an essential practice for developers. By utilizing these methods, you can ensure your JSON files are consistently and correctly formatted.


Next Article
How to Comment in JSON Files?

H
heysaiyad
Improve
Article Tags :
  • Python
  • JSON
  • VS Code
Practice Tags :
  • python

Similar Reads

  • How to Install MongoDB for VSCode?
    MongoDB is an open-source document-or iented database, it is a very popular NoSQL database. This database does not store data in the form of tables. It is used to store large amount of data and allows you to work with large amount of data very efficiently. It provides official drivers for multiple l
    2 min read
  • How to Install Golang in VScode?
    GO is a compiled programming language developed by Robert Griesemer, Rob Pike, and Ken Thompson at Google. It was introduced in 2009 and is also known as golang. In this article, we are going to see how you can set up Visual Code Studio for Go language Development. We are going to install the necess
    3 min read
  • How to Format Strings in TypeScript ?
    Formatting strings in TypeScript involves combining and structuring text to produce clear and readable output. This practice is essential for creating dynamic and user-friendly applications, as it allows developers to seamlessly integrate variables and expressions into strings, enhancing the overall
    3 min read
  • JSON Formatting in Python
    JSON (JavaScript Object Notation) is a popular data format that is used for exchanging data between applications. It is a lightweight format that is easy for humans to read and write, and easy for machines to parse and generate. Python Format JSON Javascript Object Notation abbreviated as JSON is a
    3 min read
  • How to Comment in JSON Files?
    JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. However, JSON does not have a built-in syntax for comments. This limitation can be challenging when you want to annotate your JSON data wi
    2 min read
  • How to JSON decode in Python?
    When working with JSON data in Python, we often need to convert it into native Python objects. This process is known as decoding or deserializing. The json module in Python provides several functions to work with JSON data, and one of the essential tools is the json.JSONDecoder() method. This method
    5 min read
  • How to generate Json File in PHP ?
    In this article, we are going to generate a JSON file in PHP by using an array. JSON stands for JavaScript object notation, which is used for storing and exchanging data. JSON is text, written with JavaScript object notation. Structure: {"data":[ { "sub_data1":"value1", "sub_data2":"value2","sub_dat
    3 min read
  • How to Convert Hash to JSON in Ruby?
    Ruby Hash is an unordered set of data in key-value pairs. These are mutable and can store multiple data types. JSON stands for Javascript Object Notation and is a human-readable file format that is commonly used in web services and API calls. In this article, we will discuss how to convert a hash to
    2 min read
  • How to Convert Map to JSON in TypeScript ?
    In TypeScript, we can convert the Map to JSON by manipulating the key-value pairs of the Map into JSON-formatted string. We can use various approaches like JSON.stringify, fast-json-stringify, and json-stringify-safe Libraries for the conversion. Table of Content Using JSON.stringifyUsing fast-json-
    5 min read
  • How to Create and Setup Spring Boot Project in VSCode?
    Visual Studio Code (often abbreviated as VS Code) is an Integrated Development Environment (IDE) renowned for its robust support across various programming languages, including procedural, object-oriented, and hybrid languages like C, C++, Dart, Java, Python, PHP, and more. It also supports framewor
    4 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences