Intellisense of VS Code is poor - javascript

Hi I am using VS Code for quite some while and it's Suggestions of, for Example Class properties or methods is kinda poor. I wanted to check out if this is suppose to be like that or if that is an Issue only for me. I am using it mostly for frontend development with JS/TS or JS Frameworks and often when I install npm packages and import them Intellisense is not showing me their properties which is very lame because this should be in my opinion the number one support it should provide. Many other features of it are great so I would like to keep using it but if that is the supposed behaviour I think I have to switch to a new IDE.
For Example I am using Three JS right now which has in my opinion a very solid Object Oriented Style where it is very essential to know what properties and methods a class has, though Intellisense kind of does not know unless I have typed it once manually, e.g:
I have imported Three JS as follows at the top of the file:
import * as THREE from '../node_modules/three/src/Three.js';
and I am looking for TextureLoader which suppose to be a method of the THREE class which it is when I type it manually, everything works fine though VS Code does not seem to recognize it which is very poor behaviour for an IDE. The Suggestions you see in the Image are the only ones it suggests me. (There is textureLoader typed with a small t at the beginning, but that is because I have used a variable with that name) so VS Code only suggests me things that I have typed already. And
I have checked all the related Posts Stackoverflow is showing me but nothing is related to this topic and All the bug fixes only are related when you have a literal bug in VSCode, but I am not even sure this is an actual bug. Also many people love VSCode and claim it is the best free IDE and I am wondering why if it even can't provide the most fundamental things. I remember Eclipse for Java where it showed you every attribute and method of a class.
I thought it could be a problem of JS since it has no types but I think I remember that Webstorm provided the suggestions correct for JS
So my question is, is that expected? Should the Intellisense mechanism not detect Methods and variables defined in a imported class and just provide you with a list of all of them?

So I have found out that it is not just a problem with my VS Code. VS Code just cannot know what types or methods are available for a class or object. I thought it might have some parsing capabilities running through an class and picking up it's methods to display it in the suggestion/code completion box, but I guess this is to overkill.
So Type completion is available if you use Typescript. For me event though I am using Typescript together with Three.js I still haven't had any useful suggestions in my VSC. So I have found out that the IDE relies on the type definition files "[name].d.ts" where types for Typescript are defined. These should be provided by the author of libraries/ packages you use.
If their are not there is a repo where you can check if such types are available on the npm registry found under #types so for me I had to manually run:
npm install --save-dev #types/three
which installed me a new directory under #types/three with a d.ts for every three JS Module.
when you do then an import like:
import * as THREE from 'three';
typescript knows to also look for declaration files d.ts under "node_modules/#types/three" I guess
So to summarize:
No code completion because of js dynamic type system like [python, ruby]
You can have code completion using typescript since it has static types like [java, #c]
There must a [name].d.ts file provided telling the ide how a class is defined.
For build-in things like the 'dom' and 'window' it is provided by default when installing typescript
correct me if I'm wrong

Related

Static Call Graph analyzer for Javascript

I can't seem to find a basic piece of tooling which is a static analyzer that shows me which pieces of code use methods from which other pieces. I could even do with a very primitive one that only shows me which source files contain references to names found in other files in a NodeJS project (still using CJS require here). So far all I have found is a couple of abandoned projects, but one should think there simply must be something out there.
Edit: Graphical output is not required (but certainly a plus); what I primarily need is a tabulation (text) of which functions in which module call functions from which other modules so I can order dependencies.
Sublime text has this feature where when you hover over a name you get the location where that name was defined; this even works across modules and with CoffeeScript. Does anybody know how that is implemented?
This is an actively maintained proprietary call graph generator that supports multiple languages.
Usage : callGraph <files> <options>
https://github.com/koknat/callGraph
I’ve been looking for a similar tool to help my team track the indirect usage of a deprecated function, so I ended up writing a script based on the ts-morph module: https://gist.github.com/adrienjoly/fc117b187f87cca3417abc4a8433e3a2
It’s a node.js CLI that generates the call tree (a.k.a. call hierarchy, or dependency graph) of a function. You can probably modify it to support JavaScript projects. Or create a tsconfig.Json file that includes your JavaScript files.
Hope this helps!

How to get VSCode to show my libraries function arguments when hovered

I wrote a JavaScript library, and I'm trying to understand how I can show the function parameters/definitions when a user hovers over them in VSCode (I see this in other libraries, and I dont notice anything special about them). Im sure its something simple but I just dont see how I would do it. Link to the project is here: https://github.com/isaacgr/jaysonic
I've tried adding jsdoc style comments around the class definitions, but in general I'm not sure what to try. I'd appreciate if someone could point me in the right direction.
An example would be what I see with JSON.parse
Visual Studio Code uses IntelliSense for autocompletions like the one you mentioned and in JavaScript they are based mainly on TypeScript definitions. If a project is already built using TypeScript, they may be generated and linked in the corresponding package.json-file using a "typings" or "types" property.
Alternatively (I haven't tested this approach though) existing JSDoc comments may be used to generate these TypeScript Definitions.
The TypeScript Community has furthermore (often manually) created separate Typescript-Definitions, which are available as npm packages called #types/name-of-the-package.
In your case the first approach of creating/generating a typings-file and linking it in your package.json is probably the best approach to achieve the desired result.
Btw, if you want to inspect such a typescript definitions file, press Ctrl (on Windows) and click on the JSON.parse method. This will show you the corresponding typescript definitions file called lib.es5.d.ts (which is embedded in vscode as it's part of the JavaScript language and therefore doesn't need to be installed)

How can I get information on hover effect in atom editor as it displays in VScode?

Is there any plugin that I have to install in Atom to get this type of information on hovering on variables, objects or functions somewhat like intellisense? It does in vscode but I want this same functionality in atom.
Meet IntelliSense.
Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.
See docs it has perfect explanation about Intellisense
https://code.visualstudio.com/docs
There's an existing issue on the autocomplete package for this to be added so keep an eye on that.
For Golang Devs there's a package called go-tip that gives you some information when you hover over functions, variables, and methods but its not a lot.

typescript documentation generator

i am starting documenting my java-script + typescript website with jsDuck
I've documented my class very well , but my problem is interfaces - they don't compile from the ts file over to the java-script.
here is my output, as u can see the page doesn't know who is IComboBoxScope
of course it understandable due to the fact it doesn't generated to the java-script
http://i.stack.imgur.com/PIVKe.jpg
is there a proper way to workaround this in jsDuck?
IF NOT, is there other products or solutions for documenting js with typescript out there?, maaybe jsDoc? ,typeDoc?
sorry for the poor sample/photo, i am working on a private network.
just wanted to share my findings,
i have found a great solution typeDoc is really good, it doesn't need the compiled javascripts, it is dedicated to the ts files,
new solution, active environment and the great thing is that i only need to run a 1 line script with the project library as a parameter.
typedoc --out path/to/documentation/ path/to/typescript/project/
output example
i have seen options to change themes, class hierarchy is working very well
installed by NPM and support es 3,es 5
great!.
From JSDuck side there is no simple workaround as JSDuck has no concept of interfaces. You might document your interfaces as abstract classes for JSDuck, but it's not really the same. You're better off using a tool that natively supports TypeScript.

TypeScript the unintrusive way: Can I use typescript with definition files only (and normal js files)?

If I have a project that wants to work with plain JavaScript and using a language that just compiles to JavaScript is out of the question, but I still want the benefits of static type checking and code completion in my IDE: Could I still use TypeScript, but keep all those additions in (external) .d.ts files?
Are there any limitations I should be aware of if I attempt this approach?
I see two problems (at least):
How does your IDE know that although it is editing a Javascript file, it should perform Typescript type validation and completion ? JSDoc however is correctly supported in many IDEs
Type Definition Files contain definitions only. Type inference needs the whole implementation to work correctly.
using a language that just compiles to JavaScript is out of the question, but I still want the benefits of static type checking
Have a look at google closure tools : https://developers.google.com/closure/compiler/docs/js-for-compiler
That's what many people used before (and still do after) TypeScript.
Yes, you can directly use the JavaScript files generated from the typescript, in a project. The project doesn't need to know it was created from TypeScript. You don't even need the type-definition files. The generated js files don't have type information. The type information is only for developer's convenience, it is not needed by the browser.

Categories