Editing JavaScript

The NetBeans IDE provides enhanced JavaScript editing features that are modeled on support already provided for Java, Ruby, and other languages. This guide provides an overview of those features.

Software Needed for the Tutorial

To complete this tutorial, you need the following software and resources.

Software or Resource Version Required
NetBeans IDE 7.0, 7.1, 7.2. 7.3
Java Development Kit (JDK) 6 or 7

Basic Features

In this section we introduce the basic JavaScript editing features of the IDE.

Creating New Files

You can create a new JavaScript file in any project through the New File wizard. Click New->Other to open the wizard. In the wizard, open the Other category and select JavaScript file. A new JavaScript file is created from a template.

If you want the JavaScript file to be visible in the Project Editor, create the JavaScript file in an appropriate subfolder of the project, such as src.

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.

Syntax highlighting

The IDE provides true semantic highlighting to distinguish methods and variables.

Code Folding

Method code can be folded or expanded. Within the editor, click the fold icon next to a method and it folds. Click the expand icon next to a folded method and it expands. Folded code is denoted by an ellipsis box. ellipsis box Hold the cursor over the ellipsis box and the IDE displays the collapsed method.


collapsed method being shown by holding cursor over ellipsis

You can fold or expand all methods in the View -> Code Folds menu.

Navigation

The IDE's Navigator tab displays the JavaScript file structure. The Navigator recognizes prototype-style class definitions and shows them as classes with methods.


navigator tab showing Javascript file structure

Background parser

A parser runs in the background and provides detailed error messages.


background parser showing error

Bracket matching

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.

Formatting

Pressing newline 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 support

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 etc.

Semantic highlighting

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.


code snippet showing highlighting

Mark Occurrences

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.


highlighted returns

Instant Rename

Press Ctrl-R/Command-R on a local variable and you can rename the symbol synchronously throughout the file.


renaming variable synchronously

Refactoring

You can find all usages of a variable or operation within a product. After finding these usages, you can rename all occurrences of the variable or operation and refactor throughout the product. Before performing the refactoring, you can preview the changes in a split screen UI.

To find and rename all usages of a variable or operation:

  1. Select an occurrance of the variable or operation in the editor.
  2. Select Edit->Find Usages (Alt-F7). You have the option of searching the comments as well as the active code. The Usages view opens, showing a tree view of all usages of the variable or operation.


    finding all usages of selected variable

  3. Select the variable in the editor again and select Refactor -> Rename (Ctrl-R/Command-R). A dialog box opens in which you type the new name.
  4. Click Preview. The Refactoring view opens with a tree view of replacements on the left and a split screen of the original and refactored file on the right.


    preview of refactoring of all usages

  5. You can choose not to rename the variable or operation in indiviual places. Deselect the individual renaming in the tree view on the left.


    individual renaming unselected

  6. After review, click Do Refactoring and the IDE refactors all files.

Quick Fixes and Semantic Checks

The IDE performs many semantic checks on the JavaScript code and offers quick fixes. To display quick fixes, select Source -> Fix Code (Alt-Enter). The semantic checks include:
  • Reassigning a parameter
  • Anonymous function does not always return a value
  • Variable hides argument
  • Code which has no side effects (no calls, no assignments)


    code with no calls or assignments

  • An assignment in a conditional (if x = y). This semantic error has several quickfixes associated with it, such as converting to an == expression, and adding double parentheses to turn off the warning.


    menu of quick fixes for an assignment in a conditional

  • Inconsistent returns from a function (where some return expressions return a value, and some do not)


    inconsistent returns

Tasklist

The background parser and the warning quick fixes are integrated with the tasklist. Open the tasklist (Window -> Tasklist) to view errors in any of your files that are associated with JavaScript. Double-click on a task in that list and the editor goes to the relevant line.


tasklist showing quickfixes

Code Completion and Type Analysis

JavaScript code completion gives you a choice of the IDE's built-in JavaScript core classes to insert into your code. For example, you can write
    x = "foo";      y = x;      y.  

and code completion will show you the methods available for JavaScript strings. Code completion works with all the literal types in JavaScript. The type analysis and code completion machinery also knows about prototype style classes (regular functions only) and the new operator for constructing them.

NetBeans IDE consults type parameters for function parameters and  return types (@type, @param). These types are shown  in code completion: in the list, in the documentation,  and in parameter hints (Ctrl-P). Return types are also shown in  the code completion dialog after the function name, separated by a colon.


code completion

If you mark a method with @deprecated, it is struck through in the navigator and in code completion calls to this method. The accompanying  deprecated description is shown in a separate section in the code completion documentation with a highlighted background.

NetBeans IDE can also determine the  return type for many functions. This function is essential for JSQuery support. For example, methods which return true or false have a Boolean return type, those returning literal numbers have a Number return  type, and so on. The IDE both infers types and explicitly tracks declared types via  comments. The most important implication is that the IDE follows types through calls.  If you have code like this:

"foo".big().charCodeAt(50).toExponential(fractionDigits);

NetBeans first sees that foo is a String, so it looks in the String  class for the big() method. The charCodeAt(50) function on that String is of the Number type, so if you apply code completion on "to" here, you will see only the methods available on Number. 

Note: Looking up return types involves a trip to the index, which can take time, so during type analysis the IDE  looks at the clock and after a second or two has elapsed it aborts  type computation. This can be relevant for large functions, or slow  computers, or fast computers under a heavy work load.

Go To Declaration

Press Ctrl and hold the cursor over a line of code. Left-click the variable name. When the IDE is not sure about the type of your variable (and therefore the target function) it offers you a popup menu of all declarations of the variable across your project:


popup for going to variable declaration

Documentation

Code completion shows the API documentation for both the core javascript APIs and the DOM APIs. You can also view documentation for your own functions. Ctrl-pointing at calls also shows documentation (as a tooltip).


Documentation tooltip

Embedded Completion

Code completion on element ids in the HTML works for the Prototype.js $("...") function. To see code completion on element ids, press Ctrl-Space within the quotation marks. For example, if you add variable = $("f|") and press Ctrl-Space with the cursor (|) immediately after the f, code completion shows all HTML element ids in the document that start with f.


element id completion

Embedding

JavaScript editing features work for JavaScript embedded in RHTML, HTML, and JSP files.

Open Type

Press Ctrl-O/Command-O and quickly jump to any of your functions, across files.


go to type dialog

JSDoc Support

If you annotate a method with @private, it shows up in the navigator with a lock icon. If you annotate a function with @constructor it is shown as a constructor (and included in code completion after the "new" keyword), and you can use @class and @namespace to explicitly assign functions to given classes (though the type analyzer can often assign these functions automatically). Functions marked @ignore does not show up in code completion but is included in the index and can be used in a Go To Declaration.


Basic File Inclusion Filtering

Code completion in HTML only includes code from referenced JavaScript files. Consider a project in which the file foo.js defines the function foo(), and the file bar.js defines the function bar(). If the file hello.html includes only <script src="bar.js"></script>, only the bar() function is shown in code completion for hello.html.



See Also

For more information about using NetBeans IDE to edit non-Java web languages, see the following resources:

To send comments and suggestions, get support, and keep informed on the latest developments on the NetBeans IDE Java EE development features, join the mailing list.

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo