JavaScript

CodeLobster IDE provides support for JavaScript with syntax highlighting and autocomplete with IntelliSense based on variable types, function definitions. Also, the CodeLobster IDE provides support for exporting and importing syntax of JavaScript code, which makes it possible to read code from another module and allows you to provide code to other modules. CodeLobster IDE represents the following abilities to work with JavaScript code:

JavaScript syntax highlighting

CodeLobster IDE supports syntax highlighting in Editor to make it easier to read the semantics of the structured content by displaying each type of code in different colors and fonts. It helps check code for errors as it highlights mismatched enclosing characters with a different color.

To customize the colors or styles used for the syntax highlighting colors for JavaScript files, follow these steps:

  1. Open the Preferences dialog box (Tools | Preferences...).

  2. Go to Editor | Colors.

  3. In the Show settings for: component select Java Script item and customize the colors or styles using the selectors to the right of the pane.

Paired braces highlighting

The Editor highlights in:

  • pairs of braces

  • square brackets

  • and parenthesis

when a cursor is placed between beginning and ending enclosing characters.

Intelligent Autocomplete

The Intellisense autocomplete for JavaScript feature helps write code faster. The completion list is called automatically in the proper area of the JS code.

To call the list of functions and objects:

  • Select Edit | Intellisense | Autocomplete main menu item or use Ctrl + Space shortcut.

Autocomplete feature "remembers" and lists pop-up window for:

  1. DXML objects

  2. JavaScript classes

  3. JavaScript variables and functions.

The list of supported JavaScript objects:

  • Global (root level functions)

  • Math

  • RegExp

  • Plugins

  • Object

  • Function

  • Number

  • Array

  • Boolean

  • Date

DOM elements list and autocomplete

CodeLobster IDE includes partial support of Document Object Model (DOM) elements, methods and properties for JavaScript language. In order to use DOM objects autocomplete you should type, for example, document., and the list of methods and properties appear:

List of supported DOM objects:

  • document

  • window

  • window.parent

  • window.top

  • window.self

  • screen

  • navigator

  • location

  • history

[Note]Note

If you click Ctrl + Space on the blank area of JavaScript block the list of object methods and properties mixed up with regular JavaScript functions and objects will appear.

if you place caret behind the incomplete name of an object and there's only one choice for completing in the list, it won't appear, but the object name will be completed automatically. For example, you place the caret after "o" symbol in the following string do and press Ctrl + Space. No list will appear, but you will get document.

JavaScript navigation with holding Ctrl button

Symbols become clickable when you press Ctrl and hover over the type or member. To quickly navigate to the definition of a symbol, press the Ctrl key and then click on it.

JavaScript Function info

The Parameter Info popup shows the names of parameters in method and function calls. CodeLobster automatically shows a popup with all available method signatures within 1 second (1000 milliseconds) after you type an opening bracket in the editor or select a method from the suggestions list. You can review a brief description of any JavaScript function and its parameters.

You can explicitly invoke the popup if it has closed, select View | Intellisense | Parameter Info or press Ctrl + Shift + Space.

JS Content and Dynamic Help

These features help you quickly obtain necessary information on the JavaScript structure and syntax. You can get help on any object or function. The Dynamic Help window displays links to help topics for the element where the pointer is placed on.

By default, CodeLobster IDE conducts search for proper help information on the https://developer.mozilla.org/ site.

To get help topics using Dynamic Help:

  • Place the pointer on the target element and press the F1 button.

  • Select Help | Context Help main menu item.

  • Click the topic item in the Dynamic Help window.

    [Tip]Tip

    To show Dynamic Help window select View | Panels | Dynamic Help main menu item.

Support for JavaScript in Structure window

Structure window shows the general code structure of all JavaScript source files opens in the Editor. For each source file, the Structure displays a tree of symbol nodes, including variables, functions, and classes. Each node in the tree hierarchy can be expanded to display further detail, acting as an index to your source code.

Support of "Import" and "Export" syntax

Also, the CodeLobster IDE provides support for exporting and importing syntax of JavaScript code, which makes it possible to read code from another module and allows you to provide code to other modules.