VSCode使用ts-node 调试TypeScript代码
<h1> </h1><h2 id="TS-NODE">TS-NODE</h2>
<p>可以看出这些不足都来自于一个根本原因，<strong>运行之前需要编译</strong>。后来我就发现了一个很强大的工具ts-node，来看下ts-node的简介:</p>
<blockquote>
<p>TypeScript execution environment and REPL for node.</p>
</blockquote>
<p>简单的说就是它提供了TypeScript的运行环境，让我们免去了麻烦的编译这一步骤。最简单的例子，在注册ts-node之后，我们就可以直接加载并运行ts文件</p>
<pre>require('ts-node').register();
// 这样就能直接加载并运行 ./ts-code.ts...
require('./ts-code');</pre>
<h2 id="TS-Config">TS Config</h2>
<p>为了断点调试，我们需要在tsconfig.json中开启<em>sourceMap</em></p>
<pre>{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
],
}</pre>
<h2 id="VSC-Launch.json-%E9%85%8D%E7%BD%AE">VSC Launch.json 配置</h2>
<p>为ts-node注册一个vsc的debug任务，修改项目的launch.json文件，添加一个新的启动方式</p>
<pre>{
"name": "Current TS File",
"type": "node",
"request": "launch",
"args": [
"${workspaceRoot}/src/index.ts" // 入口文件
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}</pre>
<p>通过这些简单的配置，我们在vsc的debug界面中选择<em>Debug by ts-node</em>的任务，就可以开始愉快的调试了，修改代码之后直接重启服务即可，这里简单的介绍一些vsc debug相关的快捷键，参考</p>
<ol><li>F5 – 开始调试、继续执行</li>
<li>cmd(ctrl) + shift + F5 – 重启</li>
<li>shift + F5 – 结束调试</li>
<li>F9 – 添加断点</li>
<li>F10 – 单步跳过</li>
<li>F11 – 单步调试</li>
<li>shift + f11 – 单步跳出</li>
</ol><h2 id="%E8%B0%83%E8%AF%95%E5%BD%93%E5%89%8D%E6%89%93%E5%BC%80ts%E6%96%87%E4%BB%B6">调试当前打开ts文件</h2>
<pre>{
"name": "Current TS File",
"type": "node",
"request": "launch",
"args": [
"${relativeFile}"
],
"runtimeArgs": [
"--nolazy",
"-r",
"ts-node/register"
],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}</pre>
<h2 id="%E8%B0%83%E8%AF%95-mocha-%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81">调试 mocha 测试代码</h2>
<p>在launch.json中添加</p>
<pre>{
"name": "Debug Current TS Tests File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/_mocha",
"args": [
"-r",
"ts-node/register",
"${relativeFile}", // 调试当前文件
"--colors",
"-t 100000" // 设置超时时间，因为调试时执行时间较长容易触发超时
],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}</pre>
<p>然后打开一个包含mocha单元测试的ts文件，添加断点，运行<em>Debug Current TS Tests File</em>即可进行断点调试。 运行项目中的所有单元测试建议在package.json中添加test脚本，比如</p>
<pre>"scripts": {
"test": "mocha -r ts-node/register src/**/*.spec.ts --colors"
}</pre>
<p>然后运行<em>npm test</em>即可</p><br><br>
来源：https://www.cnblogs.com/wjlbk/p/12633316.html
頁:
[1]