Closed NicolasThierion closed 2 years ago
Any suggestions for how to solve that?
I recently needed to debug content within the config.ts since I'm working on creating my own code to generate the sidebar. For anyone else wanting to know how to get things working
First install typescript and ts-node
yarn add -D typescript
yarn add -D ts-node
Next create a file called debug_config.js next to the config.ts file
// debug_config.js - Required for ts debugging
// https://github.com/vuepress/vuepress-next/issues/457
delete require.extensions['.ts'];
require('ts-node/register');
const vuepressConfig = require('./config.ts');
module.exports = vuepressConfig;
Within package.json add a scripts entry for debugging Change "content" to the directory containing the markdown / .vuepress directory
"scripts": {
"debug": "ts-node ./node_modules/vuepress/bin/vuepress.js --config content/.vuepress/debug_config.js dev content",
}
Under VSCode in the launch.json file create a launch config to startup vuepress using the debug entry
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch VuePress",
"request": "launch",
"runtimeArgs": ["debug"],
"runtimeExecutable": "yarn",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node",
"cwd": "${workspaceFolder}/vuepress"
},
]
}
Last setup a tsconfig.json file This one was just taken from - https://github.com/TypeStrong/ts-node#configuration but seems to avoid issues with errors
{
// This is an alias to @tsconfig/node12: https://github.com/tsconfig/bases
"extends": "ts-node/node12/tsconfig.json",
// Most ts-node options can be specified here using their programmatic names.
"ts-node": {
// It is faster to skip typechecking.
// Remove if you want ts-node to do typechecking.
"transpileOnly": true,
"files": true,
"compilerOptions": {
// compilerOptions specified here will override those declared below,
// but *only* in ts-node. Useful if you want ts-node and tsc to use
// different options with a single tsconfig.json.
}
},
"compilerOptions": {
// typescript options here
}
}
Bug report
I cannot get sourcemaps to debug my
config.ts
.Description
With vuepress 1.x, I used to work around ine incompatiblity with typescipt using the following on top of my
config.js
This is not required anymore because vuepress-next comes with the new Vue CLI, that leverages
esbuilder
to compile typescript on the fly. However, the options foresbuilder
are hard-coded in vuepress-cli, and does not enable the sourcemaps.Steps to reproduce
2.0.0-beta.26
)config.ts
filefunction debugMe() { debugger; console.log('hello from TS'); }
debugMe();
Expected behavior
VSCode should stop on the
debugMe
function. Instead, it stops on the transpiledconfig.js
that makes it much more difficult to debug.As a workaround for now, I cancel the work done by vuepress-cli, unregister
esbuilder
, and usets-node
which works fine with sourcemaps:Screenshots
Environment info
vuepress info
: