Alexander has posted 1 posts at DZone. View Full User Profile

Top 10 Code Editors for Web Developers!

04.10.2008
| 21628 views |
  • submit to reddit
I love talking about IDEs and code editors. This has to be the damn touchiest nerd subject of all-time. I’ve got friends that ONLY write code in vim, while others that swear upon Midnight Commander, and yet others who use nothing less than the full-on graphical all-encompassing-integration IDE (dreamweaver, zend, etc). Well, I’ve seen this blog before, but I think the needs of a web-developer with respect to an IDE/Editor is different from other types of code author’s perspectives. So here they are, may the best editor win!

10)<a mce_thref= So first there’s Vim. Vim stands for ‘VI – Improved’, as it’s a GNU remake of the old UNIX ‘VI’ text editor. Vim is primarily for Linux/Unix systems. Vim looks like something you’d see on a green-and-white CRT monitor in front of a programmer in the movie Superman 2. It’s straight from the 80s (pure ASCII text-based love), and furthermore it doesn’t even have a funky keyboard based ASCII faux-gui like nano or emacs, it’s keyboard shortcuts and commands or BUST. Vim is said by it’s die-hard followers to be the hands-down fastest way to write code, but only after you’ve spent 15 years figuring out what all the keyboard shortcuts and commands do. For example, the command for save+quit is ’:wq!’. If that’s not intuitive to you, it’s because you’re a NORMAL PERSON. Personally I will never understand the legions of vim-geeks. Why not ‘ctrl+s’?? Anyway, vim is actually pretty handy sometimes, besides just being a classic:

PROS:
  • Since vim is actually fully text-based, it’s the PERFECT editor for when you’re remoted into a linux shell VIA ssh or other means. Great for on-the-spot editing on the production server, etc.
  • Recent versions of vim support code syntax highlighting, which is awesome for when you’re really getting into editing something on the server. You’ll have to remember on” to turn it on though.
  • Obviously, it’s very lightweight (it’s ASCII!)
CONS:
  • It’s 2008, and we can do a whole whole lot more with an IDE than run it in a terminal nowadays, vim is just plain ugly.
  • User-interface NIGHTMARE, if you don’t already know how to do what you want to do in VIM, get ready to look up the specific keyboard commands on the internet somewhere, because you’re sure-as-hell not getting saved by a menu
  • By the time you do learn all the shortcuts, you’ll (usually) have already found a better editor.

9)Visual Studio .NET is a Microsoft development environment for just about everything. Really! It does C/C+/C#/VisualBasic/VC+ and the kitchen sink. Hey… But none of those are web languages! Well, exactly. THIS IS NOT A WEB DEVELOPMENT ENVIRONMENT. When I walk into a coffee shop and I’m like “Oh, you’re a web developer?” and I look at their screen and see them editing ASP code in MSVS.net I just break out laughing. This is not just because of my true hate for ASP (maybe a little..), but also because it took MS until 2008 to get good “Intellisense” (code completion) for Javascript and CSS. How can you even call this a web development environment? So besides that, you can do code-bookmarks (which I kind of like, when I’m editing C!), tabbed-browsing, syntax highlighting, and all the other standard code-edit stuff. If you’re working on an ASP project you can Debug your applications line-by-line.

There are no real advantages to using this IDE: the documentation is TERRIBLE, the community is non-existent compared to OS alternatives and their respective IDEs (like the PHP & Ruby languages), the interface (and the configuration) is complex and ugly. Furthermore, there’s no such thing as Open Source when it comes to Microsoft, so naturally this (VS.NET 2008) costs like $1200 bucks for the full version, and guess what? It’s terrible to use with MySQL, so if you want the Full Integrated MS package you get MSSQL 2008, and then you’re out another 1000+ bucks. “Sounds Great! Where do I sign up?” SLAP, read below to find out why I think this IDE is terrible crap.

PROS:
  • This slightly beats out vim, but only because you actually have a graphical frontend.
  • There are NO other advantages to using this IDE, even if you’re unlucky enough to still be writing ASP.
CONS:
  • It costs a WHOLE WHOLE lot.
  • Windows only, and on top of that, this is gonna leave a HUGE memory footprint when it runs.
  • Geared towards ASP, the worst server-side language on the internet. ColdFusion might be the only thing that compares to it’s shitty-ness.

8)Next we have Midnight Commander. Midnight Commander really doesn’t count as an ‘IDE’ per se (like vim), however it is a pretty powerful tool that can (to be sure) meet the same ends when it comes to web development. So, MC is like a futuristic editor/file-manager, except it’s stuck in ascii mode. MC features a full on menu system and ASCII GUI with mouse support (look out vim-heads)!! Not only a file manager, MC can use one of it’s panes to edit code with it’s built-in editor ‘mcedit’ which features syntax highlighting for most common languages. With mcedit you can also use the mouse to edit text too, which is (always) an eternally handy feature. MC also boasts the ability to look directly into common archive types (such as .zip, .tar, or even .rpm) as though they were directories on the system. It can also act as an FTP client, which is pretty handy for those of us who work in PHP (or without versioning software in general). One thing I find pretty neat about midnight commander is it’s level of customize-ability, the user can change the panes to do pretty much whatever they want, I like that. it’s also filled with keyboard shortcuts (obviously, being an ASCII app) that can make life much faster when it comes to editing/renaming/moving around files, and flipping about it’s panes. To put icing on this already bloated cake, MC now has an HTTP filesystem browsing plugin, meaning you can use HTTP virtual directories just like a mounted drive. That’s pretty freakin’ cool.

PROS:
  • It’s ASCII once again, so you can use it over a simple ssh terminal connection no problem. This eternally kicks vim’s butt in terms of doing complicated filemanager operations remotely. It is (however) questionable whether the mouse will always work over the remote connection.
  • It does EVERYTHING (read all that stuff up there!), it’s like nautilus but ASCII-base.
  • Unlike vim, MC is actually very intuitive and easy to use.
CONS:
  • Graphically we could be asking for a whole lot more, I like to open more than one file at a time for editing, like in different windows so I can easily switch back and forth between files which are far away from eachother in my filesystem tree. dual-panes are restricted to dual-panes
  • That’s really the only con, you just don’t have full-on windows or tabs to work with. It’s 2008, and editing code without this basic windowing stuff feels (to me) like you’re asking a lot. Please don’t flame me too hard for this MC purists..

7)Dreamweaver is primarily a windows IDE, which does absolutely everything, and mostly it does it all really freakin’ bad. For the record I absolutely hate Dreamweaver, as well as most other adobe web-development solutions. However, it’s a major player in the IDE game and I want my own chance to back up my good reasons to hate this. Basically DW can handle the most non-experienced web developers and give them something super-graphical to work with. DW even will write pre-made JS scripts for would-be complex elements of a site that require some Javascript Know-how. Unfortunately it’ll give you disgustingly complex markup (and scripts) and instead of using would-be simple css techniques to do image-swap operations. It exports a full-on image pre-loader script, which is a crap approach. Actually, most things DW does are the ‘crap’ approach. It also attempts to incorporate server-side logic into it’s graphical frontend a-la ColdFusion, which I just couldn’t hate more (as a non-coldFusion developer). The reason it’s on my list is because it’s actually got a decent text editor built into it, and if you’re only using it to edit text, it’ll serve you right. It gives you tabbed code browsing, easy to use find operations, and syntax highlighting, as well as some more handy features. One thing I specifically like about DW is the ability to search for a string in just one directory of a massive project EASILY. Also, it doesn’t use java, so once it’s all started and initialized it runs pretty smoothly and quickly. Another thing I like about the find function is that you can split the main edit window into panes and use them for what you’d like. I’m usually splitting between the find in project pane and the code editor.

PROS:
  • If you like ColdFusion, and you don’t care about crappy javascript (if it works), AND you don’t know much about writing code, this is your dream-tool.
  • It’ll even sync with your server for easy-uploading and on-the-server editing.
  • Everything I’ve grown to expect from an advanced editor in 2008
  • Built in documentation from o’reilly for a load of different web languages. That’s actually pretty sweet.
CONS:
  • Leaves a GIANT memory footprint if you’re just using the editor
  • On slower machines this takes FOREVER to start up and initialize
  • It’s filled with tons of bloated crap that you’ll never use if you’re like me, it kinda sucks to have to avoid it’s “handy” do-it-for-you approach all the time.
  • It’s too rigid on what is and isn’t a part of the current project. I really don’t like that about it, you’ll have to go through like 2 modal windows just to add an existing file to your project, Fck that..

6)Zend Studio a PHP IDE (for Windows, Mac & Linux) that comes from the very same people who developed php. Zend sports some pretty cool features when it comes down to PHP. It’s the only IDE for PHP I’ve ever seen that introduces a line debugger; being able to do breakpoints with PHP and examining data (can) save HEAPS of time. Being a modern editor it’s got most of what you’d expect from an IDE in 2008: It’s got tabbed file browsing, an easy way to do a ‘find-in-project’, groovy text-editing keyboard shortcuts, etc. Also, it sports database-view which is compatible with all kinds of db types, including MSSQL and MySQL. If you’re using phpmyadmin to view your db all the time and find it tedious at times, this is actually a pretty great tool. Why is it all the way up here at #7? Well, for one thing it’s written in Java, and it’s totally clunky and *slow because of it. It’s definitely a heavyweight and seemingly without all the features to really back up it’s memory footprint. Furthermore, if you’re like me you’ve probably long-since left PHP in the dust for Ruby or something else (i.e. something better), and Zend isn’t going to be very helpful anymore..

PROS:
  • PHP breakpoint debugging. That’s freakin’ hip.
  • Tabbed file browsing, intuitive gui, easy find-in-project functionality
  • Database view mode compatible with MANY types of popular db engines.
  • Being written in Java really helps in that this IDE is available for every platform under the sun, which isn’t costing Zend too much more in development time.
CONS:
  • Written with Java “Swing” components, which works clunky and slow. Just my opinion..
  • Really not great for anything but PHP development
  • To use the debugger you have to run your code on the pre-packaged zend php platform, which isn’t necessarily the same as what you would normally be using (a-la LAMP). As with most things in PHP, it’s kind of a pain to configure this beast.

5)NetBeans IDE is Awesome. Firstly it’s FREE, which I suppose considering all the other GNU/GPL compliant projects listed on this page isn’t that surprising, but it’s still pretty cool for a fully-featured IDE like this one. NetBeans supports a lot of languages, and (being an OpenSource Project) sports a load of plugins. Since I’m mainly a ruby developer, i have to go off about this, but it also features a load of ruby/rails developing tools in it’s base version, which is pretty impressive considering how much other stuff it’s doing. Netbeans has pretty great rails code-completion stuff, as well as a regexp helper (which is pretty cool). It also features GUI’d up rails file/generation for MVC stuff, which does make it that much easier. Another thing I find pretty groovy is a gem installation manager, so no more comparing the output of sudo gem list to figure out what’s going on. Unfortunately (and this doesn’t bother a lot of people, but it bothers me), you must create a project before you really start working. Other editors/IDEs are currently realizing that developers frequently need to hop around and edit things on the FS, and this task is greatly complicated more rigid when one must make a project and add files to that project, etc. I know I’ve talked a load about it’s Rails features, but netBeans also has a very impressive feature-portfolio when it comes to PHP and even more-so for Java and C/C++ development.

PROS:
  • Ruby on Rails line debugger, built-in irb for Ruby developers, Rails code-completion
  • Built-in gem installation, that is really pretty handy.
  • Support for Every language under the sun (besides ASP! slap)
  • Costs 0.00 and is fully Open Source
CONS:
  • Having a built-in IRB is a pretty pointless gesture, it’s not even a ‘script/console’ which (in Rails) means generally that you’ll use it for less. Weak move.
  • Not the smallest memory footprint while running
  • Rigid project creation rules

4)Eclipse Is probably the most well-put-together open-source IDE I’ve ever encountered for Linux. Firstly, ECLIPSE IS FREE, which is awesome for how big of a product it really is. Also, this IDE is written in Java (and as such it’s on OSX Win and Lin), however unlike most Java applications Eclipse uses the SWT libraries for it’s widgets (not swing) and because of this it really does seem to work much better and less clunky. I mean a lot of things by ‘clunky’ by the way, but swing has a serious tendency to redraw every widget all the time, and it makes this awful flicker. Also it just runs significantly slower than the native OS’s windowing toolkits (MFC, GWT, etc.).. Anyway, Eclipse draws all of it’s power from an EXTENSIVE list of eclipse plugins. These plugins will basically allow you to bend eclipse to your will. Needless to say, with the right plugins eclipse can do EVERYTHING I’ve listed for every editor above, and probably even more. That’s hip. It can integrate with database systems (mssql, mysql, sqlite, etc), it supports syntax highlighting for any language you can find an eclipse package for (most languages), and it can be customized to be a SUPREME web environment. Eclipse also supports line-break debugging of PHP applications. Also (I really like this) the Mylyn extension integrates your Bugzilla account at work to your IDE, letting you manage bugzilla tasks straight from the IDE. That’s freakin’ cool. It also has full (FULL) ruby-on-rails support, which I’ll explain in #5.

PROS:
  • DOES EVERYTHING. Absolutely. It’s extensible, so if it doesn’t do it already and you want it to, you can write a plugin
  • Open source approach makes it available for absolutely free
  • Java core minus swing makes for OS interoperability with no downsides
CONS:
  • I think the interface is just not-so-slick in it’s design, but all the necessary parts are there. Sometimes things that could be small are very large (like in the file browser)
  • Sometimes it’s a pain to find the right plugin, or follow the right tutorial for upgrading or adding functionality to Eclipse, but only as much as it ever is on linux. Once it’s up and running you shouldn’t have any problems at all

3)Aptana Is a really unique eclipse-based ide. If your work centers around Javascript and DHTML techniques and you don’t want to pay for your IDE, this is the one for you. Aptana seems to be an IDE geared towards DHTML development. Being ‘Eclipse-based’ means that aptana is really an extension to eclipse (i.e. on a linux system you install eclipse first and upgrade it to “Aptana”). Aptana also comes stand-alone if you don’t want to get eclipse first (although it will still be using the eclipse core). This IDE features everything you need to develop Ajax applications. Firstly, you’ve got code-complete operations for javascript, CSS, and other DHTML favorites. Also (with the RadRails plugin) you get code-completion on rails objects and methods with inferenced typing. Not only is that tech stuff, but it’s also slick. You also get heaps of rails-specific features with RadRails (which I have to talk about, as a rails developer). You get integrated testing in the IDE, which of course helps you run your tests as much as you SHOULD be when you’re developing. You get an integrated “script/console”, which is (admit it) totally awesome. Aptana also handily gives you a view of your whole HD instead of requiring you to start an Aptana project to contain all files in, although you do still have that option. I really like that. Being a very current environment, Aptana also supports current trends in javascript like Prototype syntax (as well as Dojo and Mochkit).

Okay, so a little off the subject of the IDE for a second, Aptana also has one grand trick up it’s sleeve. Aptana is also producing Jaxter which (and I know this will hurt your head at first) really introduces Server-Side Javascript. Check out an awesome example of this here. I was pretty impressed! Jaxter basically does away with the rigid concept of a client end doing strictly managed data trading via ajax. Instead, Jaxter makes it possible for the client and the server to both run the same javascript, thus making the information exchange much more transparent. Surely when both age a bit there will be VERY unique things one will be able to do with Aptana and Jaxter together.

PROS:
  • If you do DHTML work, this is the IDE of your dreams
  • If you do Ruby on Rails, this IDE is the perfect solution for a non-OSX machine. The Aptana OSX version is actually quite nice, but there’s other rails environments (which I’ll get to later) that are yet better.
  • Jaxter is a verty cool new idea, I’m excited to see what the IDE+Jaxter will be able to produce (In terms of speed) in the future
CONS:
  • There really aren’t really any weaknesses, I find it a bit bloated, but some people like their IDE to be bloated, because it’s synonymous for “feature-rich”. I guess that part’s up to you guys to decide.

2)Komodo IDE is an awesome IDE from ActiveState. I had the good fortune of running across the ActiveState guys doing a demo of this at RailsConf in Portland Oregon where I got a free Komodo 4.1 CD from them. This IDE is a ruby guy’s dream, I like the interface in this one a lot. Firstly, it’s got awesome (and undoable) find/replace-in-project features. Secondly (this is important), when editing PHP projects since there’s so many files I really like to use the arrow keys to quickly navigate through the file tree. Specifically I like it when you can press L/R to expand/contract a folder, and for some reason in Eclipse this only scrolls the file-browse pane (who would need that on the arrows?). Anyway, I really like Komodo handles this.

Also, Komodo is built on the mozilla engine, which (I’m sure) made it easy for ActiveState to provide full-on browser integration for debugging Ajax/JS applications. That’s really cool, other IDE DOM inspectors/debuggers usually can’t hold a candle to this. Since Komodo is a Rails IDE specifically, you can do some serious debugging, INCLUDING using script/console WHILE breakpoint debugging from inside the IDE. That’s pretty awesome. It’s got a Unit::Test interface, which is pretty cool, but really it’s just a widget to run rake, which is a bit crap because rSpec is gaining ground really fast on the rails TDD scene, and so far this has no support for it. Furthermore, Komodo IDE doesn’t have too big of a memory footprint, and starts pretty quickly. HOWEVER, if you only want an awesome editor with full code-edit 2008 features (even code completion), it ships with KomodoEdit, which is basically all the text-edit glory of Komodo IDE, but without the IDE. KomodoEdit takes about a second to start on a fast machine. Did I mention it’s available for Windows, Linux, and OSX?

PROS:
  • Awesome find-and-replace capabilities. That really is important.
  • Integrated, Advanced DOM debugging with respect to JS and Ajax (Hooray Mozilla!)
  • You’ve got two choices, KomodoEdit for fast quick-and-dirty editing, or the IDE for the full on developing experience.
  • “script/console” DURING breakpoint debugging operations. I’ve (seriously) ALWAYS wanted that.
CONS:
  • No rSpec support!
  • If you don’t get it for free it’s $295 for the full-version license. LOAD of crap that is. There USED to be a ‘Komodo Personal’ version for $35, and they discontinued it and made the far less-featured Komodo Edit free. Meh.

1)TextMate is my favorite editor and the one that I use, released for OSX (only). Textmate built this site! Textmate really isn’t (per-se) an IDE, but it’s the most full-featured editor EVER. Basically, the interface wins me over here. Firstly, to open a project all you do is drag the folder (in finder) to the textmate icon in the Dock, and it immediately gives you the code editor window and a file-navigation slider page. It’s very lightweight; textmate takes about 1 second to start. Despite it’s many features, it even appears lightweight, which I really like. It’s extremely non-obtrusive in comparison to the other entries listed on this page, which I really like. Furthermore, you can just type ‘mate <directory_name>’ into the terminal to open any filesystem directory that you’re currently working on. Alright, past this textmate is expandable easily by ‘Bundles’, which it comes with HEAPS of, there’s pre-packaged Bundles for nearly every type of language (really quite a long list). These are also available in development version from the Macromates subversion repository.

So, besides all that, textmate is very useful for quickly finding things in files, or around a massive project. When I press (apple)-T I get a ‘find file in project’ dialog, which updates each time I press a new letter key, whittling down to the final file I’m looking for. It does this based on matched characters, and not squential matches (although that does seem to also carry weight). Point being you don’t even have to spell (or remember) the filename correctly and usually you’ll always get the right one. Also, these lists (if you don’t type anything) list the last files you’ve opened with the dialog, so many times you can just use the ‘last 10 files’ list to select what you need without typing anything. When you’re in a large monolithic file you can use the ‘Go to Symbol’ dialog (ctrl+shift+t) and you get a list of all your classes and all the methods/class variables inside of it (all indented properly), which you can go directly to in the code by clicking.

You also get a find/replace in file and find/replace-in-project with ctrl+f and ctrl+shift+f (I like how related operations have related key shortcuts). Of course, regexp is there when needed. Code completion is partially supported in ruby (for now) but in C, Java, and PHP and a host of other supported TM languages the code-completion function is fully implemented. I’ve got the Ruby bundle checked out from the Macromates SVN (because I can do that), and the new generation of ruby code completion is looking sharp! Also you can run your tests AND debug your code (macromates has added ruby-debug to the TextMate mix) from inside TextMate, which encompasses most of what I ever need to do with a full-on IDE in terms of Ruby. And one more thing. If you hold alt your text selector turns into a crosshair with which you can select blocks of text vertically or horizontally and edit them vertically. This even includes otherwise incredibly complicated block-cut/copy/paste operations. This saves me just heaps of time. One last note: this is the only editor I’ve found so far that has HAML syntax highlighting. Textmate costs about $30.

PROS:
  • Best/most natural user interface for an IDE/Editor I’ve ever seen. I’m in love.
  • Non-rigid standards for Project creation/use. You can open your project file by just dragging it in there, and it does exactly what you want it to do
  • Best way to navigate any size project (or monolithic giant code file) I’ve ever encountered. TM For the win!
  • Vertical Text Editing!! Cut/Copy/Paste vertically spliced sections from a group of lines! I almost cried happy when I saw that the first time. Sold.
CONS:
  • The ONLY thing that’s negative about TextMate (although it’s currently in the works) is the incomplete Code-Complete support for Ruby
  • $30.00 USD is not expensive (by any means, keep in mind that’s only $20 euros). But it’s still not as good as $0.00

Published at DZone with permission of its author, Alexander Pilafian.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)