CODEWITHSUNDEEP
javascriptautocompletewebstorm
Hans
Hans

Reputation: 1544

Java-like code autocompletion with JavaScript?

As a Java developer, I am used to being able to see all relevant information out of the code completion of the IDE already. Here is an example of code autocompletion from the Eclipse IDE. For instance, you can see that the return type of the function contentEquals is a boolean and it expect one parameter with type StringBuffer. Additionally, if the JavaDoc is there, you even get a nice explanation of how the function is supposed to be used.

enter image description here

Now I am looking for something similar when coding with JavaScript. I started using Webstorm as I wanted an IDE with the more advanced features but when you look at the code autocompletion, it either seems rather poor or I'm not using it right.

Can someone help me figure it out?

Here is a more specific example:

Let's say, you want to get the user's position by using the navigator.geolocation. Let's assume you know as much as that it can be done by calling the getCurrentPosition() method.

You go ahead and type in your IDE (Webstorm in my case):

navigator.geolocation.getCurrentPosition()

Here is what the Webstorm IDE makes out of it:

enter image description here

Ok, it tells me there is one mandatory and a couple of optional parameters to call this method. Let's say, you want to call this with only the mandatory parameter, which is supposed to be a function. So far so good, but what kind of function? Is this function supposed to take parameters? Does it return anything? There's no hint about it.

I found in various examples on the web, that this callback function actually does take one parameter, so I go ahead and write it:

function printPosition(position) {
    // do something
}

But here comes the next question: what type is this parameter position? What can you do with it?

So I try the code autocompletion on it: enter image description here

Whooot? It gives me all kinds of stuff, but not at all what I'm looking for. So I'm ending up with google again.

And here it is how it is supposed to look like:

console.log(position.coords.latitude + ' , ' + position.coords.longitude);

Honestly, I never would have guessed that this is how it's done only by looking at the autocompletion which is very annoying because I am used to being able to do that when coding in Java.

Can anyone relate to what I am experiencing? Am I missing something? Any help would be highly appreciated!

Upvotes: 7

Views: 2328

Answers (3)

user2451016
user2451016

Reputation: 1961

I also face similar issue while writing automation code in JS. I found that- using lightweight editors like- Visual Studio Code, I can get the limited number of Auto-complete suggestions.

enter image description here

Although its not as good as IntelliJ/Eclipse based auto-complete for Java or VSTS based IntelliSense for C#.Net for that matter. But still, it goes near as instead of myriad number of options, we get a limited number of suggestions.

Also, I have found that with TypeScript experience is much improved.

Upvotes: 0

arvymetal
arvymetal

Reputation: 3244

Javascript is a dynamically, weakly typed language: the type is loose and can change at runtime, consequently, the IDE can't provide accurate completion, unless it can find hints under the form of code documentation (JSDoc).

You should give a try at Typescript: that's a Javascript compiler, from Microsoft, that adds strong typings (with a C#-like syntax). It also allows to write code using the most recent ECMA implementations. It adds consistent type check at compilation + into the IDE.

Put differently, that's a way to write modern Javascript (with the support of classes, generators, spread operators etc...), along with typings (types, generics, interfaces), and some Typescript specific features (that are likely to make it into the next ECMA versions, given Microsoft influence concerning these norms).
That's the Typescript compiler that cares about transforming all of this code into pure and backward compatible Javascript code, that can run in older browsers/platforms.

Have a look at the handbook to see how the syntax looks: https://www.typescriptlang.org/docs/handbook/advanced-types.html

The limitations:

  • it implies an intermediate compilation step, on file modification for example. There may be some setup to do for that, more or less simple according to your needs (if working on a local environment, Typescript-capable IDEs can watch and compile the files themselves, and sometimes embed Typescript, making this transparent)
  • currently, the types and interfaces only exist at compilation time, not in the resulting Javascript code. Consequently reflexivity/introspection is limited
  • when using external libraries (such as NPM packages), you will get completion only if you have the related Typescript declaration file at disposal

And a last word: VSCode is also a good IDE for Typescript, less exhaustive than WebStorm but free.

Upvotes: 3

samanime
samanime

Reputation: 26527

In a nutshell, because JavaScript isn't a strongly typed language like Java, you can't get the super granular autocompletion like you get in Java, unless the developer has included comments that WebStorm (or any IDE) can interpret.

You can implement those comments using Google Closure Annotation or JSDoc3. Using those, you can manually specify comments that will give you autocompletion.

Without those though, WebStorm really is just doing it's best to guess at what it needs, and it's usually not able to guess too well (which is why you get that giant list of basically everything in your last screenshot).

With JavaScript, you'll just have to rely on documentation.

Upvotes: 4

Related Questions