electron - Konfigurera VSCode för att felsöka verktyg inbäddade i en TypeScript-app
Jag försöker använda VSCode för att debugga TypeScript-filer som finns inom en större app som har beroenden på moduler av den större appen, men jag stöter på fel som:
- SyntaxError: Kan inte använda import-sats utanför en modul; ELLER
- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Okänd filtillägg ".ts"
Jag har skrivit en Electron/Svelte/TypeScript-app där jag har partitionerat kärnbackendkod till sina egna moduler som inte har några beroenden på Electron eller Svelte. Jag har lagt alla dessa moduler i en katalog som jag kallar 'kernel'. Jag har också en uppsättning verktyg som körs fristående från appen och som är beroende av dessa kärnmoduler. Jag har lagt dessa i en katalog som kallas 'tools'. Jag kan enkelt kompilera och köra alla mina verktyg från kommandoraden, men jag har inte lyckats lista ut hur man kör verktygen från VSCode-debuggern.
Min katalogstruktur är i princip denna:
.vscode/
launch.json
build/
node_modules/
public/
src/
backend/
frontend/
tsconfig.json
kernel/
tools/
tool-a.ts
tool-b.ts
electron.ts
package.json
rollup.config.js
tsconfig.json
Jag vill ta in ett av verktygen (t.ex. 'tool-a.ts') i VSCode, sätta brytpunkter och debugga det. Jag har ännu inte hittat ett sätt att göra det på.
Felet jag får beror på vilken konfiguration jag försöker. Men först, här är konfigurationen som jag inte tror att jag borde ändra, eftersom Electron-appen fungerar alldeles utmärkt.
// package.json
{
"name": "ut-spectool",
"version": "0.1.0",
"private": true,
"main": "./build/electron.js",
"scripts": {
"build": "tsc && rollup -c",
"build-client": "run-s build client",
"build-backend": "tsc",
"check": "svelte-check --tsconfig ./tsconfig.json",
"server": "kill $(lsof -ti:5000) 2>/dev/null; rollup -c -w",
"start": "sirv public --no-clear --single",
"client": "tsc && cross-env NODE_ENV=development electron .",
"dist:mac": "tsc && rollup -c && electron-builder build --mac --publish never",
"test": "jest",
"prettier": "prettier --config .prettierrc 'src/**/*.ts' --write"
},
"devDependencies": {
...
},
"dependencies": {
...
},
"build": {
...
}
}
// top-level tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"sourceRoot": "build",
"target": "ESNext",
"module": "commonjs",
"outDir": "build",
"stripInternal": true,
"strict": true,
"pretty": true,
"moduleResolution": "node",
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noEmitOnError": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"isolatedModules": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules/*",
"build/*",
"public/*",
"src/frontend/*"
]
}
Här är en av versionerna av launch.json som jag har försökt med, men "Launch Current Tool" ger mig undantaget, SyntaxError: Cannot use import statement outside a module, och varningen, (node:75650) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension:
{
"configurations": [
{
"name": "Launch Current Tool",
"program": "${file}",
"request": "launch",
"env": { "NODE_ENV": "development" },
"console": "integratedTerminal",
"preLaunchTask": "npm: build-backend",
"outFiles": ["${workspaceFolder}/build/**/*.js"],
"sourceMaps": true,
"resolveSourceMapLocations": [
"${workspaceFolder}/build/**",
"!**/node_modules/**"
],
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"<node_internals>/**"
],
"smartStep": true,
"type": "pwa-node"
},
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
"cwd": "${workspaceFolder}",
"args": [
"--runInBand",
"--watchAll=false"
],
"sourceMaps": true,
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js",
"<node_internals>/**/*.js"
],
"smartStep": true
}
]
}
(Observera att felsökning av jest-tester från VSCode fungerar alldeles utmärkt.)
Att lägga till "type": "module" i package.json bryter Electron, så det är inte ett alternativ. Om jag lägger följande package.json i verktygsmappen...
{
"type": "module"
}
... då försök att felsöka tool-a.ts ger felet, TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Okänd filändelse ".ts" för /Users/joe/repos/ut-spectool/src/tools/tool-a.ts. Att hårdkoda en "build"-egenskap i package.json för bara ett verktyg ger samma fel.
Om jag ändrar värdet på program i launch.json till följande...
"program": "${workspaceFolder}/build/tools/${fileBasenameNoExtension}.js",
... då när jag felsöker via "Starta nuvarande verktyg", kör programmet helt okej i VSCode och visar utdata i VSCode-terminalen, men det ignorerar mina brytpunkter.
Andra experiment jag har gjort med launch.json har inte haft någon betydande effekt. Till exempel, att ändra "type": "pwa-node" till "type": "node" (som används för att felsöka med jest) ändrar ingenting. Jag har också försökt lägga en tsconfig.json i verktygsmappen och sätta kompileringsalternativet "module" till "ESNext" och "ES6".
Hur får jag mina nästlade verktyg att köra i VSCode-debuggern?