Updated April 20, 2023
Introduction of Sublime Pretty JSON
Sublime Pretty JSON is an extension with Sublime for Prettifying JSON. Here comes another new word which is Sublime, so lets get some idea on this. Sublime is a complex text editor which is generally used by developers. It has some of the wide features like Auto Indentation, Sidebar, Macros, Plugins and Packages for working with code. Mostly, Python and JavaScript developers are the intended group who search for Text Editor IDE.
Sublime Text Editor has the ability to solve Linker errors, keeps track of files and color combination of syntax with good connectivity of version control systems like GIT.
Syntax of Sublime Pretty JSON
Sublime Text is an easy option to Pretty format JSON, also we can prettyify JSON in our browser.
Steps to follow:
- Install Sublime Text 3 editor and Open it
- Based on OS, installation steps might change a bit.
- If MAC OS, press CMD+SHIFT+P, then select ‘Install Package’. Search for ‘Pretty JSON’ and install.
- If Windows, press CTRL+SHIFT+P, then select ‘Install Package’. Search for ‘Pretty JSON’ and install.
- Once the installation is done, select JSON string, If MAC OS, press CMD+CTRL+J else if Windows, press CTRL+ALT+J.
With this we need not copy our JSON string from sublime, paste and format in browser, then copy formatted JSON in sublime like before. We can Pretty JSON in our text editor Sublime itself. Please refer the below screen prints for pretty JSON steps to be understood further.
On opening Sublime Text Editor, Select Preferences à Package Control à Install Packages.
On selecting Install Package, drop down will appear as to what packages user needs to install, here we are searching for Pretty JSON.
Examples of Sublime Pretty JSON
Following are the examples are given below:
Example #1
Input:
{"employees":{"employee":[{"id":"100","firstName":"Saideep","lastName":"Reddy","company":"Infosys"},{"id":"200","firstName":"Anusha","lastName":"Kakarlapudi","company":"Cognizant"},{"id":"300","firstName":"Karthick","lastName":"Sai","company":"Capgemini"},{"id":"400","firstName":"Harika","lastName":"Reddy","company":"IBM"}]}}Output:
Input JSON given in Sublime editor looks as below
On giving command, CTRL+ALT+J,
Example #2
Input JSON:
[{"firstname": "James","lastname": "Bond","mobile": ["123-456-789","001-123-456-789"]},{"firstnam": "James","lastname": "Bond","mobile": ["123-456-789","002-123-456-789"]},{"firstnam": "reddy","lastname": "ponisha","mobile": ["123-456-789","003-123-456-789"]},{"firstnam": "harika","lastname": "rao","mobile": ["123-456-789","004-123-456-789"]},{"firstnam": "karthick","lastname": "krishnan","mobile": ["123-456-789","004-123-456-789"]},{"firstnam": "sai","surname": "deep","mobile": ["123-456-789","005-123-456-789"]}]Output:
Input looks like below in sublime
Example #3
Input JSON in sublime:
{"glossary": {"heading": "example glossary","desc": {"heading": "S","descList": {"title": {"ID": "SGML","SA": "SGGMMLL","Term": "Standard Generalized Markup Language","Acronym": "SGML","Abbrev": "ISO 8879:1916","definition": {"para": "A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso": ["GML", "XML"]},"GlossSee": "markup"}}}}}Output:
On pressing CTRL+ALT+J
Example #4
{"widget_json": {"debug": "on","window": {"title": "Sample Konfabulator1 Widget1","name": "main_window","width": 520,"height": 100},"image": {"src": "Images/Sun.png","name": "sun","hOffset": 150,"vOffset": 150,"alignment": "side"},"text": {"data": "Click Here","size": 31,"style": "italic","name": "textdesc","hOffset": 150,"vOffset": 100,"alignment": "side","onMouseHover": "sun1.opacity = (sun1.opacity / 100) * 30;"}}}Output:
Sublime Pretty JSON works similar to JavaScript Pretty JSON where we use the Stringify method and define a 3rd parameter for indentation which is used for Prettifying JSON. Here, now we need to copy the JSON, paste it in browser for formatting the JSON, and then again paste it in our sublime text editor here. Inside Sublime itself, we are prettifying JSON using Package control where we can install various packages. Here we install Pretty JSON package and prettify JSON. Similarly, we have Pretty YAML, Python Pretty Print, HTML-CSS-JS-Pretty and Pretty Ruby and many more.
For installing these packages, can be downloaded from a browser and copied into Sublime’s package folder. First package to be installed with Package Control, without this user cant proceed with the installation of other packages. Basic packages to be installed withing Sublime are Emmet, DocBlockr, Color Highlighter and Console Wrap, themes and color schemes. There are also some advanced packages like Markdown Preview, HTML5, SCSS, Markdown TOC, JSFormat, Better JavaScript, jQuery and AngularJS.
Conclusion
As we have seen what is Sublime and how is JSON prettified here in Sublime text editor IDE. With illustration of few simple examples of JSON Pretty, you people can explore even further on Sublime Editor as to what all the programming languages does it support. Various packages can be installed so you peoplecan go and explore each and every package its use in Sublime. Pretty JSON in Sublime is easier way to Pretty JSON compared to Pretty JSON in JavaScript and Python using code and methods like stringify, space parameter in stringify method.
Recommended Articles
This is a guide to Sublime Pretty JSON. Here we also discuss the introduction and syntax of sublime pretty json along with different examples and its code implementation. You may also have a look at the following articles to learn more –
