I had a working extension in pure JavaScript and I wanted to move to TypeScript.
When I generate a demo extension with:
npx --package yo --package generator-code -- yo code
and select:
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? iewhuwwew
? What's the identifier of your extension? iewhuwwew
? What's the description of your extension?
? Initialize a git repository? No
? Which bundler to use? webpack
? Which package manager to use? npm
hot reload works perfectly: if I make changes to src/extension.ts, then “Debug: Start debugging”, test the extension in the Extension Development Host, then modify src/extension.ts, and “Developer: Reload Window”, it automatically picks up the .ts change.
But I was unable to get it working on my JavaScript project that I am trying to convert. I spent an hour staring at config files trying to make them match the yo code generated template but nothing.
I am able to make it update if I do:
npm run compile
which updates the main in my package.json:
"main": "./dist/extension.js",
but I don’t want to have to run that all the time.
What is is that the generated template does to make things work automatically and which I’m missing on my JavaScript to TypeScript conversion?
Tested on yo 5.0.0, generator-code 1.11.1.
After a lot of staring I found it: I had forgotten to copy/inspect the .vscode folder, which contains “tasks”, notably the file .vscode/tasks.json:
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$ts-webpack-watch",
"isBackground": true,
"presentation": {
"reveal": "never",
"group": "watchers"
},
"group": {
"kind": "build",
"isDefault": true
}
},
{
"type": "npm",
"script": "watch-tests",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never",
"group": "watchers"
},
"group": "build"
},
{
"label": "tasks: watch-tests",
"dependsOn": [
"npm: watch",
"npm: watch-tests"
],
"problemMatcher": []
}
]
}
When I start debugging with that file present, it automatically starts a new process that runs npm watch for me. It shows as a separate subtab under the “Terminal” tab. So that’s how it works.