Skip to main content
Jump to: navigation, search

Difference between revisions of "JSDT"

(Introduction)
 
(25 intermediate revisions by 6 users not shown)
Line 1: Line 1:
= JavaScript Development Tools =
+
{{DISPLAYTITLE:JavaScript Development Tools}}
  
== Introduction ==
+
{{JSDT}}
  
'''JSDT is included with WTP 3.0 and above.'''
+
The '''JavaScript Development Tools''' (JSDT) is an Eclipse project ''aimed to build the most accurate JavaScript IDE'' while keeping it ''very fast''.
  
The JavaScript Development Toolkit (JSDT) is a JavaScript IDE for Eclipse based on the Java Development Toolkit ([[JDT]]). It is our goal to make JSDT the most accurate JavaScript IDE while still keeping it very fast. Since JSDT's foundation is in the [[JDT]], many of the rich editing features of the [[JDT]] carry over, as well as its facilities for smart error detection and correction, detailed flow analysis, pluggable content completion, and it flexible AST for use by plug-in developers.  The end result is a fast, feature packed JavaScript IDE and extensible framework that's well suited for AJAX and other JavaScript development needs.
+
It is a child project of the [https://projects.eclipse.org/projects/webtools WebTools Platform (WTP)] which reuses the [https://projects.eclipse.org/projects/webtools.sourceediting Structured Source Editing (SSE)] components and that was initiated by cloning and adapting the [https://projects.eclipse.org/projects/eclipse.jdt Java Development Tools (JDT)] project.
  
JSDT is part of the Web Tools Platform Source Editors project.
+
JSDT is based on [[WTP]], [https://eclipse.org/webtools/wst/components/sse/overview.html SSE] and copies many features from [[JDT]]; so it carries on, extends and add rich features like: JavaScript integration in web editors, code completion, smart error detection, AST inference, JS debugging and so on..
 +
 
 +
JSDT also integrate JS to other technologies like HTML, JSP, CSS, Nodejs, Gulp, Grunt, JSON, Angularjs, Chromium (V8), etc..,
 +
plus is open to integrate even more (CoffeeScript, TypeScript...) and is driven by a small and though development team.
 +
 
 +
Contribute with us, if you dare!
  
 
== Description ==
 
== Description ==
  
With the advent of Web 2.0, JavaScript have become central in the creation of a richer user experience on the Web. Its use has shifted from the creation of simple functions and handlers to events, to the creation of complex Web Application frameworks. Such complexity makes it crucial that more sophisticated set of tool become available on Eclipse.
+
With the advent of Web 2.0, JavaScript has become central in the creation of a richer user experience on the Web. Its use has shifted from the creation of simple functions and events handlers to the creation of complex Web Application frameworks. Such complexity made it crucial that a more sophisticated set of tools become available in Eclipse.
  
The JavaScript Development Tools's goal is to develop a framework for development of JavaScript applications, with full support for editing, refactoring, and searching. The JavaScript editor is designed such that is can be plugged in to the Web Tools. The JavaScript Development Tools is also be extensible such that new language features can easily be added.
+
JSDT's goal is to develop an IDE for JavaScript applications, with full support for editing, search, and refactoring. The functionality of the JavaScript Development Tools is heavily based on the functionality of the Java Development Tools, but since JavaScript is not a fully typed or class-based language, it is not possible to provide 100% of the JDT functionality. JSDT is extensible in that it can be (is) plugged into the HTML and JSP editors within WTP as well as being architected with pluggable type inference and completion proposals in mind.  The inference engine is used to determine type and class structures from the JavaScript code, enabling as much of the JDT equivalent functionality as possible, while still allowing adopters to contribute to the process for atypical or extended scenarios.
  
The functionality of the JavaScript Development Tools is heavily based on the functionality of the JDT. Because JavaScript is not a fully typed or class-based language, it is not possible to provide 100% of the JDT functionality. An inference engine is used to infer type and class structure from the JavaScript code, so as much JDT functionality as possible is available.
+
JSDT is split up into three functional areas:
  
== Features ==
+
#Core - all of the core components, including, but not limited to, the parser, compiler, DOM and ASTs
=== Pure JavaScript Source ===
+
#[[/Debug|Debug]] - integrated debug support for Rhino and Crossfire
* Syntax Highlighting
+
#UI - all of the UI bits that drive the core
* Folding / Line Numbers
+
 
* Full Outlining showing Classes, Functions and Fields
+
== Key Features ==
* Highlight and check of matching bracket / parenthesis
+
There are many features that the JDT has the the JSDT also has.
* Auto-complete of brackets, parenthesies and indentation
+
 
* Mark Occurance
+
A few of these key features are:
* Comment Toggle (line and block)
+
* Generate Element JsDoc
+
* Smart Code Completion based on real-time Javascript Model
+
* Hover Help that display element declaration and JsDoc or Error message
+
* Configurable Error/Warning checking includes full language syntax and type/class structure resolution
+
* Flow analysis shows unreachable code, unused variables and variable hiding.
+
* Quick-fix for unresolved fields and types.
+
* Surround with do, for, try/catch, while
+
* Completion Templates
+
* Extract Function/Change function signature
+
* Indentation Correction
+
* Open Declaration
+
* Open Type Hierarchy
+
* Open Call Hierarchy
+
* Extensibly customizable Code Formating
+
* Full Search
+
* Refactor/Rename/Move
+
* Support for Breakpoint marker display if debugger is present
+
* Browswer libraries with JsDoc for FireFox, Internet Explorer and ECMA 3
+
* Support for user defined libraries using JsDoc + Javascript prototype structure definitions
+
* Full extension support for Library UI and core  
+
* Library Image Support
+
* Breakpoint and ATF Project Support for easy AJAX Integration and debug
+
  
=== HTML/JSP Embedded JavaScript ===
 
 
* Syntax Highlighting  
 
* Syntax Highlighting  
* Folding / Line Numbers
+
* Full outlining showing Classes, Functions and Fields  
* Full Outlining showing Classes, Functions and Fields  
+
 
* Highlight and check of matching bracket / parenthesis  
 
* Highlight and check of matching bracket / parenthesis  
* Auto-complete of brackets, parenthesies and indentation  
+
* Auto-complete of brackets, parentheses and indentation  
* Mark Occurrence
+
* Marking of Occurrences
* Generate Element JsDoc (From outline)
+
* Generation of element JSDoc
* Smart Code Completion based on real-time Javascript Model  
+
* Smart Code Completion based on a real-time JavaScript Model  
* Hover Help that display element declaration and JsDoc or Error message  
+
* Hover Help that displays element declaration with JSDoc or Error message  
* Configurable Error/Warning checking includes full language syntax and type/class structure resolution  
+
* Configurable Error/Warning checking including full language syntax and type/class structure resolution  
* Flow analysis shows unreachable code, unused variables and variable hiding.  
+
* Flow analysis showing unreachable code, unused variables and variable hiding.
* Completion Templates  
+
* Quick-fixes
* Indentation Correction
+
* Completion Templates
* Open Declaration (From outline)
+
* Extensible and customizable Code Formatting
* Open Type Hierarchy (From outline)
+
* Open Call Hierarchy (From outline)
+
* Extensibly customizable Code Formating
+
 
* Full Search  
 
* Full Search  
* Breakpoint Support
+
* Refactoring - renaming, moving, member extraction
* Browswer libraries with JsDoc for FireFox, Internet Explorer and ECMA 3
+
* Support for user defined and browser libraries.
* Support for user defined libraries using JsDoc + Javascript prototype structure definitions
+
* Full extension support for Library UI and core
+
* Library Image Support
+
* Breakpoint and ATF Project Support for easy AJAX Integration and debug
+
  
== Design ==
+
== Installation ==
The JavaScript Development Tools design would use the JDT design with the necessary adjustments made for JavaScript.
+
  
As far as the JavaScript Development Tools design is concerned, the major differences between Java and JavaScript are:
+
JSDT is included in WebTools and in the Release Train aggregator site. So latest release can directly be installed from http://download.eclipse.org/releases/<luna|mars|...>.
  
* Javascript has no explicit typing support, whereas in Java everything is typed.
+
* Milestones are accessible via the site of the next release (ie http://download.eclipse.org/releases/mars when next Eclipse release is Luna).
* At the top level, a JavaScript file can contain any program statement, whereas a Java file only contains a class.
+
* Snapshot builds are accessible via webtools integration site http://download.eclipse.org/webtools/downloads/drops/R3.7.0/ or via the JSDT-sepecific snapshot site http://download.eclipse.org/webtools/jsdt/snapshots (which may contain additional experimental features, not contributed to WebTools yet).
* JavaScript has no classpath/jar file concept.
+
  
Other areas where the java/JavaScript differences will necessitate changes:
+
== Community ==
  
* syntax differences - parse definitions
+
* User forum
* additional program elements with no correspondence in java
+
* Contributors mailing-list
** object literal
+
* [[/Confcalls | Contributors conference calls]] planning, logistics and minutes
** for (var in collection)
+
 
+
=== Inferred Types ===
+
 
+
In order for some JDT functionality (such as code completion) to work correctly, class type information needs to be available. This information is not available in JavaScript, but it can be inferred in many cases. A type inferring framework will be put in place to support this functionality. The type inferring will examine the JavaScript abstract syntax tree (AST), and generate "virtual" class information.
+
 
+
The type inferring will run off of a configuration will provide many options for how to infer the types/classes. The type inferring will also be extensible, so the unique conventions among various JavaScript toolkits can be handled. The type inferring will be configurable on a project basis, and possible on a file by file basis.
+
 
+
The type inferring configuration will also be used by the refactoring function.
+
 
+
=== Javascript file handling ===
+
 
+
Java files have a very top down structure, where files only contain classes, which only contain fields, methods, and classes, and program statements only contained within methods. Because of this, some JDT functionality will not work for JavaScript, because a program statement can be directly at the top of a JavaScript file. This will be handled by refactoring the relevant JDT code.
+
 
+
=== Variable/function resolution ===
+
 
+
In Java, everything is resolvable because of the classpath, package structure, and import statements. This has no correspondence in JavaScript.
+
 
+
==== Libraries ====
+
 
+
The JSDT changed the classpath and classpath container mechanism to offer JavaScript library support.  JSDT libraries are collections of JavaScript source files that have prototyped object/class definitions and JsDoc.  The inference engine then models these libraries and places each object/field/function in the projects Global Scope. Then every JavaScript file in the project has access to these objects/fields/functions.
+
 
+
To illustrate-- the JSDT contains a FireFox library plugin with about 150k of JavaScript and JsDoc.  This library represents the class structure within the FireFox browser that is accessible to a web page's JavaScript.  If a user wishes to target their JavaScript source to FireFox they would add the FireFox library to their project and achieve content completion and hoverhelp for the FireFox objects. Users may limit the objects/functions/fields visible in the project by adding or removing libraries.
+
 
+
Libraries aren't limited to browser objects.  AJAX runtimes fit nicely in libraries as do a websites standard set of utility functions.  Really the possibilities are limitless.  And the library mechanism is extremely easy to expand both by the end-user or through extension points.
+
 
+
=== Functionality mapping ===
+
 
+
This table shows how the JDT functionality corresponds to the JavaScript functionality. It does not include anything where there is a direct one to one correspondence.
+
 
+
{| border="1"
+
|-
+
| '''JDT function''' || '''JSDT function'''
+
|-
+
| Build path || Libraries + Global Scope
+
|-
+
| JDK level (1.4 vs 1.5) || ECMA script level 3 vs 4 (v. 3 supported now)
+
|-
+
| Compile || validation & flow analysis
+
|}
+
 
+
=== Extension Points ===
+
 
+
The JSDT functionality is embedded. This means, for instance, that the JavaScript editing capabilities is embeddable within HTML and JSP Editors, both within script tags, and script attribute values.  The JSDT is flexible so script support in other languages is possible.
+
 
+
The following JSDT extension points are supported :
+
 
+
* Global Scope variable initializer
+
* Global Scope container initializer core
+
* Code formatter
+
* Validation participant
+
 
+
In addition, the JavaScript syntax tree will be presented as an XML dom (future), so that various XML processors can be run against it for a variety of reasons, for instance, a Schematron processor could be used to do validation.  Currently the JSDT is represented in an AST.
+
 
+
The following jsdt.ui extension points will be supported :
+
 
+
* Global Scope container initializer ui  (Wizzard, content assist images and type/text naming)
+
* javascript element filter
+
* javaScriptEditorTextHovers
+
* javadocCompletionProcessor
+
* quickFixProcessors
+
* quickAssistProcessors
+
* foldingStructureProviders
+
* queryParticipants
+
* javaScriptCompletionProposalComputer
+
* javaScriptCompletionProposalSorters
+
  
 
== Development ==
 
== Development ==
  
 
+
* [[JSDTDevelopment | Developing and contributing to JSDT ]]
=== Contributing to JSDT ===
+
The JSDT is driven by a very small development group with limited resources.  ANY serious developers or contributors will be enthusiastically welcomed.  For more information follow the standard Eclipse process for becoming a project committer (see [http://www.eclipse.org/projects/dev_process/new-committer.php New Committer Election]).  For more information contact [mailto:childsb@us.ibm.com Bradley Childs] or [mailto:berkland@us.ibm.com Phil Berkland].
+
 
+
 
+
=== Developing JSDT ===
+
[[JSDTDevelopment |Developing JSDT ]]
+
 
+
=== JSDT Functional Testing ===
+
[[JSDTestScenarios | Testing Scenarios ]]
+
 
+
=== Reporting Bugs ===
+
Report bugs through [http://bugs.eclipse.org/bugs/ Eclipse Bugzilla] under Webtools catagory, Source Editing product, component wst.jsdt.
+
 
+
Here is a [http://bugs.eclipse.org/bugs/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&classification=WebTools&component=wst.jsdt&long_desc_type=allwordssubstr&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&status_whiteboard_type=allwordssubstr&status_whiteboard=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailtype1=substring&email1=&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0=  list of open bugs].
+
  
  
[[Category:Eclipse Web Tools Platform Project]]
+
[[Category:Eclipse Web Tools Platform Project]][[Category:JSDT]]

Latest revision as of 11:57, 4 March 2016



JSDT
Website
Download
Community
Mailing ListForumsIRCmattermost
Bugzilla
OpenHelp WantedBug Day
Contribute
Browse Source


The JavaScript Development Tools (JSDT) is an Eclipse project aimed to build the most accurate JavaScript IDE while keeping it very fast.

It is a child project of the WebTools Platform (WTP) which reuses the Structured Source Editing (SSE) components and that was initiated by cloning and adapting the Java Development Tools (JDT) project.

JSDT is based on WTP, SSE and copies many features from JDT; so it carries on, extends and add rich features like: JavaScript integration in web editors, code completion, smart error detection, AST inference, JS debugging and so on..

JSDT also integrate JS to other technologies like HTML, JSP, CSS, Nodejs, Gulp, Grunt, JSON, Angularjs, Chromium (V8), etc.., plus is open to integrate even more (CoffeeScript, TypeScript...) and is driven by a small and though development team.

Contribute with us, if you dare!

Description

With the advent of Web 2.0, JavaScript has become central in the creation of a richer user experience on the Web. Its use has shifted from the creation of simple functions and events handlers to the creation of complex Web Application frameworks. Such complexity made it crucial that a more sophisticated set of tools become available in Eclipse.

JSDT's goal is to develop an IDE for JavaScript applications, with full support for editing, search, and refactoring. The functionality of the JavaScript Development Tools is heavily based on the functionality of the Java Development Tools, but since JavaScript is not a fully typed or class-based language, it is not possible to provide 100% of the JDT functionality. JSDT is extensible in that it can be (is) plugged into the HTML and JSP editors within WTP as well as being architected with pluggable type inference and completion proposals in mind. The inference engine is used to determine type and class structures from the JavaScript code, enabling as much of the JDT equivalent functionality as possible, while still allowing adopters to contribute to the process for atypical or extended scenarios.

JSDT is split up into three functional areas:

  1. Core - all of the core components, including, but not limited to, the parser, compiler, DOM and ASTs
  2. Debug - integrated debug support for Rhino and Crossfire
  3. UI - all of the UI bits that drive the core

Key Features

There are many features that the JDT has the the JSDT also has.

A few of these key features are:

  • Syntax Highlighting
  • Full outlining showing Classes, Functions and Fields
  • Highlight and check of matching bracket / parenthesis
  • Auto-complete of brackets, parentheses and indentation
  • Marking of Occurrences
  • Generation of element JSDoc
  • Smart Code Completion based on a real-time JavaScript Model
  • Hover Help that displays element declaration with JSDoc or Error message
  • Configurable Error/Warning checking including full language syntax and type/class structure resolution
  • Flow analysis showing unreachable code, unused variables and variable hiding.
  • Quick-fixes
  • Completion Templates
  • Extensible and customizable Code Formatting
  • Full Search
  • Refactoring - renaming, moving, member extraction
  • Support for user defined and browser libraries.

Installation

JSDT is included in WebTools and in the Release Train aggregator site. So latest release can directly be installed from http://download.eclipse.org/releases/<luna|mars|...>.

Community

Development

Back to the top