Webstorm doesn't see API - javascript

I am using JetBrain's WebStorm to do my JavaScript coding. Honestly, I have tried other programs and truly think this may be the best coding environment for JavaScript.
Unfortunately, for some reason it does not see the OpenLayers 3 class structure whatsoever. Usually, the IntelliSense in WebStorm doesn't have any trouble, but everything in this case is labelled error red because it cannot find the structure. This structure is located at: http://ol3js.org/en/master/build/ol.js.
I have copied the file locally and created the appropriate reference locally in the project. WebStorm had no problems with OpenLayers 2 API located at: https://github.com/openlayers/openlayers, but for some reason now it cannot see OpenLayers 3 object. It has nothing to do with it not being able to locate the namespace, because it finds the ol class and has no reference issues finding the file in the source directory.
I have also added the ol.js API library as an external JS library to the project in WebStorm, which does not solve the problem.

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!

Eclipse JSDT autocomplete not working

I've done research and see this is a recognized issue. I guess my question will be: Is there a solution in Eclipse Mars or in Neon? Another plugin for JavaScript Content Assist?
I'm running Eclipse Mars and have a project with Java and JavaScript (uses ScriptEngineManager). JavaDoc/AutoComplete is working in Java but not in JS files. It Was working but then just stopped. I've restarted, rebooted, refreshed, rebuilt. No joy. The error reported is :
An exception occurred while getting the JSDoc. See log for details.
(in the log: ) file.js [in [in ...Workspace\.metadata\.plugins\org.eclipse.wst.jsdt.core\libraries\system.js]] does not exist
I deleted and re-defined the workspace. No joy. Mouseover the keyword Array and it does show system.jsArray with ECMA info. But mouseover String and it shows src/docs/jsString. "src/docs" is a path in my project.
I'm thinking it's just looking in the wrong place for the docs but I don't know where to set that. I've read that there is a bug where auto complete only works within a file. This seems to be consistent where it's still looking within the current file for the definition of everything.
I can get String to refer back to system.jsString if I add an invalid function. But if I fix the function it goes back to looking in my src/docs. Go figure.
Maybe the project structure is wrong (this is FOSS I got from Github). In the root of the project there are src/foo folders with packages and .java source, a reference to the JRE System Library, a couple .jars, and another src folder with src/docs/java with .java files and src/docs/js with .js files. Do I need to change the folder type of src or do something else to it so that it's recognized as a code folder? Right now it's in the project explorer with a common "folder" icon, not like one of the package source folders.
Do I need Neon? Do I need another IDE?
This suggestion to update the .project didn't help.
I'm going to try the package "Eclipse IDE for JavaScript and Web Developers" but I dont know if that will help with this Java/JS hybrid project. I'm also going to try Atom.
Thanks.

Webstorm JavaScript External Libraries vs Project Directories

In IIS and therefore VS, there are virtual directories which allow simplified, virtual, relative referencing in script tags. They are handy. In WebStorm you can get the same effect with Project Directories and then marking your project root as a Resource Root. If you do this, you also get coding assistance in the text editor.
WebStorm also has External Libraries, what is the point of these?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance? If you already have Project Directories, what is the point of External Libraries?
I've seen this answer and I kind of get the different modes of referencing/inclusion, but I don't get the big picture. What is the core reason for the External Libraries vs the Project Directories?
Is this for when you have a link to a CDN in your script tag and you want to get coding assistance?
Yes, this is the most common case - WebStorm can't use online resources for code assistance, it needs to have the corresponding javascript files available locally. So, if you don't like to pollute your project folder with all these library files, you can have them stored outside of your project and set up as libraries.
What is the core reason for the External Libraries vs the Project Directories?
See above - external libraries allow storing library files in an arbitrary location outside your project folder and still get code completion/highlighting/etc. Please also see the answer you refer to:
Note also that libraries are 'light-weight' as compared to .js files in your project - they are treated read-only, have the inspections turned off. Plus, you can assign documentation URLs to them, enabling external documentation for library code. So, even if you have your library files in your project, it might make sense to add them as libraries
see also this blog post

difference between d3.v3.js and entire D3 repository

For d3, or any javascript package in general, what is the difference between the js file which has the entire source code(say, d3.v3.js) and the github repo for it(in the case of d3, it is https://github.com/mbostock/d3).
What does the github repo contain that the entire source code does not?
I read on Scott Murray's tutorials that the D3 repository contains "all of the component source code". Can someone explain what's meant by 'component'?
Let's look at the Whatever library. It does whatever. The repo for it is located at https://github.com/someone/whatever.js (this is not a real repo).
The repo itself usually contains a variety of info, including documentation, style guides, and code organization. Whatever.js is actually made up of three files: lib/whatever.js, lib/whatever-tools.js, and lib/whatever-xml.js. These get concatenated for actual use, but for development of whatever.js itself it's easier to work with separate files.
Having to deal with just commits all on a single file is absolutely horrible. Pull requests would be even worse.
The distributed version, aka whatever.js and whatever.min.js, is a version of the repo code after it's been dealt with however it needs to be. In the case of most libraries the files just get concatenated, but for some libraries fancy things happen. The .min.js version is the normal file, but after being run through a minification tool, these days usually UglifyJS2.
Some libraries will not even have all of the code in the main generated file, usually due to usage reasons. For example, Angular.js doesn't have the ng-route module in angular(.min).js, you need to include angular-route(.min).js too. This is for sanity reasons, because quite a lot of Angular uses don't need or want the routing system, and it's a fairly big addon.
it is the same as with any project in development environment and deployment environment, so in github that's a development environment for d3.js d3.v3.js is the compiled library that you need to use in your product.
Zeke Sonxx's answer is excellent. I'll just add that in the case of Javascript, because the source code can be run directly, there might be less need for a github repo. But even in the simplest cases, you get to add additional files when needed, keep track of problems and plans in the github issue system, etc. Example: The gexf-parser repo only has one main source file, src/parser.js, but there is a collection of files for testing as well, and a few other useful files. Javascript can also be "compiled", but it's not compilation in the sense of some languages (C, Java, Clojure, etc.). The application distributed will often be built from many different source files in the repo.

One JavaScript code file for multiple locations

We are developing multiple Java EE applications (8 for the moment) that are all based on the same sort of code. However, all the apps are clearly separated as different projects in Eclipse, they all have their own folder on Windows Explorer, and they all have their own repo on the Git server.
The idea was to put the redundant code somewhere (another project named "core"), and use it on every apps automatically without having to recode the same thing 8 times.
For the Java part, we did a "link source" in each project, which create sort of a symlink inside Eclipse to the "core" project, and use the specified "core" package in Java source with no problem.
But it doesn't work so well for the JavaScript/CSS part. I have absolutely no clue about how to code my redundant JS/CSS onto the "core" project, and use it elsewhere without having to manually copy it each and every time I modify it.
I think you should look into git for a solution to your problem. After all you still want the js file to be included in every project, but be maintained in a seperate project (as far as I understand it). There ought to be some sort of submodules and/or commit-handles or whatever to solve this using git.
This is what the User Library functionality in the JavaScript Include Path properties of your project is for.

Categories