The IDE provides the following basic JavaScript editing features.
A parser runs in the background and provides detailed error messages.
Brackets automatically close. Typing a ', ", [, ( or { inserts a matching closing symbol. Typing the closing symbol will type through the inserted one. Backspacing the opening symbol removes the matching symbol.
You can create a new JavaScript file in any project through the New File wizard. Right-click a folder and choose New > Other to open the wizard. In the wizard, open the Other category and select JavaScript file.
The default JavaScript template contains only licensing information. To add content to the template, go to Tools > Templates and open the JavaScript template in the IDE.
Method code can be folded or expanded. Within the editor, click the - icon next to a method and it folds. Click the + icon next to a folded method and it expands. Folded code is denoted by an ellipsis box. Hold the cursor over the ellipsis box and the IDE displays the collapsed method.
You can fold or expand all methods in the View > Code Folds menu.
JavaScript editing features work for JavaScript embedded in RHTML, HTML, and JSP files.
Pressing Enter indents the caret based on where the next line is expected to be. Pressing a } will outdent the line immediately. Reformatting a selection or the whole buffer reindents the whole file.
JSON files are treated as JavaScript. The background parser runs in a special JSON mode where it allows only an object literal expression with no functions and so on.
Placing the caret on a symbol highlights other uses of the same variable or call. Furthermore, placing the caret on a function keyword will highlight all the returns from that method (return, throw). This should also happen if you place the caret on a return.
The IDE's Navigator tab displays the JavaScript file structure. The Navigator recognizes prototype-style class definitions and shows them as classes with methods.
Method declarations are shown in bold (including prototype style method declarations in object literals). Global variables are shown in green. Unused variables are shown in gray underline.