Eclipse Neon 1 – Standard-JSDT mit Schwächen – zusätzliche Plugins
The Eclipse plugin Webclipse JSjet offered by the US company Genuitec (in combination with Tern) helps to overcome some of these deficits. So, I found it interesting to try using JSjet within Eclipse Neon 2 in a real project I am presently working on. Instead of going back to Eclipse Mars …
In addition I must say, that JSjet is not for free – at least not for a reasonable amount of development work per month. And ordering a license comes with a – in my opinion – strong negative side aspect – which I do not like at all. It has to do with the automatic and periodic information transfer to the company behind JSjet. This is the topic of a third post.
Deficits of the Outline View information presented by JSDT for Neon 2
The present JSDT Outliner provides only some deeper information on classes and methods declared by the newer “class” statement of Ecmascript 6. However, even then we do not see properties (member variables) of a ES6 “class”. For constructor functions we cannot see see any deeper hierarchy structure at all – only the topmost class/function declaration itself. But no internal structure. E.g. no functions and , their prototype based “methods” (i.e. defined functions of the prototype)
So, no “methods” (i.e. functions of prototype objects) are listed in the Outliner. Tested on a freshly installed Neon 2. See below the very simple test code (really,
only for testing; I normally do avoid global variables … ).
Frankly, I think this is a bit of a mess; you may also note that the global variable “x”, which is not declared explicitly with a “var” or “let“ statement, does not appear at all in the JSDT Outliner.
You can’t work and navigate with such an Outliner in real world projects, especially when you do some more complex Ajax/Ajaj development ….. Also code changes show up in the JSDT Outliner only when and after a you explicitly save your JS file.
Alternatives for JSDT? Webclipse JSjet?
So, I started to look for alternatives for or supplements to JSDT in Eclipse Neon. One could think about Aptana Studio. However, the Jenkins repository for Aptana 3.4.x on the Eclipse marketplace is presently not working (since midth of Feb 2017 by the way; due to license and legal aspects). And for the Aptana studio plugin for Eclipse I have always experienced some conflicts with other plugin packages and their editor components in the past. So, I tried some other things as e.g. Vjet, but nothing really convinced me.
JSjet and the Eclipse Outliner – What is good?
I should first of all mention the following 2 points – which are related to the presentation of the code hierarchy, objects and object elements in the Outliner:
- Information about the code hierarchy structure and internals of constructor functions and classes
Functions that are used as constructors in a “new” statement or functions with explicit prototype declarations are marked with a “P” for “prototype”. This is certainly helpful for a quick orientation.
JSjet provides you with information about general objects (e.g. declared by using literals). It informs you about their member variables and their functions/methods – i.e. you get an overview over the first inner hierarchy level of objects. (For comparison: The present PHP Outliner of PDT does not
provide you with more hierarchy levels.)
For concrete objects derived from a constructor function, only the relation with the constructor and its prototype is indicated in the Outline View. This also works for objects defined via simple inheritance patterns using a prototype chain. In most cases this is sufficient – as you can look up inherited properties in the displayed structure of the constructor. (The interesting question, how changes of properties applied for object instances or extensions of concrete object instances with additional properties or methods are handled, will be discussed in the forthcoming post.)
For arrays you get an oversight over the different types of the array’s elements. See the test example of my next post for a display of this property of JSjet.
By the way: The same depth of information is provided by the “Quick Outliner” which one can activate by pressing “Ctrl O” or via opening a context menu point after a “right mouse click” on a code element.
- Project wide or local code analysis of the present file via “Tern”
When you install JSjet some more Eclipse plugin modules from the French “Tern” project are installed. Tern itself uses a local “node.js”-installation provided automatically in your home directory under the subdirectory “~/.webclipse”. The basic task of Tern is a project wide code analysis.
The default for the scope is “Entire project“. For this setting you will e.g. notice that that e.g. (global) variables or functions previously defined in some other files of your project are NOT shown in the Outliner. You may get more information about missing points and their location via an additional context feature, namely the “Call Hierarchy“.
In the beginning I found this type of analysis and display a bit confusing. Meanwhile, I consider it helpful because it forces you to watch your naming of variables, objects, functions, prototypes and to think about the proper use of namespaces or modules.
- Availability of information on variables, functions, objects, prototypes in the code completion dialog Knowledge which the duo JSjet/Tern has gathered on global variables, functions, constructor functions, elements of prototypes and classes is also made available in the code completion dialog window. This helps a lot when coding – at least theoretically (see, however, the next post!).
So – this looks good on a first glimpse. A deeper analysis
is the topic of the next blog post. With ambivalent results …
JSjet and the Outliner – what is missing?
There are more things which felt not satisfactory when testing JSjet. There are some obvious deficits, which you find very quickly when doing real work with it.
- No display of “private” variables
As will be discussed in more detail in the next post, no private variables defined either with the old “var” or the new “let” statements inside functions, constructor functions, closures or class methods are shown. This is really a pity! One would like to now what a developer wanted/wants to keep private in a piece of code. Especially, if you work with code not designd by yourself.
However, private variables defined inside functions or object methods do appear in the code completion dialog! But using it you may get confused, if there exists a global variable with the same name as a variable declared for the present function scope! The code completion window of JSjet will not make a clear distinction between these two different variables. The variable name will only be referenced once – and the only hint you get is its general occurrence in the code file. We shall see more on this topic in the next blog post.
- Missing shortcut icons and control actions for the Outline view
Another missing feature is a collection of shortcut icons at the top of the Outline View for useful operations like a simple full collapse of the code hierarchy structure. Instead the icon area at the top of the JSjet Outline view is extremely reduced in comparison to the standard one for JSDT.
You start missing an overall collapse option as soon as you have real life and complicated code structures. JSjet opens the Outline View in a mode where the all hierarchy levels of constructor functions and classes are displayed fully expanded. So you must collapse object for object and hierarchy level for hierarchy level by yourself.
In addition there is no option to set on/off a link to the editor actions. JSjet is automatically linked to the editor – which is not always desirable.
- No filter options for the Outline View
The worst deficit in my opinion is the lack of filters – in the sense of e.g. “show only objects”, “show functions only”, “do not show variables”, … . Just to avoid clattering of the Outline view with presently uninteresting things during the development of longer, complex programs.
Most of these points were working at last in old versions of JSDT (Kepler, Mars).
Are there usage problems?
Yes, I experienced that the outliner did not always give me complete information on objects – even when reducing Tern’s scope to the present file. This tends to happen sometimes after having used the “hierarchy call” feature of Eclipse JSDT, sometimes after a long time doing nothing on a project in the same workspace or after having worked on another project in the same workspace. It also happens when you switch the Tern analysis scope. …. or when you work with 2 eclipse windows …. It is unclear to me, what the real cause is – but it happened a few times with Eclipse 2. Maybe computing the Outline contents is not triggered correctly under some circumstances. The behavior became better after a recent update to Neon 3 and setting the Tern settings to quality instead of performance. In most cases closing all “.js” files and opening them again helped.
JSjet and Tern overcome the problem of JSDT which provides too few information in the Eclipse Neon Outline view. From JSjet you get sufficient information for keeping an overview over your code and object structure and for navigating between functions, prototypes and derived objects.
However, after some real work with JSjet/Tern I got a bit confused about some hints in the Outliner which
seemed to be at least misleading. So, I decided to test the code analysis of JSjet roughly. And this led to the question :
Is all of the information provided by JSjet in the Outline view really valid?
See the next blog post
Webclipse JSjet, Eclipse Neon 2 and the Outline View – what I like and what not – part II
for the results!