GSAP and auto complete issues in Visual Studio Code

[HomTom]

Hi,

GSAP is amazing and I love working with it, however I have a strange problem with VSCode's auto complete when I write gsap syntax.

The gsap code works fine, but apparently VSCode is confusing it with something else and the auto complete always changes my gsap code to something else.

Please see the attached video:

https://drive.google.com/file/d/11GPmBRnazTyw2HYM3HVszqY4xYEMskkS/view?usp=sharing

 

How can I fix this issue?

[ZachSaucier]

Hey HomTom. My guess is that VSCode isn't aware of the Typescript declaration files that comes with the full GSAP ZIP download from the GreenSock website.

 

Are you using modules? If so, we recommend installing GSAP from the .tgz file found in the ZIP download. If not, you should be able to include the Typescript declaration files (.d.ts files) in your project and I believe VSCode should automatically find them and use them.  Edit: It takes a little more than that - see post below.

[HomTom]

Hi Zach, 

Many thanks for your response.

For now I'm just using the GSAP CDN in my HTML file like this:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

 

I'm going to try this and will report back:
 

With bonus plugins: Download the bonus ZIP above. Then, in the "npm-install-this" folder you'll find a gsap-bonus.tgz tarball file. Drop that into your project directory, navigate there with your console and then simply:
 

npm install ./gsap-bonus.tgz

 

[ZachSaucier]

1 minute ago, HomTom said:

Are you saying that I need to install gsap as a npm module?

No, it just adds hinting for you automatically if you do  

 

If you're not using modules, you need to add the /types directory from the .tgz file in the GSAP download to your project. Then create an empty jsconfig.json file in your project's directory and VSCode should use the type declarations for GSAP in your other .js files for code hinting.

 

I'm not sure how to get hinting working in <script> sections of .html files...

[HomTom]

1000 thanks.

Both solutions did work for me:

 

1. First solution:

 With bonus plugins: Download the bonus ZIP above. Then, in the "npm-install-this" folder you'll find a gsap-bonus.tgz tarball file. Drop that into your project directory, navigate there with your console and then simply:
 

npm install ./gsap-bonus.tgz

2. Second solution:

You need to add the /types directory from the .tgz file in the GSAP download to your project. Then create an empty jsconfig.json file in your project's directory and VSCode should use the type declarations for GSAP in your other .js files for code hinting.

 

[d.j.buchan]

Both solutions also worked for me - just make sure you've got Node JS installed if using the terminal based route and NPM install.