Unable to get autocompletion working

[lewiji]

First off, this is amazing, thanks to all who've contributed so far.

I'd love to use this but for now I can't get any kind of code completion working. Is this feature exclusive to TS projects? I have tried the Godot internal editor, and VS code, but it doesn't seem to be able to pick up the types in either, and offers no code completion at all, so I have to keep referencing the docs, which is a bit of a pain. Any ideas?

I'm on Linux (Fedora 32) running the latest pre-compiled release (alpha13).

[ajboni]

Same here, typing godot. won't bring anything neither in vscode nor in the internal editor. File extension is .jsx

[lewiji]

Yes, same, jsx. Other js frameworks have @types packages you can install so I wonder if something similar can be done. However I wanted to check I wasn't missing something obvious here before investigating that. For now I am using compiled typescript and it's working great, but I would like to use pure javascript as I'm not completely familiar with TS! I have to use a lot of weird casting and @ts-ignore comments eg when multiplying a vector by a number which is a pain. Also I'm using vs code, it'd be nice if pressing the script button in the editor brought up the original tsx instead of the compiled jsx, but not sure how that'd be achieved.

…

On Mon, 26 Oct 2020, 18:27 ajboni, ***@***.***> wrote: Same here, typing godot. won't bring anything neither in vscode nor in the internal editor. File extension is .jsx — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#73 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABY7JDJ65ESLGQZ2H3JW5LSMW5Q7ANCNFSM4SYQ3CBQ> .

[ajboni]

Yes, same, jsx. Other js frameworks have @types packages you can install so I wonder if something similar can be done. However I wanted to check I wasn't missing something obvious here before investigating that. For now I am using compiled typescript and it's working great, but I would like to use pure javascript as I'm not completely familiar with TS!

got it! thanks for the @types hint!

You need this kind of structure:

~/gamedev/javascript-test  exa -lha -T -L=10       
                                                                                                                              
.rw-rw-r--   199 baj  26 Oct 15:19  ├── Node2D.tscn
.rw-rw-r--   501 baj  26 Oct 15:58  ├── project.godot
drwxrwxr-x     - baj  26 Oct 16:00  └── src
.rw-rw-r--     5 baj  26 Oct 16:00     ├── .prettierrc
.rw-rw-r--   230 baj  26 Oct 16:00     ├── package.json
.rw-rw-r--   265 baj  26 Oct 15:27     ├── test.jsx
drwxrwxr-x     - baj  26 Oct 16:00     └── types
.rw-rw-r--  2,5M baj  26 Oct 16:00        └── godot.d.ts
                                              

notice godot.d.ts is generated on godot editor: Project > Tools > ECMAScript > Generate TypeScipt Declaration File

Then you need to link that file in your package.json

 ~/gamedev/javascript-test  cat src/package.json                                                                                                                          260ms  15:09:27
{
  "name": "src",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "types": "types/godot.d.ts"
}

It would be nice to have this info in the readme as well.

[lewiji]

Wow! That was easier than expected, I had no idea you could import TS types into Javascript that way, but yes it works perfectly as long as you structure it correctly.

At first I had my godot.d.ts in a different folder to my .jsx files from the root, with my earlier .tsx scripts, and it didn't work in jsx, even after updating the package.json with the types property:

❌ No completion in jsx, completion in tsx:

|-- jsx/
    |-- Test.jsx
|-- tsx/
    |-- Player.tsx
    |-- godot.d.ts
| package.json
| tsconfig.json

❌ package.json

{
  "scripts": {
    "watch": "tsc -w -p .",
    "compile": "tsc -p ."
  },
  "devDependencies": {
    "source-map-loader": "^1.1.1",
    "ts-loader": "^8.0.7",
    "typescript": "^3.9.7"
  },
  "types": "./tsx/godot.d.ts"
}

But once I put godot.d.ts in my project root, that worked.

✔️ 'godot' namespace completion in both jsx and tsx :

|-- jsx/
    |-- Test.jsx
|-- tsx/
    |-- Player.tsx
| godot.d.ts
| package.json
| tsconfig.json

✔️package.json

{
  "scripts": {
    "watch": "tsc -w -p .",
    "compile": "tsc -p ."
  },
  "devDependencies": {
    "source-map-loader": "^1.1.1",
    "ts-loader": "^8.0.7",
    "typescript": "^3.9.7"
  },
  "types": "./godot.d.ts"
}

Thanks very much. I will leave this open and do a little research into what structure exactly works and doesn't, and then submit a pull request to update the README with this info as I agree it would be very handy.

[lewiji]

Created a pull request; as well as updating the readme, I added the "types": "godot.d.ts" property to the default package.json file that gets added when generating a TypeScript project from the editor.

Another tip: VS Code has a setting:

"javascript.implicitProjectConfig.experimentalDecorators": true

To allow the generated decorators to be used in JSX (I think you could also use a jsconfig.json file). You can use tsc to compile the decorators.ts file into a decorators.js file to be imported into your JSX code.