The Best JavaScript IDE

Visual studio is probably the best JavaScript editor out there. This is not a comparison test between the IDE’s it’s just my opinion why VS kicks ass to others. To be completely honest

1. I haven’t testes all the IDE’s out there
2. I’ve been using VS for more than 10 years
3. I’ve been using eclipse for a couple of month
4. Other coworker facing my state (1, 2) also shares the same opinion.

After reading a coworker of mine blog post about JavaScript IDE’s, I decided to give Aptana (eclipse plugin) a chance: I worked on it for more than a week building a JavaScript application and wasn’t impressed at all, all the features it presented where very similar to the basic feature VS has + the debugging experience was absent.

My co-workers tried jet brains WebStorm and had the same feeling I had with Aptana , beside the IntelliSense was awful, just hitting the “.” (dot) led to full blown list of, what seems to be, all @#$%( JavaScript had to offer.

For the obvious reasons I’m not going to mention here notepads (including sublime or notepad++). As good as they are – they are still notepads with script highlighting.

Visual Studio (10)

After switching to VS I could feel a cool breeze on my face and I could breathe again easily. The first thing I wanted to do is to split the project into libraries:

Consider the following tree:

• js
  • controllers
    • controller1.js
    • …
  • models
    • model1.js
    • …
  • views
    • view1.html
    • …
  • app.js
• lib
  • jquery
  • …
• html
  • index.html

But as JavaScript dictates I need a way to “compile” all the files into one file. I could easily write a post build event, but instead I wanted something more light weight so I don’t need to compile things at all, so implemented a T4 template that generated the index.html and the app.js file– first step. Then with a click of a button the files get generated. I can add this now as build event or make sure that whenever someone saves a file the template will get generated. But still, I just wanted to get things running in a couple of minutes so I stopped here. By the way, I used an empty web project as my starting point.

The second step was to integrate JSLint (by Douglas Crockford), which already has integration suggested by the community here, and also you can find it as VS Extension

The third step was the Visual Studio Gallery looking for JavaScript extension, there I added the JavaScript parser which added tons of cool features like “Tree of functions”, “Runtime source support” for debug and much more.

Of course you can find more great extensions, but this was enough for me to get me going.

The forth step was to debug which gave me the full power of VS instead of just using Firebug and a browser, I could really do break points, watches, stack, “go to definition” and much more without reloading the page. FireBug (or whatever you use) is still mandatory tool, but just for the sake of debug the IDE should be enough.

The fifth step is not a real step, the guys at Microsoft are trying really hard to show up real IntelliSense, which is one of the problems with dynamic coding. And about 50% of the time, if you have all the references right and if you have been playing nice – you can get a nice IntelliSense showing up helpful suggestions.

Now, what more can you ask? Really? Well there is more in VS 2011 (in beta now)

• Minifying and prettifying are built in (you can get these in MVC 4.0 as well)
• IntelliSense is automatically rebuild
• ECMAScript 5 support
• Better IntelliSense 
• Dynamic load of script references like jsdefere
• JavaScript console built into VS
• And a lot more: CHECK IT HERE

I know some of you are religious about their IDE or programming language, well, don’t be: VS has a lot more to offer than any other JavaScript IDE out there.

P.S.

If anyone wants the T4 templates I used please leave a comment or something.