HomTom Posted April 16, 2020 Share Posted April 16, 2020 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 More sharing options...
ZachSaucier Posted April 16, 2020 Share Posted April 16, 2020 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. 1 Link to comment Share on other sites More sharing options...
HomTom Posted April 16, 2020 Author Share Posted April 16, 2020 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 More sharing options...
ZachSaucier Posted April 16, 2020 Share Posted April 16, 2020 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... 1 Link to comment Share on other sites More sharing options...
HomTom Posted April 16, 2020 Author Share Posted April 16, 2020 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. 3 Link to comment Share on other sites More sharing options...
d.j.buchan Posted October 7, 2023 Share Posted October 7, 2023 Both solutions also worked for me - just make sure you've got Node JS installed if using the terminal based route and NPM install. Link to comment Share on other sites More sharing options...
pne99 Posted October 11 Share Posted October 11 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! Link to comment Share on other sites More sharing options...
Rodrigo Posted October 11 Share Posted October 11 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now