JavaScript Development Before MyEclipse 2015 CI 14

Note:  A new JavaScript debugger was introduced in MyEclipse 2015 CI 14.  Click here for more information on developing JavaScript in this version.

1. JavaScript Editor

The MyEclipse JavaScript Editor provides advanced language specific editing features such as:

  • Code-Assist
  • Syntax Checking
  • Validation
  • Outline view
  • Source Actions: Formatting, Quick comment
  • Editor Preferences

Besides the default MyEclipse Explorer, you can use the Script Explorer view to see a JavaScript-centric view of your project.

Script Explorer view

Press CTRL + O while editing a JavaScript file to open the Quick Outline for easy navigation through your code.

Quick Outline

1.1 Code Assist

The JavaScript editor provides code assist proposals for the current context whenever you press Ctrl+Space

JavaScript code assist example

Local JavaScript variables and functions are also made available in the code-assist proposals. In the example below, pressing CTRL+Space completes a function call automatically.


Local JavaScript Function completion

Code Completion Guess Support
When a content assist proposal is applied, a second set of proposals will automatically display probable matches based on the type of the function parameter.  Learn more about Guess SupportAvailable in MyEclipse 2015 CI 11 and later.

Guess support

Completion String Support
String completion gathers short strings in your code, and string completion suggestions include previously seen strings. Learn more about String SupportAvailable in MyEclipse 2015 CI 11 and later.

String completion

ECMAScript 6
Switch to ECMAScript 6  for Promise support. Available in MyEclipse 2015 CI 11 and later.

Promise support

RequireJS Object Literal Completion
For the RequireJS config object, applying completion generates a property key/value pair. Available in MyEclipse 2015 CI 11 and later.

RequireJS completion

Better Content Assist with Tern Modules
Access to content assist for a large number of third-party framework libraries is available through project properties (beginning in MyEclipse 2015 CI 6). 

When including third-party JavaScript frameworks, you must either include the framework scripts within the project, or reference them on the web. The Tern modules available on the Technologies tab offer predefined content assist for various technologies. For the best possible content assist for third-party frameworks you include directly in your project, you should exclude framework scripts, and then select the framework technology. This exclusion only applies to content assist.

  1. Right-click a project, and select Properties.
  2. Expand MyEclipse, and select JavaScript Resources.
  3. Click the Source tab, expand your project folder, and double-click Excluded.
    Adding exclusions
  4. Click Add in the Exclusion patterns section.
  5. Enter a pattern for multiple exclusions, or browse for a specific folder or file, and click Finish.
    Framework script file excluded
  6. On the Technologies tab, select the framework you excluded to get optimal content assist for the framework, and click OK.Available third-party content assist libraries

Additional Context for Content Assist (Optional)
To set up additional context for content assist, access the JavaScript Resources property page. Right-click the Project, select Properties, expand MyEclipse, choose JavaScript Resources, and click the Source tab to specify source folders. JavaScript files in these folders are parsed and added to the JavaScript project’s global scope. Objects, fields, and methods defined in these files are provided as options for content assist even when you are editing another JavaScript file.

Adding files to a source folder is necessary only if you need additional context for content assist. Content assist for elements within a given source file is provided even if it is not part of the global scope.

In MyEclipse Web projects, the WebRoot folder is automatically setup as a source folder when the project is created. This can be easily changed to suit your needs.

Click the Source tab, and click Add Source Folder to specify a source folder.

Specifying a source folder

1.2 Syntax Checking

The JavaScript editor provides “as-you-type” syntax checking and shows syntax errors in multiple locations to make it easy to see errors in your JavaScript code.

“As-you-type” syntax checking

1.3 Validation

Validation problems are indicated as warning markers in the JavaScript editor, Problems view, and in the Explorer. To view problem details, fly-over a warning marker in the left margin.

Viewing JavaScript validation warnings

1.4 Outline View

The outline view depicts a structured view of the functions and variables of a JavaScript editor. You can filter the variables in the list by clicking , and selecting Filters or by clicking in the view’s toolbar.

Outline view menu

1.5 Source Actions: Formatting/Quick Comment

The JavaScript editor can quickly format either highlighted sections or the entire JavaScript file.  This action is available in the Source menu, editor context-menu, or using the CTRL+F keyboard shortcut.

Format action

To make one or more lines of code a comment, select the lines to comment, and press CTRL+Shift+C. This shortcut is a toggle, and will remove comment marks, as well.

Selected lines become comments with CTRL+Shift+C

1.6 Editor Preferences

The JavaScript editor has several source related preference pages allowing you configure different aspects of JavaScript editing, such as code appearance, syntax highlighting, and editor settings.

JavaScript preferences

You can adjust the performance/quality setting or set a scope for the JavaScript analysis to improve performance when working with large projects. These settings are available both globally and at a per project level. Available in MyEclipse 2015 CI 12 and later.

JavaScript development - performance preference

The JavaScript validator can be enabled/disabled by configuring the options in the main validation preference page.

JavaScript validation preferences

You can also set the validator preferences on a per-project basis by right-clicking a project, and selecting Properties. In the Properties window, expand MyEclipse>JavaScript>Validation. Select the Enable project specific settings checkbox, and configure the JavaScript Validator settings for your project.

Configuring JavaScript source validation for a project

2. JavaScript Debugger

The MyEclipse JavaScript Debugging system is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse AJAX Development tools. This section presents a JavaScript debugging scenario that involves:

    • Setting breakpoints
    • Launching/debugging JavaScript applications
    • Stepping through JavaScript code
    • Inspecting variables
    • Watching expressions/evaluations
    • Using JavaScript scripts view
    • Setting debugging preferences
Note: The current JavaScript debugger is available only on Windows 32-bit and Linux 32- and 64-bit. The debugger also runs on OS X 32-bit Carbon in MyEclipse 2014 and earlier. However, because MyEclipse 2015 is supported only on 64-bit Cocoa, the debugger is not available for OS X in MyEclipse 2015. A new JavaScript debugger that is available for all three OSs is a high priority for the MyEclipse team and is planned to be delivered during the 2015 calendar year.

2.1 Setting Breakpoints

You can set JavaScript breakpoints in the JavaScript editor, the HTML Web Designer, or the JSP Web Designer. In each of these editors, you set JavaScript breakpoints in the left-hand margin (often referred to as the editor gutter) by double-clicking next to the source line or by right-clicking and selecting Toggle Breakpoints.

Setting a JavaScript Breakpoint in a JS File

You can also add Breakpoints to JavaScript embedded in an HTML or JSP page.

Added Breakpoint in JavaScript inside HTML page

Both types of JavaScript breakpoints appear in the standard Eclipse Debug breakpoints view.

JavaScript Breakpoints shown in Breakpoints view

2.2 Launching/Debugging JavaScript Applications

JavaScript Application launch configurations support two types of JavaScript applications: project file-based configuration and URL-based configuration. Each launch configuration can set four specific JavaScript debug preferences for suspending on various events. To access the debugger configuration, click the drop-down arrow on the Debug icon on the main toolbar, and select Debug Configurations. Expand JavaScript Application, and select New_configuration.

JavaScript Debugger configuration

To set configurations based on project files, select the Project file option, click the Browse button, and navigate to a project or project file.

Selecting a project file for project-based debugger configurations

2.3 Stepping through JavaScript Code

When halted at a breakpoint the following actions are available from the toolbar of the Debug view.

Resume execution; runs to next breakpoint or end of program
Terminate debug process
Step Into next executable source line
Step Over next function
Step to Return of current function
Stepping in JavaScript

2.4 Inspecting Variables

When stopped at a breakpoint or stepping through JavaScript execution, you can inspect JavaScript variable values using the Variables view. This view allows you to expand functions that are in scope and browse their properties and corresponding values. As you step through JavaScript functions, the Variables view dynamically updates and refreshes its variable values to provide you an accurate view of the execution state of your application.

Inspecting JavaScript variables

2.5 Using Watch Expressions/Evaluation

JavaScript debugging supports watch expressions. In the Expression view, you add watch expressions to monitor JavaScript variables. When you stop at a breakpoint, the expressions are evaluated and their values appear in the Expression view.

JavaScript Expressions/Evaluation

2.6 Using JavaScript Scripts View

When debugging a JavaScript application, the Scripts view shows JavaScript scripts running in the AJAX Web Browser. Any of these scripts can be opened by double-clicking it. The children elements of each parent script shows the available JavaScript functions so you can jump straight to that function when you open the script. Opening the script allows you to inspect the code and set breakpoints accordingly.

JavaScript Scripts Inspector view

2.7 Setting Debugging Preferences

Set default options for JavaScript debugger settings by selecting Window>Preferences from the menu, expanding MyEclipse>AJAX and selecting the JavaScript Debug preference.

JavaScript debugger preferences

3. Instant-On Debugging

Click on the AJAX Web Browser toolbar or the MyEclipse Web Browser editor to debug the current URL as a JavaScript application. The Debug perspective opens automatically.

Debug mode for JavaScript debugging of open URL

4. Creating a New JavaScript File

To create a new JavaScript project or file, click , expand JavaScript, and select either JavaScript Project or JavaScript Source File.

Creating a New JavaScript file or project

When you choose to create a new file, you select the parent folder for the file, and enter the filename.

Entering the new JavaScript filename