JSON editor (highlight, collapse, validate) in Visual Studio 2012 IDE JSON editor (highlight, collapse, validate) in Visual Studio 2012 IDE json json

JSON editor (highlight, collapse, validate) in Visual Studio 2012 IDE


One option is to use the Text Highlighter extension for Visual Studio 2012, which offers syntax highlighting for the following text formats:

  • .json (also offer syntax validation)
  • .bat
  • .cmd
  • .ini
  • .txt
  • .log


There is another possible workaround - Web Essentials extension for Visual Studio.

I have a project where I keep my data as JSON in the text files. I need to keep it well JSON formatted (no extra or missed commas, etc..) and also I need to be able to expand / collapse JS objects (nodes) in editor.

To achieve that I used a Visual Studio extension - Web Essentials . You could also install it from VS Gallery via Package Manager within your IDE. This extension provides the features I need.

I renamed my file.json to file.js (after that Web Essentials starts regoignizing it as JS file).

The only little trick is to add a pseudo variable 'var z =' to make my file JS valid.

Note expand/collapse regions for JSON file opened in VS2012 with Web Essentials

Initially my JSON data was:

{    "company": "ABC Company",    "employees":    [        { "firstName": "John", "lastName": "Doe" },        { "firstName": "Anna", "lastName": "Smith" },        { "firstName": "Peter", "lastName": "Jones" }    ]}

After adding 'var z =' variable:

var z = {    "company": "ABC Company",    "employees":    [        { "firstName": "John", "lastName": "Doe" },        { "firstName": "Anna", "lastName": "Smith" },        { "firstName": "Peter", "lastName": "Jones" }    ]};

As I read JSON file on server side - all I need is to remove 'var z =' prefix before sending JSON content to browser.

Hope this helps!


Great news!

In CTP2 of Visual Studio 2013 Update 2 that was added a New JSON project item and editor

enter image description here