This content originally appeared on Blog and was authored by Blog
"What was that method name again?"
"Is the 2nd parameter supposed to be a number or a boolean?"
Even seasoned GSAP users need reminders with such a rich API. The GSAP cheatsheet is a big help, but auto-completion and code hinting right in your editor can really boost your productivity. Here's how:
This is all made possible by TypeScript declaration files which describe the GSAP methods and properties that are available and the data types they expect. We recommend that you use Visual Studio Code (VS Code) or WebStorm as they were the easiest editors to get it working in of the editors that we tried.
If you're using modules...
It's super simple to get auto-completion and hinting working in a modules environment:
- Install GSAP (via npm, yarn, whatever). For more information about how to do that, check out the module installation video.
- Import GSAP into your file(s). For more information about how to do that, see the GSAP Install Helper.
That's it! In editors that support TypeScript declarations auto-completion and hinting should work automatically.
If you're using plain JS files...
Enabling auto-completion and hinting with regular JS files (in editors that support it) takes a few more steps:
- Make sure you're logged into GreenSock.com.
- Download the GSAP ZIP file from the GreenSock homepage or your account dashboard.
- Open up the ZIP file.
- Open up the "npm-install-this" directory.
- Open up the .tgz file inside of that directory.
- Copy the /types directory.
- Paste the /types directory into your project's root directory.
- Create an empty jsconfig.json file in your project's root directory. This will cause your editor to look for TypeScript declaration files.
- Sometimes it's necessary to restart your editor before it starts working.
That's it! In editors that support TypeScript declarations auto-completion and hinting should work at this point.
Some editors may require that you add support for TypeScript through third party packages. For example there's a TypeScript package for Sublime and one for Atom. You may need to install an additional package like these to get auto-completion and hinting working with GSAP in your editor. That's why we recommend Visual Studio Code (VS Code) or WebStorm.
Before GSAP 3, GSAP didn’t have official Typescript declaration files so people commonly used ones from DefinitelyTyped also known as @types. Now that GSAP 3 does have official Typescript declaration files, you should NOT use the @types declarations. They are old and will not work with GSAP 3.
If you find errors in the Typescript declaration files, find that some method is missing, or doesn’t have a good description, please let us know! You can create a post in the GreenSock forums or you can create an issue on GitHub.
As always, if you have questions feel free to post in our forums.
This content originally appeared on Blog and was authored by Blog
Blog | Sciencx (2020-08-05T13:54:00+00:00) How to get GSAP Auto-completion and Hinting. Retrieved from https://www.scien.cx/2020/08/05/how-to-get-gsap-auto-completion-and-hinting/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.