Integrating Google Javascript Compiler in Visual Studio

8 בנובמבר 2009

Friday, Google released some of their Javascript tools. Among them the Closure Javascript compiler. Being excited that Google has released Closure (the compiler), I decided to give it a go. So late Saturday night after the party was over and the kids were sleeping, I played a little with the online UI when I saw that the compiler services are exposed through a REST web service. At that point it would be a crime to go to sleep.


2 hours later…


In this screenshot you can see some compiler statistics. (Yes, you can use the compiler service as a pretty-printer or minifier)


stats


Dubious code is flagged with warnings. (I like the “Is there a bug?” message)


warning


If you get the script plain wrong, you’ll be greeted with an error.


error


I love the fact that it is possible to whip up something like this in just a couple of hours.


The Visual Studio Integration was built as a CodeRush plugin (which takes a full 5 minutes). The rest of the time was spent reading the Closure web service spec and parsing the results from the web service.


It’s not all good however. In the current implementation you need to copy the source from the editor to the code pane in the tool window which isn’t a great user experience. Also, there’s no easy way to “jump” to the error location when there is a warning or an error. There is also no UI for setting the compiler options.


Future Plans: (Maybe)



  1. Compile the enclosing scope under the caret by pressing a key combination.

  2. Integrate with Visual Studio Error tool window. (I have no idea how to do that)

  3. Expose the compiler options through an option page. (Currently I use some decent defaults)

  4. Any other ideas?

If there’s interest, I’m considering writing up a small series of how the plugin was built including source and binaries. (It’s small enough that it won’t take all my spare time)


Shout it


Update: Code can be found here – http://blogs.microsoft.co.il/blogs/kim/archive/2009/11/10/calling-the-google-closure-javascript-compiler-code.aspx

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

4 comments

  1. Shai9 בנובמבר 2009 ב 7:20

    Great idea , can you share the solution ?

    Reply
  2. Elijah Manor9 בנובמבר 2009 ב 19:09

    Do you have the code to share?

    Reply
  3. Andrew Mattie7 ביוני 2010 ב 2:06

    "It’s not all good however. In the current implementation you need to copy the source from the editor to the code pane in the tool window which isn’t a great user experience. Also, there’s no easy way to “jump” to the error location when there is a warning or an error. There is also no UI for setting the compiler options."

    FYI, I just released cc2vs to overcome exactly these issues. http://code.google.com/p/cc2vs/ . Your comment is what gave me the idea to do this. Perhaps you'll find it useful.

    Reply