There’s a quote that I can’t quite remember, and that I attribute to one of the Gang of Four, but that may just be in my mind. Anyway, it goes along the lines of “buy cheap desks and expensive chairs.” The idea being that while you may have to look in the general direction of your desk much of the day, you’re in intimate contact with your chair almost every minute of your workday. Thus, it’s important that you have one you are very comfortable with.
A similar train of thought applies to the tool you use to write your code with. You’ll be writing, reviewing, editing, debugging, and compiling in a tool or multiple tools all day long. If you hate that tool, or any of those tools, you aren’t going to be too happy at the end of the day. That isn’t to say that there is any one perfect editor for anything, but you should do the best you can to find one that you, yourself, are comfortable with.
With that in mind, when I set out to learn me some JavaScript, I started looking around for a decent editor. I think over the course of a couple of weeks I tried almost every major one out there. I know that no matter what I say, a dozen people are going to chime in with their own personal favorites, insisting that it is the best. So I won’t try to stop you and I won’t argue with you, but I probably tried it. 🙂
I had a few criteria for what I wanted. Nothing too demanding.
1. It should be relatively simple. A few I tried had really complex project setup procedures and it was a pretty heavy learning curve just to get a simple hello world up and running.
2. Code completion/hinting in as much as is possible. I know it’s going to be limited in a loose language like JavaScript, but anything helps.
3. Some kind of project paradigm, where I can save and re-open a project with related files.
4. A launch system where I can hit a button or key combo and it will launch my browser of choice with a project-specific html file loaded up. In other words, if I’m editing myScript99.js in a given project, I should be able to hit a key and the editor knows that it should launch Chrome with the index.html file in that project.
5. Free or relatively cheap would be nice, since this is just a hobby / learning project at this point. (I don’t mind paying a fair price for tools that I use professionally.)
That’s all. These may not be your important points, but they are mine, and I think a good number of people would go along with most of them.
What I came up with after much searching was…. Komodo Edit by ActiveState. This fits the bill in every one of the points above. First of all, let me point out that ActiveState makes two similar editors. Komodo Edit is completely free. Komodo IDE is a higher level product that will cost you a few hundred dollars. If you are just starting out like I am, the free version is all you need. It may be a little confusing when you go to the site to download it. But do take a look at the features of the full version IDE if you decide you like Komodo Edit. It may be well worth it to you.
As for the above features:
1 and 3. It’s really easy to get started with a project. Go to Project -> New Project…, create a directory for your project and save the project file with a name you want. The files in your active project will be in the upper left panel and your other projects will be listed in the lower left. Right click in the files area and choose New File or New File from Template to create a new file in the project. Also, any files you drag into the project folder will automatically be added to the project.
2. Komodo has as good code hinting and completion as any other editor I tried out there for JavaScript and HTML. It’s no Visual Studio, but I don’t have any complaints about it.
4. In the top tool bar, you’ll see a globe icon. Clicking that will launch the active file in the editor in the default way. Or you can use it as a drop down to select what browser you want to launch it in. Komodo comes with a built in browser, but I prefer to have it open up Chrome or Firefox. If you go into preferences, you can choose what browser you want to use, and add additional browsers to the list. The first time you launch any file, a dialog will pop up asking you what you actually want to launch. You can choose to launch that exact file, which is probably the case if you are editing an html file, or launch some other file. You probably want the latter if you are editing a JavaScript file – you want it to open up a specific html file that is associated with that file. For each file, you can also select a checkbox to have it ALWAYS open up the file you just chose, rather than ask you each time. The only thing I would add to this flow is the ability to set a project-wide default option, so that no matter what file I’m editing in a given project, it will always open such and such html file. Maybe that’s possible, I haven’t found out how. The keyboard command for launching is Ctrl-K + Ctrl-V. I’m not too fond of the double control combo, but it’s editable as well.
5. As I’ve already said, Komodo Edit is free. It’s also triple platform: Mac, Windows, Linux. I’ve used the Mac and Linux versions and they are pretty indistinguishable from each other. That’s great. There are also a ton of other options and preferences in the program. Really fantastic tool for free. If this is as good as it is, and it’s free, I can’t imagine what’s in the full priced version.
So that’s my choice. I highly recommend it if you are looking for a decent editor. Anyway, feel free to tell the world about your favorite and why you like it in the comments.
I’ve been using Komodo Edit for a while now and I love it. Not only does it have code hinting for JavaScript but also for jQuery and HTML5. I’m actually very surprised it’s not more popular.
I dug through all the IDEs as well but I still didn’t really made my choice. Did you try out IntelliJ Idea? I use it for my Flash projects since I switched to Mac but didn’t test it with JavaScript stuff, yet.
One thing that’s important to me is that you should be able to just open up a file without having to create a project first. Of course projects are great for uhm.. projects, but when I’m just sketching I often find it tedious to create a new project for each new iteration.
Flashdevelop could do just that, with all the code hinting stuff available… but for obvious reasons I wouldn’t use that for javascript.
Have you tried Aptana Studio yet?
See, I told you that people would suggest their favorite editors and ask if I’d tried this one or that one. And I told you the answer was probably yes, I had.
Both Aptana and IntelliJ are very capable editors, but I put both of them into the category of “too complicated for starting out with.” I didn’t actually try IntelliJ for JavaScript, but have used it for ActionScript. Excellent product, but a serious learning curve just to create a project and get a very basic workflow going. I did try Aptana and felt exactly the same way about it. In my view, these would both be great editors to graduate into if you wind up doing serious, high level work. But if you are just trying to get your feet wet with JavaScript, I think these products will do more to confuse you and get in your way if its your first time using them. Of course, if you already use IntelliJ for something else, it would be a natural choice for doing your JavaScript work in as well.
thanks for code
Yeah, you saw it coming. 🙂
I’m sure it would take a while to write up the pros and cons for each of the editors you tried, but man that would be a killer resource!
For me, I’d love to know what you thought of Visual Studio.
Ofcourse we come up with our fav editors! You’re now Mr. Miyagi and we ‘d love to know what you think of what we found ourselves 🙂
So, what’s your opinion on NetBeans? I dare to say it fulfills your five wishes. It certainly does mine. I use it for both javascript/html/css and php.
By the way, love this experiment-and-share-javascript month. Thanks!
I’ve just been through a similar process when I was developing a pure js project using the Appcelerator framework. I tried Aptana, IntelliJ and NetBeans.
I mainly develop in AS3 and use FDT. Because I was using a new framework, code completion and jump to function declaration where a must.
Aptana being Eclipse bases seemed like a natural choice. However I was very disappointed with it. The code completion seems very limited as it would not recognise and complete functions from the Appcelerator framework, only interal javascript or functions which were specified with an aptana plugin. Next up was IntelliJ, this was by far the most powerful of the IDEs. It auto-completed everything, recognise un-used and duplicate variables. Even though javascript is loosely typed it was able to recognise the Class of objects I created and display their member variables in the code hinting.
There is even a cut down version cheaper version called WebStorm. The only reason I did not choice it was it was the performance was slow. I was running it on an older macbook duo 2. I finally settled on NetBeans, it had most of the features of IntelliJ (although the code completion is not as good), it has a small memory footprint and the performance is great. Best of all its free.
I am using Sublime Text 2 and after your post, I wanna try Komodo, there are few things that are bugging me in Sublime.
I hope they are using same syntax for snippets, I don’t like rewriting them every time I switch editor.
I love Aptana Studio for all my web-related programming. Haven’t been using it for long but I love it so far. And it works great + it’s cross-platform. I’m pretty much in love with it.
There’s a new kid in town. The Belgium MacRabbit released their Espresso App and I’m loving it straight away! It has all the things a webdesigner can whish for and at the same time stays very reactive and light. The ftp browse or sync is very thoughtful and useful.
And as one of only a few apps, they did not forget the design. Product looks great!
I, for one, ditched the very good, but slow Netbeans.
I haven’t got used to any particular editor/IDE yet and I’m constantly switching between them. Here are my favorite free ones:
Aptana Studio
Notepad++ (with appropriate plugins)
and commercial:
JetBrains PHPStorm
phpDesigner
From time to time I use Eclipse or NetBeans.