20

It is strange, but I've been searching a while with no acceptable result for finding a tool to highlight, validate and collapse JSON file data to edit manually in visual studio. I'm not even dreaming about IntelliSense yet. It is so popular format and no chance to edit it IDE? No plugins or native support. Trying to wire scripteditior to json had no effect.

The closest thing I've got to be able to edit json manually in convenient way is Google Chrome extension for http://jsoneditoronline.org/ that allows me to open and save files from local disk.

I've also tried to search for solutions for Visual Studio 2010 - but could not find any for this version either.

Anybody know how I can have this functionality in VS IDE?

thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
Sergey Novikov
  • 644
  • 1
  • 4
  • 14
  • For JSON editing I'm using this tool [here](http://www.xml-tools.com/ValidatorBuddy.htm). The editor supports JSON well-formed checking, syntax-coloring and auto-completion. Because this is not a VS plugin I just add this as a comment and not a real answer. Hope it helps. – lichtfusion Jan 15 '13 at 10:17
  • thank you for your suggestion. I'll try this tool to see if it (also not free) is better that, for instance, that chrome extension... but I'm still looking for plugin like tool. – Sergey Novikov Jan 15 '13 at 10:50
  • What happens when you combine Script Editor with these JScript Editor Extensions (that support collapse) http://visualstudiogallery.msdn.microsoft.com/872d27ee-38c7-4a97-98dc-0d8a431cc2ed Related: http://stackoverflow.com/questions/2855697/addin-to-visual-studio-for-visualizing-a-selected-json-string-in-the-editor http://stackoverflow.com/questions/4034082/json-javascript-highlighting-in-visual-studio-2010 http://stackoverflow.com/questions/1464785/json-editor-preferably-for-visual-studio – jessehouwing Jan 15 '13 at 11:00
  • I've checked option of setting "Tools -> Options -> Text Editor -> File Extension -> End your extension 'json' and select 'Script Editor' and click 'add" But that doesn't change anything for some reason even after reload. Maybe it is issue with 2012. I have javascript markup from http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6 maybe this is problem... But as one of the above link says - even with working JS markup for JSON it won't be completely correct as there are differencies. – Sergey Novikov Jan 15 '13 at 14:05
  • Not quite what you're after I know, but there's a great json formatter available here: http://www.bodurov.com/JsonFormatter/ Allows you to take a line of unformatted json and format it nicely. – Ilan Nov 19 '13 at 09:51
  • Thank your for suggesting that. There is still no good solution availible for most popular IDEs such as VS or Eclipce that works correctly one more or less large json files. Online tools are better and I use one of them http://jsonviewer.stack.hu/. Ilan, your suggestion also looks interesting, thank you for sharing, I'll give it a try. But the major downside of online tools is that you can easily loose some of your work. There is no ctrl-s there and you have to copy paste all document all the time if you need to edit here or there. – Sergey Novikov Nov 19 '13 at 13:23

3 Answers3

7

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
Frederic Torres
  • 682
  • 7
  • 14
  • Thank you for answer. I've just tested this extension. It does work only for very small json files. BUT on bigger ones there is a huge lag and sometimes even more or less long unresponsiveness of VS IDE. – Sergey Novikov Feb 15 '13 at 09:04
5

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!

Dmitry Pavlov
  • 30,789
  • 8
  • 97
  • 121
  • Thank you for another suggestion, I'll give it a try. But still it is lot of hassle to add and remove variable declaration testing each new update. Still the is no good solution for (a little bit too) large files with json data. – Sergey Novikov Dec 15 '13 at 18:30
  • Yeap. A good solution would be to write a language service for visual studio, and associate this language service with .json extension. If anybody wanna try that - start reading about VS SKD (Visual Studio eXtensibility). Here is my old post about what the 'vs language service' is: http://vsx-insider.blogspot.ru/2008/02/simple-managed-language-service-sample.html – Dmitry Pavlov Dec 15 '13 at 18:34
  • @SerrNovik You mention that there is no solution for large JSON files. Are they really that large that an editor like JSONBuddy can't open it? – Clemens Dec 16 '13 at 14:40
  • @Clemens - I guess the goal is to edit JSON files within the IDE (Visual Studio 2012) rather than external editor. – Dmitry Pavlov Dec 16 '13 at 15:35
  • Solutions I've found for Visrual Studio or Eclipce that can collapce and check validity of json files start to work slow at 500kb. I'm not even dreaming about IS. My largest file is about 1.5mb data file and it is impossible to edit it. At the same time there is several in browser editors that handles those ammount of date without being slow. – Sergey Novikov Dec 16 '13 at 20:13
  • If you maintain these 1.5 MB files manually - I would consider to thing about splitting each into several parts (or maybe redesign JSON data structure which will cause more files with less size) – Dmitry Pavlov Dec 16 '13 at 20:16
  • Update: I've just checked JSONBuddy tool. on 1.3mb json it is working slow, for instance when I type symbols displayed about half a second after or even with greater delay. About the same story as VS behaves. There is tab called large files viewer. But all it does (as title says) just let you view and not edit. – Sergey Novikov Dec 16 '13 at 20:17
  • Thank you Dmitry for pointing out. That's what I'm forced to do, but it is inconvinience in my case. From what I see files under 2-3 mb should be handled fine by editors, but strangly that most popular IDEs doesn't even support json out of box. . Also it is not usually the case, but I've seen some c# code files larger and there was not any problems with IDE. – Sergey Novikov Dec 16 '13 at 20:23
  • I agree. Every IDE vendor should add a full-featured JSON editor. – Dmitry Pavlov Dec 16 '13 at 20:32
  • Ok, thanks for the input. I know the guys developing JSONBuddy and I will let them know about the issues on editing large JSON documents. Maybe they can do something about it... – Clemens Dec 17 '13 at 12:43
  • However, I was curious and tried editing a 2 MB JSON on a rather old Celeron notebook with 1,6 GHz and actually typing was quite fast. Sure, there is a minor delay but editing is possible by all means. – Clemens Dec 17 '13 at 14:15
5

Great news!

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

enter image description here

Dmitry Pavlov
  • 30,789
  • 8
  • 97
  • 121
  • Some more screenshots here: http://blogs.msdn.com/b/webdev/archive/2014/02/28/new-json-editor-features-in-visual-studio-2013-update-2-ctp2.aspx – Dmitry Pavlov Feb 28 '14 at 16:59
  • What to install in order to have JSON support from below files: rm_Client.exe rm_DeploymentTrial90.exe rm_Server.exe tfs_express.exe tfs_server.exe VS2013.2 CTP.exe vs2013.2.ctp2_rm_enu.iso vs2013.2.rc_agts_enu.iso vs2013.2.rc_tfs_enu.iso vs2013.2.rc_tfs_exp_enu.iso – slobodan.blazeski Mar 25 '14 at 13:56
  • I guess VS2013.2 CTP.exe, as it looks like "CTP2 of Visual Studio 2013 Update 2" – Dmitry Pavlov Apr 04 '14 at 14:51
  • 2
    Good answer, but surely not the correct one since the original question was specifically for VS 2012? – Kenny Hung Oct 28 '15 at 13:44