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)
Related
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
I'm sure thousands of other JS devs are feeling the pain I'm feeling. I love jumping to function definitions in .d.ts files while browsing code in VS Code.
However, sometimes instead of going to the .d.ts file, I'd like to jump to the raw JS code that is being hidden by the .d.ts file that sits in front of it.
Does anyone know how to optionally force a jump to the JS source code (if it exists) and not a TypeScript definition file.
Thanks!
EDIT: I am aware that this has been asked for to the VS Code team and will not be officially supported by them. I'm looking for some sort of hacky workaround (extension or otherwise) to get this to work.
Recently announced, VS Code Insiders (v1.67.2) supports a Go to Source Definition context menu option from right-clicking the symbol. This was committed 19-APR-2022.
This feature requires TypeScript 4.7:
Go To Source Definition
TypeScript 4.7 contains support for a new experimental editor command called Go To Source Definition. It’s similar to Go To Definition, but it never returns results inside declaration files. Instead, it tries to find corresponding implementation files (like .js or .ts files), and find definitions there — even if those files are normally shadowed by .d.ts files.
This comes in handy most often when you need to peek at the implementation of a function you’re importing from a library instead of its type declaration in a .d.ts file.
You can try this new command in the latest versions of Visual Studio Code. Note, though, that this functionality is still in preview, and there are some known limitations. In some cases TypeScript uses heuristics to guess which .js file corresponds to the given result of a definition, so these results might be inaccurate. Visual Studio Code also doesn’t yet indicate whether a result was a guess, but it’s something we’re collaborating on.
You can leave feedback about the feature, read about known limitations, or learn more at our dedicated feedback issue.
Delete the .d.ts file (temporarily)
This is obviously a super-crappy workaround, but it should work. By deleting the file you don't want to see, VSC will only have one place to take you: the file you do want to see.
When VSC takes you to the .d.ts file, right-click on the file tab and click "Copy Relative Path"
Open the VSC terminal and enter rm [PATH] (or del [PATH] for Windows)
leave the (now-deleted) .d.ts file tab open
Go back to the original file and try navigation again
if it doesn't work, you may need to reboot the TS server
Once you've seen the code you want to see, go back to the .d.ts file and save it
this will put the file back exactly as it was, which will probably be invisible to your source-control
if not, you may need to use your SCM to undo the deletion operation
Again, an awful hack. And I share your frustration that the VSC maintainers & community have no interest in this feature. Just bear in mind that their goal is to make their propriety technology displace all technology they don't own, so you will occasionally discover that they will refuse to help you as a web developer because they want you to be a Microsoft developer.
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!
General tips are welcome. My specific situation is a React app, compiled with WebPack, with lots of files. If I want to move a file or folder within the project, is there a good way to do this such that references, such as import & require statements, update automatically?
Bonus points for solutions using Atom or VSCode.
NPM scripts will also work. Thanks.
I used a few text editors with plugins and IDE's during the years, this includes Atom, VSCode, SublimeText, etc. but keep coming back to Jetbrains products and one of the reason is the refactoring capabilities.
Jetbrains dedicated JavaScript IDE, Webstorm does it very well without any additional plugins or hacks.
All you need to do is drag and drop your file or folder to another location and all the relevant imports will be updated (make sure search for references is ticked in the confirmation pop up). This applies to both es6 import and/or common js require().
This is not all, you can rename variables, class, function names, whatever you like, just make sure you doing it by selecting the text, then right click then refactor and rename (you'll see in this menu you can do much more if you want)
Whenever you about to confirm your changes you can select the option in the pop-up that is "search in comments and strings" if you want which is really cool as you can keep your documentation up to date as well.
This official documentation goes more in deep, but generally if you do the above, it will be enough.
I guess if you don't feel confident enough, start up the server, with (create-react-app it will reload every time you make a change as hot reloading is built in) and if something goes wrong with your refactoring you will know it straight away.
Just fyi I am not associated with Jetbrains, I just like the product. Webstorm is not free (however it's very cheap) - go for the 30 day trial version if you don't wish to pay.
UPDATE:
Also note, this feature support both relative and absolute paths as well as any file extensions, so including .*scss etc.
Found a couple of plugins for VSCode. Personally, I haven't used them but they might work for you
https://github.com/cmstead/js-refactor
https://github.com/jakob101/RelativePathRefactor
VS Code has an option to update imports on file move or rename. This feature was enabled with the May 2018 Release. Whenever a file is moved, VS code detects and asks for confirmation to update the import references also.
Visual Studio Code - May 2018
You can control the prompting behavior with the
javascript.updateImportsOnFileMove.enabled and
typescript.updateImportsOnFileMove.enabled settings.
This usually updates the import statements, but it might not update
any strings variables/comments references to the moved files.
NOTE: It worked only for js/ts files. For other types, like scss file, it does not update the #imports.
Most editors/plugins do not support full fledged tracking and refactoring of move/rename actions for all file types, as it becomes more complex and ambiguous when relative paths, absolute paths are used in the same project.
To summarize, for moving a file or folder, there are two instances the references needs to be updated.
In the moved file itself, if any import is using a relative path
Other files which import the moved module/files
I do not think the first is supported in VS Code (and probably in other editors too). The second one is supported in VS Code, but only for js/ts file imports.
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.