Jump to content
Search Community

GSAP and auto complete issues in Visual Studio Code

HomTom test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

  • 3 years later...
  • 1 year later...

Hey, I just encountered the same problem in vscode that i could not get intellisense to work and used the First solution as described above with

npm install ./gsap-bonus.tgz

Autocompletion in .js - files works now.

However, the auto completion/intellisense in vscode does not work for .html - files . Does anyone know how to get intellisense in vscode to work with gsap in .html-files

 

Thanks in advance!

 

vscode-intellisense-gsap.thumb.png.8e0e25cd7736f48fb8faf15b98d21e38.png

Link to comment
Share on other sites

Hi @pne99 and welcome to the GSAP Forums!

 

Unfortunately that can't be done as far as I know, VSCode  intellisense works with the type definitions that are added when the regular package is installed from the NPM repo. The CDN links don't include those so intellisense is not going to work.

 

If there is a way to do that you must grab the type definitions from our repo and perhaps look for a way to implement those via the project settings:

https://github.com/greensock/GSAP/tree/master/types

 

Hopefully this helps

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...