Working with JavaScript in MyEclipse

JavaScript Projects

In MyEclipse 2021 and later versions, JavaScript support works out of the box for most JavaScript source—no special JavaScript Eclipse project or JavaScript facet is required. However, we recommend using a jsconfig.json file to specify a project context. This enables advanced JavaScript analysis across multiple source files in the project, for enhanced IntelliSense, validation, navigation, etc.

MyEclipse helps you create this file, and you can tweak it further as desired—for further details, please see Appendix A.

Editing JavaScript Source

IntelliSense

When typing in JavaScript files, use the content assist shortcut (Ctrl/Cmd + Space by default) to bring up a list of proposals. Proposals are also automatically displayed after typing trigger characters. If available, JSDoc will also be displayed in a popup.

JSON

IntelliSense is available for JSON files too—when editing common files, you get content assist as well as documentation out of the box. You can also link to the schema for similar support when editing less common files by adding a “$schema” property to the JSON.

Automatic Imports

When working with modules, content assist suggests the names of exported symbols found in your project. Using this suggestion adds the import as well.

Validation & Linting

Only the files currently open in an editor will be validated. You will see error, warning and info markers in the editor’s ruler area as well as in the Problems/Markers view.

Note: For advanced JavaScript validation, either ensure your project has a jsconfig.json file with the checkJS property set to true, or add a “//@ts-check” comment to the top of the file.

ESLint

ESLint support is inbuilt, but you must have an ESLint configuration file in root of the project, and ESLint installed in the project as well—node_modules must include ESLint, as well as any ESLint plugins you’re using. For example, when linting ES2020 code, you need to use the Babel parser.

Quick Fixes

Quick fixes are available for several warnings and errors, including linting issues. Simply hover over the squiggly line to see links to several possible fixes.

Code Analysis & Refactoring

Use the Find References action to find references to JavaScript constructs in the current file or across your project.

Rename refactoring allows you to rename these constructs across your project.

Navigation

Outline View

The Outline view depicts a structured view of the functions and variables of a JavaScript editor, giving you a quick understanding of how the code is structured. Click an element in the outline to jump to that section in your code.

If the view is not visible in the current perspective, select Window>Show View>Other>General>Outline from the toolbar.

Quick Outline

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

Debugging JavaScript with Chrome or Firefox

Place breakpoints in your source by double clicking the ruler area. You can place breakpoints in JavaScript files, or JavaScript embedded in HTML/JSP files too.

To create a new Debug Configuration:

1. From the Debug drop down, select Debug Configurations.
2. Create a new Chrome Debug/Launch Firefox Debugger configuration.
3. In the URL field, paste the URL of your application.
4. In the working directory field, specify the filesystem path to the root of your project.
5. Click Debug to start the debug session.

Chrome Debug Note: If Chrome is not already running, this will start Chrome in debug mode. If Chrome isn’t running in Debug mode, clicking Debug will reuse the running Chrome instance, but JavaScript debugging will not work. Either start Chrome in debug mode using the --remote-debugging-port=9222 switch, or close Chrome so it can be automatically started with the right settings.

Appendix A: jsconfig.json

Create this file in the root directory of your JavaScript project. This configuration file can be used to specify files to be included in the project’s JavaScript context, as well as compilation and resolution options.

Sample jsconfig.json

{
   "compilerOptions": {
      "disableSizeLimit": true,
      "allowJs": true,
      "module": "commonjs",
      "target": "es6",
      "checkJs": true
   }
   ,
   "exclude": ["node_modules"]
}

For details, please see the jsconfig.json Reference.