Friday, December 20, 2013

A comparison of Javascript IDEs

Jump to results


I am primarily a developer of .NET, but lately I've been working more and more with Javascript and HTML5. Like many of my readers who've also primarily been working with static languages like C# and Java, I also see the trend of applications previously only viable to develop in a compiled language, now being developed with web technology. The browser support of HTML5, Javascript and CSS3 is now very good across the board, so much that I'm tempted to call it mature. When it comes to tooling though, I've been surprised more than once to see professional developers speaking at conferences bringing up their solution in what I presumed was simple text editors such as Sublime Text or Notepad++. Not that there's anything wrong with those editors, its just that they are just that: Editors. Not IDEs: Integrated Development Environments - products that have a birds eye perspective on your solution as a whole and aids you in crafting great applications as apposed to files.

So was I wrong? There were three options:

  1. Sublime Text has actually become a fully fledged IDE
  2. Sublime Text is the state of the art of Javascript editors, although not on par with IDE's for static languages.
  3. The speakers aren't using the best tool available.

I decided to find out which of the three was true, and the result I present to you in this blog.


What I've done in this test is to gather a number of criteria I believe are essential in a modern IDE for effective programming. The criteria I bring with me from years of experience of using tools such as Visual Studio and Eclipse developing C# and Java. The criterias may not be exactly ties of the IDE/editor. The criteria I then tested on a range of IDE's which I believed were good developing Javascript, and editors I've seen others praise as good IDEs.

1) If you feel I've left out some important criteria or editors, feel free to comment on this blog, and I'll consider compiling a version 2.

The criteria

Here is the list of criteria I tested:

1. Intellisense / auto-complete

Is the editor capable of providing typing hints both on framework and self-coded functions? Will it provide parameter info on all functions? Even on functions in other files? This is an important feature both because it helps on typing speed, but more importantly it reminds you what the signature of any function is. It will save you a lot of Googling (framework functions) and solution2 navigation (own functions). This is a major time-saver when properly implemented.

2) I use the term solution as meaning a set of HTML, Javascript, CSS and content files which have some sort of interdependency, and together form an application.

Intellisense on a framework function in Netbeans

2. Solution navigation

Go to definition: When the signature of the function is not enough and you want to view (or edit) the contents of the function, a quick way to navigate to the function call you're looking at is useful. This should be a one-keystroke shortcut from anywhere in the solution. This also goes for variables, as it for instance can be useful to see the initialization code of the variable.

Find usages: (Aka "Find references") Could be used to navigate to a concrete usage which you don't remember exactly where was, or it could be used to determine what the impact of a change of this function will have. Not in terms of renaming the function, because refactoring should take care of that, but for changing behavior.

Navigate to file: When the cursor is on the "href" or "src" part of a script- or stylesheet-tag, you should be able to navigate to that file with a single key press.

3. Refactor: Rename

Of all the refactoring functions, this is the one I use most often. This is the only one I'm truly dependent on. I utilize and appreciate others, but if the IDE doesn't have support for solution-wide renaming, you're in trouble. Most likely you'll often end up with sticking with original names of all functions and variables as the program evolves, because of the hassle of changing names. But behavior and meaning of functions change. So should names. There's nothing I hate more than finding a code base with the function getDollarValue only to find it accepts a parameter for an arbitrary currency.

4. Code outline view

I find it useful to have a quick overview of a file or class in a window pane next to the code itself. It quickly gives you an indication of the size of the file, it's role and concerns. It helps you keep the architecture clean and the code tight, in addition to be a navigational aid.

The Navigator pane in Netbeans

5. Syntax error highlighting

In a parsed language this is even more important than in a compiled one. Why should I have to waste time running the application and checking the console view only to find out I forgot a semicolon?

Syntax error hint in Visual Studio 2013

Debugging (not included)

Some of the IDEs have debugging capabilities. I haven't considered this feature essential because all the majors browsers have this now so you might as well use the browser for debugging. For those who have it though (All but Sublime), it might be better to use the IDE-debugger for convenience.

The editors

Visual Studio 2013

Visual Studio from Microsoft should be well known from anyone coming from a C++ or .NET-world. It's a monster of an IDE both in terms of size and list of features. In the later years Microsoft have had great focus on improving the support for Web technology, including Javascript. They're not quite there yet but they're getting there.

Visual Studio 2013 + #Resharper

If you purchase Jetbrains' Resharper-plugin for Visual Studio, you're getting all the coding support you need and more. It's going to cost you though - not only the license cost of Resharper (~$150 for a personal license), but you're not getting away with the Express edition of Visual Studio anymore either.


Jetbrains is not only developing VS-plugins. They have their own IDE(s). WebStorm's Javascript support is nothing short of superb. The sister-product PhpStorm also adds support for the PHP language, if you're into that.


One can't write a review of an IDE of any language without mentioning Eclipse. I was actually quite impressed with the Javascript features you get for free (as in beer) from this IDE. It doesn't come for free in regards of man-hours though. First you need to install the Javascript Developer Tools plug-in, then you have to configure the key bindings for the functions you'll need, and then - if you're lucky - you may start being productive (I wasn't that lucky).

Sublime Text 3 + SublimeCodeIntel (ST3+SCI)

Sublime Text 3 (ST3) is a very sleek and good looking editor with a lot of nifty features you don't find anywhere else. But is it an IDE? Everywhere when the discussion of Javascript editing in ST3 comes up, the add-in SublimeCodeIntel is mentioned in the next sentence. This package will give you Javascript intellisense and some navigational functions and blurs the line between an editor and an IDE.


Cloud9 is stands out in the crowd as the only web-based IDE. I saw it mentioned in a closed question on Stack Overflow addressing the same question as I do in this blog post. I must admit I was highly skeptical to a web-based IDE and didn't have very high expectations going in. But I was surprised and impressed how far they have come. They have It still doesn't quite make it to elite league of IDEs, but I'll be following the development of this and similar services keenly in the years to come.

Google Chrome

Wait a second, you say.. Isn't that a browser? You're including both text editors and browsers in this test? Yes I do. Because people are starting to claim that Chrome is an IDE. I wanted to test if that claim held up. From my results you'll see that it didn't. It's a great Javascript debugger and on-the-fly hack-tool, but it's not an IDE. Yet.

vim (not included)

Vim is not included in this test. Many developers use Vim sort of as an IDE (comparable to Sublime Text 3) and would probably like me to include it. I didn't do that primarily because I don't have the time to get to know Vim and its plugins well enough to be able to answer all the questions. From what I've read, you should be able to get some Code hints (intellisense) and also a Tag list which acts like a Code outline view. Refactoring support is absent as far as I can tell.

I don't believe anyone should switch to Vim solely because they're looking for a good Javascript IDE. There might be many good reasons to learn Vim, but as far as Javascript IDE's goes, it's not the best as of today. I know it's an editor - not an IDE, but the same goes for Sublime Text 3. Yet these lines seem to blur.

The result matrix

So here are the results, after hours of installing, configuring and testing code in the different IDE's:

Feature\IDEVS2013VSVS2013+R#VS+ R#WebStormWSNetbeansNbEclipseEcST3+SCIST3Cloud9C9ChromeCh
1. Intellisense
a) DOM functions YYYYYYYN
b) Own functions/variables *YYY*Y**
c) ...showing parameter list YYYYYY*N
d) File references (src, href) NYYYNNNN
2. Navigation
a) Go to declaration *YYY*Y*N
b) Navigate to file (src, href) NYYY*NNN
c) Find usages NYYNYNNN
3. Refactor: Rename
a) Functions NYY*Y1NYN
b) Variables NYY*Y2NYN
4. Outline*view NYYYYNNN
5. Syntax error highlighting NYYYYNYN

*) Only within the scope of a single file. Not solution-wide.
2) Only when using the "var"-keyword in front. When in form "mylib.someVar", it does not work.

Please leave a comment if you find any errors in the table.


I was pleasantly surprised on how good the Javascript support were in many of the IDEs I hadn't tested previously. I was similarly disappointed with Visual Studio 2013 out of the box, which I thought had better support after hearing talks from Microsoft-guys the later years on the focus on web technology for their IDE. Sublime Text 3 performed as expected - it's good for quick editing of small projects, but it won't hold up for larger project against the other guys.

I won't name a single IDE as the best - I haven't tested them all well enough for that. But if you are developing large Javascript applications, you won't go wrong with either VS2013 with Resharper, Netbeans, WebStorm or Eclipse. I guess it depends more on what you're used to, what your project manager offers or what your wallet can afford.

As for the question coined in the "motivation" section - I'd say it's a clear #3, given the question was "best tool for developing Javascript solutions". I do understand that in a presentation context, other factors may come to play. In short: choose whatever tool you like, but please make a consious and educated decision! I hope this article have contributed in educating you just a little bit.


  1. Also I suggest to look st Codelobster
    It works very good for me

  2. In short, if you and I are going to learn Java, we`ll have to spend
    a lot of time on this) My friend usually says: "The correct method of training guarantees the right result." And I truly agree with such statement, in addition, Matthew advised split method java which I intend to apply for the most effective teaching. First, I want to know the components of the code, are you with me?

  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. Javascript Online Training from India























  24. شركة الصفرات لتنظيف بالبخار
    جميعاً ندرك أن التنظيف ضمن أهم الأشياء التى نقوم بها و بالشكل الدورى تجأة الأماكن والأشياء التى الصفرات للنظافة نملكها ونتعامل معها مثل الأثاث والمنزل والفنادق وغيرها الصفرات لتنظيف الخزانات من الأشياء مثل السجاد والموكيت كل هذا يعنى أن التنظيف خيار لا بديل عنة ولا يمكن الأستغناء عنة لهذا فأن العمل على التطوير من الطرق الصفرات لتنظيف الموكيت المستخدمة والأسهل والأسرع ذلك السبيل الأول من أجل الحصول على الأفضل و الأسرع فى الصفرات لتنظيف المنازل عالم التنظيف أن البخار يعتبر من أكثر العناصر التى تقدم لنا النتائج الأفضل المبهرة والتى من شأنها القضاء على الفيروسات والجراثيم من على الأسطح الصفرات لتنظيف المجالس و الأرضيات و مع الأستمرار فى تلك العوامل ومع التطوير من قدرات العمالة يصبح الأمر الصفرات لتنظيف الشقق أفضل دائما و يسير ناحية الخيار الأفضل والأهم أن شركة الصفرات لتنظيف بالبخار ترسم دائما الأسس و المعايير التى تجعلها الأولى شركة الصفرات للتنظيف فى المملكة و الأوسع أنتشاراً وذلك لآنها تعتمد على قوة البخار المذهلة و الكبيرة الصفرات لتنظيف المسابح و التى تطهر و تعقم الأسطح و الأرضيات و غير ذلك الكثير
    من خدمات الشركة عمليات نقل الاثاث ايضا تتم من خلال عمالة مدربة وسيارات مغلقة للحفاظ علي الصفرات لنقل العفش الاثاث من اشعه الشمس اثناء النقل نتميز بالجديد في هذه العملية خبره في نقل العفش والعمل الصفرات لنقل الاثاث علي تغليفه ونقله



  26. Greetings! I simply want to offer a huge thumbs up for the great stuff you have got here on this post. I’ll be coming back again to the blog for more very soon. best blog engine for developers


  28. I can not stop myself to read this post! Thanks. Kanhasoft is the mobile and web solution developer in India and USA. We are developing a complete enterprise solution to boost the business. Visit our site to know more.

  29. شركة رواد الحرمين الموقع الرائد فى عالم الخدمات المنزليه والاول بالمملكه العربيه السعوديه
    لما يتمتع به من خدمات مميزه ، فالبرغم من اننا مؤسسه ربحيه الا ان
    مزاولة نشاطتنا كلها مرتبط على نحو وثيق بتلبية

    شركه عزل فوم بالدمام

    شركه تنظيف منازل بالدمام


  30. أبرز خدمات مؤسسة الحرمــين للمقاولات العامة بالدمام والرياض

    شركه عزل فوم بالدمام


  31. شركة تنظيف بالباحة التنظيف من الأشياء المهمة التي يجب الاهتمام بها فهناك العديد من الشركات التي تقوم بعمل التنظيف بشكل ممتاز كما تعمل بدقة كبيرة وكفاءة عالية.
    فيتم التنظيف بعدة طرق مختلفة ولكن تحتاج الى ايدي عاملة مثل شركة تنظيف بالباحة

    حتى يتم العمل على أفضل وجه فيجب القيام بالتنظيف باستخدام مواد التنظيف التي تتناسب مع كل ما تقوم بتنظيفه سواء كان سجاد او أثاث أو ستائر أو أرضيات أو غيرها من الاشياء الاخرى والاماكن الاخرى.
    فتحتاج عند القيام بالتنظيف إلى أدوات تعمل على التنظيف بشكل جيد وبطريقة جيدة تنظف بعمق ولكنها لاتتلف الاشياء الخاصة بالمنزل.
    كما يجب أيضا الاهتمام بالتعقيم للحمامات والمطابخ والتنظيف بدقة لأن تلك الاماكن أكثر تعرضا في بيتك او منزلك للاتساخات بشكل كبير شركة تنظيف بالباحة
    وتحتاج إلي التنظيف بشكل مستمر .
    كما أن هناك أيضا العديد من الاشخاص الذين يعانون من الاتساخات الموجودة بالاثاث والكنب بمختلف أنواعه فلكل نوع من أنواع الكنب طريقة مختلفة عن الاخري في التنظيف سواء كان من الجلد أو قماش أو مغطى بالخشب فيجب تحديد نوع المنظف الذي تقوم باستخدامه في التنظيف قبل الاستخدام حتى لا يتسبب في أي ضرر للكنب أو للاثاث.
    لا تقتصر عمليات التنظيف علي مكان محدد دون الآخر بل إنها من الأمور الهامه لجميع الأماكن سواء كانت منازل أو فلل أو شقق وايضا جميع أنواع الاثاث وخاصه السجاد والانتريهات الذي تتراكم فيه الاوساخ والأتربة والروائح الكريهه.
    كما يجب أن تتم عملية التنظيف للخزان أيضا والذي يعتبر من أهم الأغراض في كل منزل، ومن أهم أساليب النظافة أن يتم مراعاه التنظيف الجيد لمواسير الصرف والمجاري التي تعتبر من أكثر الأماكن التي تتعرض للانسداد وتراكم الحشرات بها وتتسبب في الأمراض.
    كما يجب أن تتضمن عملية التنظيف أيضا التخلص من القاذورات بشكل مستمر وعدم تراكمها في المنزل فهي من أهم أسباب انتشار الحشرات والروائح الكريهه والتي هي مصدر للأمراض المختلفه.
    النظافة من الأمور الضرورية والتي يحثنا عليها الدين الإسلامي وتتطلب تنفيذ دقيق واتباع الخطوات التي توفر اعلي نسب حمايه ممكنه والتخلص من مشاكل المنازل التي تنتج عن انتشار هذه الاوساخ المزعجه.
    شركة عزل أسطح
    من المعروف ان عزل الأسطح من المهام التي من الممكن ان تقوم بيه شركة عزل أسطح فهي من المهام التي من الممكن ان تساهم بشكل كبير في حماية الأسطح شركة عزل اسطح بالباحة
    وهذا من الكثير من العوامل الضارة والتي من الممكن ان تؤثر على الأسطح


  32. شركة نقل عفش بالرياض وجدة والدمام والخبر والجبيل اولقطيف والاحساء والرياض وجدة ومكة المدينة المنورة والخرج والطائف وخميس مشيط وبجدة افضل شركة نقل عفش بجدة نعرضها مجموعة الفا لنقل العفش بمكة والخرج والقصيم والطائف وتبوك وخميس مشيط ونجران وجيزان وبريدة والمدينة المنورة وينبع افضل شركات نقل الاثاث بالجبيل والطائف وخميس مشيط وبريدة وعنيزو وابها ونجران المدينة وينبع تبوك والقصيم الخرج حفر الباطن والظهران
    شركة نقل عفش بجدة
    شركة نقل عفش بالمدينة المنورة
    شركة نقل اثاث بالرياض
    شركة نقل عفش بالدمام


  33. شركة نقل عفش
    اهم شركات مكافحة حشرات بالخبر كذلك معرض اهم شركة مكافحة حشرات بالدمام والخبر والجبيل والخبر والاحساء والقطيف كذلك شركة رش حشرات بالدمام ومكافحة الحشرات بالخبر
    شركة مكافحة حشرات بالدمام
    شركة تنظيف خزانات بجدة الجوهرة من افضل شركات تنظيف الخزانات بجدة حيث ان تنظيف خزانات بجدة يحتاج الى مهارة فى كيفية غسيل وتنظيف الخزانات الكبيرة والصغيرة بجدة على ايدى متخصصين فى تنظيف الخزانات بجدة
    شركة تنظيف خزانات بجدة
    شركة كشف تسربات المياه بالدمام
    شركة نقل عفش واثاث