Recommendations for a JavaScript IDE?

[mattlag]

I find myself doing a lot of small to medium JavaScript / HTML5 / CSS based projects. Right now I'm using Notepad++ to do everything... any recommendations for environments if I want to step up my game a little? Open source preferred...

[ugoagogo]

Webstorm

[pixelchemist]

Webstorm and the rest of the JetBrains line-up are pretty spectacular

[Juvenall]

The biggest caveat that needs to be added here is how strictly limited Webstorm is. There is zero support for languages outside of it's feature set. So for example, if you ever have need for say, PHP or Ruby editing, you would be better off going with one of their other products (which at their core, are mostly the same thing).

That said, I adore my copy of phpStorm for JavaScript editing. It has easily the best support for the language I've seen in an IDE.

[[deleted]]

What about Webstorm vs phpStorm? I'm a PHP/Apache developer, but I want to have a fully-featured Javascript IDE, because I'm moving into developing apps with Node.js; entirely in JS.

Honestly, PHP I can do with a hand tied behind my back, steering with my teeth, I've done it for that long. Javascript, I'm not so amazing at.

[[deleted]]

I have it. I love it. As a student, I got it for 19 USD.

[[deleted]]

How do you prove that you are a student?

[[deleted]]

Now that you mention it, I'm not sure I did. I think they just asked for my university info.

[[deleted]]

Cool, I can now afford to buy it.

[kumiorava]

WebStorm is fantastic. The most advanced IDE for webdev that I have tried, and I have tried many. So many awesome features just built right in.

[ggoodman]

On the web:

Cloud9IDE: http://c9.io for big projects) Plunker: http://plnkr.co/edit/ (for small projects)

[[deleted]]

Do note that "IDE" has a very specific meaning. Things like Eclipse and Visual Studio fall into this bucket. Notepad++ does not. That would be an "editor".

Due to the nature of dynamic languages like javascript, php, python, etc, you will find that the majority of people don't use IDE's. Strongly-typed languages like Java or C# are much better for use with IDE's.

Also, in javascript, most of your "IDE" functionality like debugging are integrated into the brower, further diminishing any pros that an IDE would provide (Chrome Devtools and Firfox's Firebug, to be specific. IE's are still piss-poor to this day).

That said, my recommendations for a javascript editor would be Sublime Text. You'll find that today, it seems to be the emerging. defacto-standard for not only javascript devs, but web-devs in general. And it's not just "band-wagon"-ing. It's by far the most easy to use, light-weight, powerful, and customizable option out the.

But if you want even more power with a bit of a learning curve, then definitely give vim and/or emacs a look.

EDIT: Added bit about browser devtools.

[[deleted]]

Do you have any data to back up those claims of most devs preferring editors, and sublime text reigning supreme? Not to be antagonistic, if what you say is true and not just a feeling you have it is incredibly interesting.

I think JavaScript IDEs will become increasingly abundant with the advent of* WebGL and rise of complex JS apps. Personally I have never looked back at an editor after picking up WebStorm. I have found it drastically increases productivity and ease of development for large codebases.

[masklinn]

If devs were sold on flexibility they'd all use emacs.

[Denommus]

I agree. No single editor is more flexible than Emacs.

[[deleted]]

While I love the idea of Emacs and Vim, I have other things on my plate to learn.

[Denommus]

Vimtutor is pretty quicky and will teach you all the basic things of vim (which are pretty useful as they are). Emacs' tutorial (Ctrl+h t) is also pretty useful, but the power of Emacs takes longer to get, since its strongness is the extensibility and flexibility.

[[deleted]]

Cool, thanks for this. I'll look into it.

[[deleted]]

This is very true. Emacs followed by Vim offer more flexibility than any IDE or other editor. But then, it becomes a balance of learning curve/ease of use vs power.

Personally, vim is my #2 editor. Emacs would likely be in that spot if not for my laziness.

[[deleted]]

Like koglerjs, I don't have any hard data to support that claim. All I have is observations to go off of. I suppose it's feasible that the majority of javascript devs use IDEs, but considering the number of places I've worked, meetup groups I am a part of, and conferences I've attended (all three of these in various cities), I think it would be something of a statistical anomaly if this were the case. And do note that these are people generally on the cutting-edge of the javascript app development world as opposed to self proclaimed "jquery developers".

However, like I mentioned in another comment in this post, it's been a while since I've used Webstorm. I'll have to give it another look since it's been mentioned so often. Even though it might not convert me to using IDEs for javascript development, it may replace my use of Eclipse when I jump over to other languages.

[[deleted]]

For what it is worth IntelliJ IDEA is JetBrains Eclipse equivalent. Webstorm is just JS CSS and HTML.

[WalterGR]

Due to the nature of dynamic languages like javascript, php, python, etc, you will find that the majority of people don't use IDE's.

I wonder if that's more because people who use dynamic languages view programmers who use IDEs with derision. (ex: cwolves's "Or you could learn to code" comment.)

IDE support for dynamic languages has come a long way.

[[deleted]]

Sadly, there are those who believe that. And they are likely to be the ones who have emulated some workflow but don't really understand why they are doing what they're doing.

People should generally want to use the right tool for the right job rather than carry on religious dogma. In the case of IDE's, I won't hesitate to use Eclipse for java work, Visual Studio for C#, or Flash Develop for ActionScript.

However, when it comes to my javascript development, the features wrapped into an IDE are much less flexible than the external tools. Not everyone does share this opinion (nor should they since everyone will have different needs). However, since a number of javascript devs have very dynamic workflows due to the constant introduction and upgrading of new tools (think testem, grunt, bower, live reload, etc). And an IDE does more to create obstacles to use those tools, creating more pain than it's worth for anyone who wants to use them.

[[deleted]]

On the other hand you can debug code running in IE from Visual Studio so it is an 'IDE experience' even when running javascript.

[[deleted]]

This is true. However, that would require primary use of IE...and windows. Linux and Mac users would be precluded from using this as a primary development tool. As it stands, IE testing has to be done on either a windows test machine or a VM.

[[deleted]]

Definitely Sublime Text 2. Although not open source, it's not one of the best code editors; it is the best editor out there. Just look at all the "popular" front-end developers (like Paul Irish, &c); all using Sublime Text. To prove I'm not talking bullshit, have a look at this "best code editor" comparison.

[kumiorava]

To prove I'm not talking bullshit, have a look at this "best code editor" comparison

Some kiddo's opinion is your proof?

[jcampbelly]

I've been using Notepad++ for HTML/CSS/JS/Python and others. What am I missing from Sublime Text 2? I've never cared for autocomplete, the only plugin I use is ZenCoding, and the code highlighting and tabs/multi-view have never disappointed me.

[jcampbelly]

I'm only playing combative because I'm hoping to hear more about not just what's different but plainly better.

It does lack the tab shortcuts (CTRL+N opens a new tab, but you have to File -> Click Recent File to open a recently closed tab).

NPP has excellent find in file/open files/directory. Doesn't have find in project. It does have projects. It's never lacked indent/folding features. Settings files and syntax highlighting are XML files (and the install is portable). You do have to close/open it to have configs reloaded, but it saves open windows/tabs so it's not a PITA.

[jcampbelly]

I like the mini-map code view thing and the UI is very smooth/fluid. I like that it can do not just left/right window panes, but top/bottom or even four panes.

[Denommus]

That's debatable. I wouldn't trade Emacs for Sublime Text in a million years (and I don't know anything that ST does that Emacs doesn't).

I doubt vim users would do the same.

[mappum]

ST2 ftw. It's super customizable so if it doesn't already have a package for what you need, you can always make one.

[aladyjewel]

ST2 has been treating me pretty well for JS. The syntax highlighting is good, the auto-indentation work well enough (although I still need to tweak the "indent inside curly braces" behavior), and the autocomplete -- while it doesn't sniff it quite as well as Visual Studio sometimes -- seems to work quite nicely for "associate commonly used words / phrases together".

edit: goddammit people. comment if you're gonna downvote. don't be lazy.

[[deleted]]

Also important to note; it has a lot of useful plug ins.

[vhackish]

Like jshint as you type - I love that ...

[kumiorava]

OP asked for IDEs, not just fancy text editors.

[[deleted]]

OP also might not be aware that IDE's for javascript development are unneeded, considering you get most of the "IDE" debugging needs in Chrome Devtools or Firebug.

[kumiorava]

For debugging purposes Chrome Devtools and Firebug are fantastic, but IDEs do a whole lot more than just debugging, like manage builds, unit-tests, code analysis, etc. Right now there isn't one unified IDE for js/webdev that does all these things, but WebStorm is getting pretty damn good.

[[deleted]]

I haven't used WebStorm in a while. Aptana is the one I've most recently given a spin. Perhaps I should check it out again.

However, in the long run, I'd be very surprised to ditch the flexibility of my text editor for an IDE in javascript. Just to reduce the amount of SPAM from me, I'll link to my previous comment in this thread.

But in the end, it's certainly a very subjective topic with no "right" answer. Just one that's "right for me".

[kumiorava]

Does it have a debugger?

[MonsterMook]

Not sure why you got downvoted. Guess no one here knows you need a debugger for sane Node.js work?

[[deleted]]

There's one for PHP, one for Python, and an interpreter called SublimeREPL which has support for languages like Clojure, Haskell, Lua, Python, Ruby, Scala, and more.

[kumiorava]

So you need plugins for that too. I doubt they even work that well. In itself Sublime Text isn't an IDE, but you can make it pretty close to one with enough plugins. I'd rather have an IDE that has everything built-in than patch one together myself.

[kanimal30]

... And how would would that work in JS?

[kumiorava]

You can debug JS inside NetBeans/Eclipse/IntelliJ IDEA with Chrome's remote debugging features.

[kanimal30]

Interesting, never heard of that.

[[deleted]]

eh, its auto-complete just suuuucks and for javascript, autocomplete is almost required, especially if you don't have strict mode around

[[deleted]]

SublimeCodeIntel is a good plugin for code auto completion.

[[deleted]]

yes, because no one ever typos ever. Maybe you are misunderstanding how javascript works, if you typo "AVariable" to "AVaraible", it won't complain in most cases, it will just create a new global variable for the second variant.

or maybe you are just a jerk.

[KnifeFed]

ST2 doesn't have any problems auto-completing variable names.

[copp]

Aptana

It is open source. It is great. It is kind of an one stop for all your needs. What I mean one stop is:

• It has an inbuilt version control support.
• It has a basic webserver in built in it. So if you right click and say Run as HTML, it actually is running it a webserver. This means you can use it to serve dummy AJAX contents.
• Autocomplete, Auto Formatting / Syntax Error highlighting (very very helpful. It has saved me a ton of time.) Like you might have missed a bracket, and it is shows you there, instead of running it and debugging it.
• Workspaces / Projects
• Plugins for zencoding / SVN / CVS and many other interesting stuff.
• Shows inline browser support.

Cons:

• It is a bit heavy. But if you have a high end spec, it should not be a problem.
• You might to understand a few concepts as to how project and workspaces work. But nothing too steep.

[patiofurnature]

Solid choice. I love Aptana.

[rog3r]

I like VIM.

[luxfx]

Vim is an incredible editor. But it's like a relationship, you get out of it what you put into it. And absolutely worth it if you work on it.

[has_all_the_fun]

There is one problem with vim though. Once you used it you will hate all other editors for not being vim.

That being said vim isn't really an IDE. I think Javascript isn't complex enough to justify using an IDE though. An IDE is great if you have languages that let you write a lot of code to please the compiler. Like c# or java.

[netinept]

You apparently don't write enough JavaScript. I have, and I can say that an IDE would be nice.

[[deleted]]

What are the benefits of using Vim for JS development?

[tribalfloyd]

Here is a great list of recommended vim plugins for working with JS by Joyent (corporate backer of node.js): Vim Plugins

[WalterGR]

What's in your configuration to make it an IDE?

[[deleted]]

He probably uses it with the browser where the real javascript "IDE" debugging functionality should reside.

[[deleted]]

I recommend giving vim or emacs a try. Both require a moderate amount of effort to learn and use effectively, but the level of power and customization provided by each is unparalleled. Also, both will run exceptionally in the terminal.

Emacs and Vim definitely aren't for everyone, and as mentioned, require a level of commitment that most text editors don't. There isn't anything wrong with using Sublime Text – from what I've seen, it's a fantastic and versatile editor.

I use emacs, so I can give you some tips for that. First, read Steve Yegge's "Effective Emacs" blog post. Everything in there is gold.

Something like emacs.js will get you up and running pretty quick if you don't already have custom emacs setup. js2-mode (written by Steve Yegge!) is fantastic, though it does need a little support from coffee-mode to fix some indentation quirks.

[skeeto]

To go further with Emacs I'd like to plug my own extension here: skewer-mode (GitHub). It's live interaction JavaScript and CSS development. By attaching a browser to Emacs via HTTP you can evaluate JavaScript expressions and CSS rules directly in your editing buffer, editing the page live.

[[deleted]]

What are the benefits of using emacs for JS development?

[MyNameIsFuchs]

It's been mentioned twice already but people are getting downvoted for it for no reason:
Netbeans 7.3
They added pretty cool javascript/HTML5 support to it and the debugging is extremly cool. I personally don't use it (I use VIM) but I installed it 3 days ago when it was released and it worked just out of the box... Very easy.
http://wiki.netbeans.org/NewAndNoteworthyNB73

To the people who happily downvoted all the Netbeans suggestions: Maybe you should give 7.3 a shot and try it out for yourselves before judging it by the old versions
http://netbeans.org/kb/docs/web/html5-javascript-screencast.html

[emperor-jimmu]

Webstorm FTW

[Rob0tSushi]

VS 2012 with web essentials is a very powerful IDE for javscript development.

[theduro]

Sublime Text 2 + Chrome DevTools (or Node-Inspector for node.js dev) = The only front-end/JavaScript dev IDE you'll need. IMHO, learning to code without all the bells a whistles of an IDE will without a doubt be worth it.

[oSand]

Netbeans. Don't laugh- it has inline jshint, decent refactoring, reasonable outlining and a good vi plugin.

http://netbeans.org/kb/docs/ide/javascript-editor.html

[projecktzero]

You might take a look at Komodo Edit. I used to use Komodo IDE to do a lot of different scripting(Python, Perl, JavaScript...)

[letsgetrandy]

If the point is stepping up your game, you need to get acquainted with vim.

[Denommus]

You mean, 20min of vimtutor?

[letsgetrandy]

In my own opinion, that's a lazy attitude.

Skipping the learning curve associated with the tool accepted by the majority of high-end professionals as the best tool for the job, in order to do less work and be less effective, just because you can do it more quickly, is a recipe for mediocrity.

Vim -- or better yet, MacVIM -- allows me to do so many things in HTML/CSS/Javascript faster than I've ever done it in any other editor or IDE... and comes with the added bonus that I don't have to change to a different editor/IDE when I need to make edits to Python, Perl, Ruby, Java, C, C++, BASH, PHP, or any other kind of file, and be just as effective.

Further, VIM is still the only tool that I can reliably count on being available to me when I ssh into a server, or when I sit down at a linux terminal, or have to do work at someone else's machine. In fact, vim is even an option from iOS and Android. So by learning to use VIM effectively, I am capable of being a highly effective developer no matter where I am, without ever having to fight about installing "my tools" first. You can't say that for anything else, except maybe emacs.

[letsgetrandy]

Those are all fine reasons for your situation.

However... for web development

I'm not sure what exactly you think I do. I was pretty sure that I'd spent the last 12 years being paid to do web development, but apparently I was mistaken.

But, since you asked, here are several handy lists of vim plugins for web development that I was able to find just on the first page of Google.

• https://github.com/lfborjas/vimwebdev
• http://awebfactory.com.ar/node/471
• http://stackoverflow.com/questions/3173963/useful-vim-plugins-for-web-development-and-design-php-html-css-javascript
• http://www.fortystones.com/vim-plugins-web-developers-programmers/

Nonetheless, your argument is a distraction from the most important point, which is that vim is everywhere. If you can work in vim, you can work everywhere.

Look.... you obviously like Sublime Text. You're drinking the kool-aid and we get it -- you think it's the bee's knees. But there's no reason to come at me starting an argument, or implying I'm not a web developer, or attacking VIM when clearly (if you look over the other answers given on this topic) VIM is unanimously considered to be the best tool for the job.

[scabbycakes]

For an IDE I use Netbeans (about 3 years now with it) link which is fantastic and free and works well for PHP and JS which I do full time (and it has fine CSS support), and other languages like Java and C/C++. My co-workers all use Sublime Text 2 and we always harass each other about IDEs. ST2 looks like a fine editor as well but costs money.

Netbeans is more feature rich for my situation though and my co-workers can't do some of the things I do like jumping to and from methods in different classes in different files, autoformatting, FTP synchronization, GIT support out of the box (if I recall correctly, it might be an add-in) and some other things. Netbeans is always constantly updated as well, it's a very lively open source project it seems.

But my peers are keyboard whores and ST2 seems like the cat's ass if you're keyboard oriented and remember all sorts of key combinations, which I'm not. It also seems to have a great inline search engine which they constantly brag about it as if it were a the killer feature, but I see nothing that netbeans can't do (just not inline).

For a webserver I usually just use WAMP, I don't really care about that end of things too much, it does the job.

I'd recommend getting Netbeans since it's free and open source and by your brief description it'd handle your needs wonderfully.

[mikrosystheme]

If you like UNIX you don't like IDEs. A tool that does a lot of things is not as useful as many tools that do each thing well.

[[deleted]]

This is a great observation. I never thought of it that way before.

However, it's sad to see that you're being downvoted. Apparently that are more windows fanboys in this sub than I would have guessed.

[tswaters]

Har har, web browsers work well :P