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.

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

1.1 Code Assist

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

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 Support. Available 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 Support. Available 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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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

Both types of JavaScript breakpoints appear in the standard Eclipse Debug 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.

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

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

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.

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.

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.

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.

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.

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.

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