Revision as of 15:20, 17 August 2012 by Ppisl (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)


New JavaScript Editor Support

This document contains information about progress of rewriting JavaScript editor support from user point of view. If you want to play with it, you should use this continual build. The features mentioned here doesn't have to work in all cases. They are not tested yet and they are not fully stabilized yet.

All features are based on a model, which is new and the model is based on static analysis of source code. Which means that in JavaScript case it can be approximate and doesn't have to be right in the runtime. The features use the model for obtaining information. They should be independent on the parser result as was in the previous support.

The new editor support is not recommended for real usage yet. There are many things that missing or that are not completed. On the other hand we appreciate every input that can help us to push the new editor support to get it ready for testing soon.

Semantic Coloring

The new semantic coloring gives more information about the source code. You can compare from the pictures below.

Coloring in the current JavaScript editor support Coloring in old editor support

Coloring in the new JavaScritp editor support Coloring in new editor support

One of the big change is that by default the green color is not used for the global objects, but for object properties. It should be more aligned with other languages, where the green color is used for marking class members. The new JS support use for coloring global object as default violet color.

You can also noticed that the name of an object definition is also in bold. If there are used reserved words as names of objects/method/properties (they have to be in quotes), then they are colored as well.


The new support is able to analyse more levels of objects as you can see from the picture below.

Navigator in the current/old JavaScript support File:NavigatorOld.png

Navigator in the new JavaScript Support File:NavigatorNew.png

The navigator in the new JavaScript support is able to display more information about the JS source than the previous one.

Mark Occurrences

This feature really benefits from the model, where are kept occurrence of every element in the source file. The previous support used only simple text analysis for finding occurrences and it was not scope aware. You can see one example on the pictures below.

Mark occurrences in the current/old JavaScript support File:OccurrencesOld.png

Mark occurrences in the new JavaScript support: File:OccurrencesNew.png

In this case when the caret is on the name identifier (line 7) the old JS support marks only the name property of object class, which is wrong. It's different property in different object. This is caused because the current JS support is not aware of definition scope and some features like mark occurrences , goto declaration, refactoring etc are based on the simple text comparing of the identifier names.

The new JS support marks the occurrences better. It doesn't mark the name property of class object in this case, but marks the real occurrences of the selected properties.

GoTo Declaration

The GoTo Declaration feature use the same model as Mark Occurrences. So the feature should be much faster and gives better result than it was in the previous support.

Code Completion

The code completion is based on the model too. The code completion is not fully done and it will takes some time to support everything what was supported in the old JS editor. We are now able to completed object properties, object methods and other simple cases.

Type inference is just started and needs to be done properly for complex analysis. We are in the beginning of implementing code completion in new JavaScript support, on the other hand we can offer better results in already implemented cases than was obtained in the previous support.

Example of code completion in the current/old JavaScript editor support File:ccOld.png

Example of code completion in the new JavaScript editor support File:ccNew.png

The new JavaScript support is able to offer properties and methods in the places, where the old one offers general items. Unfortunately we don't have implemented JSDoc support yet, which we need for the obtaining information about runtime objects, so we are not offering these items yet.

Getters and Setters in Object Literals

This functionality was not implemented in the old editor at all.



The get and set words are colored as method and the property name is colored as a field.


As you can see from the picture above, the navigator displays property and the getter and setter definition on the same level. The property navigate to the getter of setter (depends on the position in the source code).

Mark Occurrences


When the caret is place on the property name, the appropriate names of the setter and getter definition in object literal are also marked.

Code completion


In code completion is offered only the property. Nor getter either setter.


Semantic Coloring

Semantic coloring highlights newly HTML tags like in .java files in the newest NetBeans builds. You can compare from the pictures below.

jsDoc coloring in the current JavaScript editor support jsDoc coloring in the new JavaScritp editor support
JsDoc coloring in old editor support JsDoc coloring in new editor support

Demo Project

There is available a PHP project, where the features are demonstrated. The entry point is readme.txt file in the source root.

Not logged in. Log in, Register

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