Saturday, July 25, 2009

JavaScript Editors

There really isn't much to talk about JavaScript editors. Most of the editors are just a little more than a text editor, providing some sort of syntax highlighting and a very minimal code completion and validation.
  • Notepad - If you have to write just a script or two then notepad or any text editor is good enough.
  • Aptana - Aptana Studio is a complete web development environment that combines powerful authoring tools with a collection of online hosting and collaboration services. The studio comes with number of editors - HTML, CSS, JavaScript, PHP etc. All the editors are fairly good with a decent code validation. The JavaScript editor comes with inbuilt JSLint script validator. JSLint catches a number of common errors and I have found it really useful.

    Although the JavaScript editor that comes with Aptana Studio is good and the studio is eclipse based, installing the whole studio just for JavaScript editing can be a overkill.
  • Netbeans - Starting with version 6.1, NetBeans IDE provides enhanced JavaScript editing features that are modeled on support already provided for Java, Ruby, and other languages. This editor has a lot of features like Semantic Highlighting, Mark occurrences, Instant Rename, Refactoring, Quick Fixes and Semantic Checks, Code Completion and Type Analysis, Go To Declaration

    While Netbeans has a rich feature set, I prefer Eclipse over Netbeans as my development environment.

  • JsEclipse - This is a relatively light weight eclipse based editor and provides code formatting, code completion etc. Download is available from a number of sites.

  • JavaScript Development Toolkit (JSDT) - This is a bunch of open source plug-ins that bring robust JavaScript programming tools to the Eclipse platform. JSDT is essentially built on the same codebase as Java development toolkit (JDT) and hence comes with many of the same features and core design found in JDT. It has all the features of Netbeans and more.
    Feature list
    • Syntax highlighting
    • Folding/line numbers
    • Full outlining, showing classes, functions, and fields
    • Highlight and check of matching brackets/parentheses
    • Auto-complete of brackets, parentheses, and indentation
    • Error detection and correction
    • Mark occurrence
    • Comment toggle (line and block)
    • Generate element JsDoc
    • Surround with do, for, try/catch, while
    • User-configurable completion templates
    • Extract function/change function signature
    • Indentation correction
    • Open declaration
    • Open-type hierarchy
    • Open-call hierarchy
    • Customizable code formating
    • Full search
    • Refactor/rename/move
    • Breakpoint support
    • Defined browser libraries with JsDoc for Firefox, Internet Explorer, and ECMA-3
    • Support for user defined libraries using JsDoc + JavaScript prototype definitions
    • Library image support
    • Debugging support provided through the ATF Project

    The concept of libraries is a great feature of JSDT, as it potentially allows all JavaScript toolkits to work well with it. Also its very lightweight (just 5-6 plugins), though currently it is available as part of Web Tools Platform it is possible to take just the JSDT plugins, drop them into an existing eclipse installation and get going.

    Although JSDT's feature list is quite good, its a bit buggy. Also if you are using a JavaScript toolkit such as Dojo, you will have to create a library definition for it yourself.

1 comment:

  1. One thing that I'd really like to see in the JSDT editor is integration with JDT, enabling importing of Java packages and classes in JavaScript, either as project references or as jars. That would be helpful when doing server side scripting. The refactoring support in JDT is awesome, but it doesn't integrate so well with references made from JavaScript.

    I entered bugzillas for this:
    Bug 310000 and Bug 310001.