JavaScript Development Toolkit (JSDT) – Getting Started

What is JSDT?

• A JavaScript IDE for Eclipse based on the Java Development Tools (JDT)
• Has many of the rich editing features of JDT, facilities for error detection and correction, detailed flow analysis etc

How to get it?

• As part of Eclipse IDE for Java EE Developers (since Eclipse 3.4)

• By adding ‘Web tools platform’ to plain Eclipse

• Also part of Rational Application Developer (RAD)

Pain Points in JavaScript Development

• Text editor, firebug and browser refresh were the best tools available
• Minimal content assist
• Minimal static validation
• No refactoring support
• No source code navigation support

JSDT Library mechanism

• Library mechanism to manage common objects, variables, and types in a project
• JSDT library : prototyped object/class definitions and JSDoc
• Prepackaged libraries
• User defined libraries

Features

• Content assistance
  

• Script validation and error detection
  

• Quick Fix

• Refactoring

• Same-word highlighting

• Source code navigation

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.
  

JSDT resources

Meet the JavaScript Development Toolkit - Developer works article by Bradley Childs giving an overview of JSDT

JSDT Wiki Page

JSDT development Wiki page

JSDT and Dojo - Discussion page on dojotoolkit.org explaining how JSDT can be used with Dojo

Webtools downloads page - Download WTP builds, WTP includes JSDT

Eclipse downloads - Download Eclipse IDE for Java EE developers. This includes the web tools platform which in turn includes JSDT.

JSDT bugs (bugzilla)

Abstract Syntax Tree

Summary

The Abstract Syntax Tree is the base framework for many powerful tools of the Eclipse IDE, including refactoring, Quick Fix and Quick Assist. The Abstract Syntax Tree maps plain Java source code in a tree form. This tree is more convenient and reliable to analyse and modify programmatically than text-based source. This article shows how you can use the Abstract Syntax Tree for your own applications.

By Thomas Kuhn, Eye Media GmbH
Olivier Thomann, IBM Ottawa Lab

Complete Article