米兰舍瓦 發表於 2024-7-1 11:11:00

VS Code 调试 TypeScript 基本流程

<p>最近接触到的几个开源库源码都是用 TypeScript 写的（看来 ts 是大势所趋，不学不行啊）。虽然说不懂 ts 也能正常调 API，但是碰到有意思的功能还是想跟进去看一看、改一改。</p>
<p>在学习了基本的 ts 语法后有了调试的需求。如果用 tsc 编译出 js，再去调试 js 还是太麻烦。如果能在 VS Code 中直接调试 ts 就完美了。在查阅一些资料后，我总结了一个基本流程，方便以后查阅，不足之处也请大家指正。</p>
<p>&nbsp;</p>
<h3>配置 TypeScript 编译选项</h3>
<p>新建 tsc 的配置文件 tsconfig.json</p>
<p>&nbsp;</p>
<pre class="set-code-show highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="0" data-dark-theme="true">&nbsp;</pre>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"compilerOptions"</span>: {</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"target"</span>: <span class="hljs-string">"es2015"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"module"</span>: <span class="hljs-string">"commonjs"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"outDir"</span>: <span class="hljs-string">"out"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"sourceMap"</span>: <span class="hljs-literal">true</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">},</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"include"</span>: [</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"src/**/*"</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">]</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
</ol>
<pre class="set-code-show highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="0" data-dark-theme="true">&nbsp;</pre>
<p><strong>&nbsp;tsconfig.json</strong></p>
<p>&nbsp;</p>
<p>对用到的几个属性加以说明</p>
<ul>
<li>target : 编译出 JavaScript 代码的 ECMAScript 版本</li>
<li>module : 编译出 JavaScript 文件的模块格式</li>
<li>outDir : 编译出&nbsp;JavaScript 文件的存放位置；</li>
<li>sourceMap : 是否生成 SourceMap 文件；（不生成 SourceMap 不会进端点）</li>
<li>
<p>include : 指定要编译的文件；</p>
</li>
</ul>
<p>以上属性都有多种可取值，详情可以参考阮一峰老师的文章&nbsp;tsconfig.json</p>
<p>&nbsp;</p>
<h3>VS Code 集成 TypeScript 编译配置</h3>
<p>快捷键 Ctrl+Shift+B，创建 tasks.json，用于关联 tsc 编译工具到 VS Code。</p>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111103515-1568665814.gif" alt=""></p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111103458-1665501979.png" alt=""></p>
<p><strong>Ctrl+Shift+B 创建 tasks.json 弹出的两个选项</strong></p>
<p>&nbsp;</p>
<p>第一个选项是每次手动编译后生成 js；第二个选项是每次修改、保存后都重新编译 js。这里我们点击第一个选项后面的配置图标，生成 tasks.json 文件。</p>
<p>&nbsp;</p>
<pre class="set-code-show highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="1" data-dark-theme="true">&nbsp;</pre>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"version"</span>: <span class="hljs-string">"2.0.0"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"tasks"</span>: [</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"type"</span>: <span class="hljs-string">"typescript"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"tsconfig"</span>: <span class="hljs-string">"tsconfig.json"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"problemMatcher"</span>: [</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"$tsc"</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">],</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"group"</span>: <span class="hljs-string">"build"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"label"</span>: <span class="hljs-string">"tsc: build - tsconfig.json"</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">]</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
</ol>
<pre class="set-code-show highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="1" data-dark-theme="true">&nbsp;</pre>
<p><strong>tasks.json</strong></p>
<p>&nbsp;</p>
<h3>VS Code 调试配置</h3>
<p>&nbsp;切换到调试面板，点击 "create a launch.json file" 创建默认的 launch.json 文件，用于配置调试选项。</p>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111103525-1556381841.gif" alt=""></p>
<p>&nbsp;</p>
<p>生成的 launch.json 中，修改默认的 program 属性，并新增 preLaunchTask 属性，得到如下内容。</p>
<p>&nbsp;</p>
<pre class="set-code-hide highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="2" data-dark-theme="true">&nbsp;</pre>
<ol class="hljs-ln">
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// Use IntelliSense to learn about possible attributes.</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// Hover to view descriptions of existing attributes.</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-comment">// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"version"</span>: <span class="hljs-string">"0.2.0"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"configurations"</span>: [</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">{</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"type"</span>: <span class="hljs-string">"node"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"request"</span>: <span class="hljs-string">"launch"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"name"</span>: <span class="hljs-string">"Launch Program"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"skipFiles"</span>: [</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"&lt;node_internals&gt;/**"</span></div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">],</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"program"</span>: <span class="hljs-string">"${workspaceFolder}/src/index.ts"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"preLaunchTask"</span>: <span class="hljs-string">"tsc: build - tsconfig.json"</span>,</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line"><span class="hljs-string">"outFiles"</span>: [<span class="hljs-string">"${workspaceFolder}/out/**/*.js"</span>]</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">]</div>
</div>
</li>
<li>
<div class="hljs-ln-code">
<div class="hljs-ln-line">}</div>
</div>
</li>
</ol>
<pre class="set-code-hide highlighter-prismjs language-none prismjs-lines-highlighted" tabindex="0" data-index="2" data-dark-theme="true">&nbsp;</pre>
<p><strong>launch.json&nbsp;</strong></p>
<p>&nbsp;</p>
<p>&nbsp;以上两个属性的说明</p>
<ul>
<li>program : 调试的入口文件</li>
<li>preLaunchTask : 调试前要执行的任务。内容要和 tasks.json 中的 label 保持一致。如下图所示：</li>
</ul>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111103521-1528197293.png" alt=""></p>
<p><strong>preLaunchTask 要和 tasks.json 中的 label 一致</strong></p>
<p>&nbsp;</p>
<p>接下来就可以开始 TypeScript 的调试了</p>
<p>&nbsp;</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111103483-1835598116.gif" alt=""></p>
<p><strong>VS Code 中调试 TypeScript&nbsp;</strong></p>
<p>&nbsp;</p>
<hr>
<p>本文参考了</p>
<p>Integrate with External Tools via Tasks</p>
<p>tsconfig.json</p>
<p>浅谈在 vscode 中调试 typescript 的小坑</p>
<p>vscode 调试学习</p>
<p>首先需要在.vscode&nbsp;文件夹下面创建 launch.json 配置文件。然后输入如下配置：</p>
<pre class="set-code-hide prettyprint highlighter-prismjs language-json prismjs-lines-highlighted" tabindex="0" data-index="0" data-dark-theme="true"><code>{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173/metro-metaverse/",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
    }
]
}</code></pre>
<p>在&nbsp;<code>vite.config.js</code>&nbsp;加入如下配置：</p>
<pre class="set-code-show prettyprint highlighter-prismjs language-javascript prismjs-lines-highlighted" tabindex="0" data-index="1" data-dark-theme="true"><code>defineConfig({
    build: {
      sourcemap: true
    }
})</code></pre>
<p>然后需要启动你的项目：<code>npm run ***</code></p>
<p>点击运行监听：<br><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111137039-1024036526.png" alt="在这里插入图片描述"><br>会启动一个 chrome 测试浏览器，这个浏览器不要关闭，监听仅在这个浏览器上有效。</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111136918-922934002.png" alt="在这里插入图片描述"><br><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111137051-692212470.png" alt="在这里插入图片描述"><br>现在可以愉快的进行断点调试了！</p>
<hr>
<p><strong>补充一下：</strong></p>
<p>如果想将项目启动也配置进来的话可以加一个 task。</p>
<p>使用&nbsp;<code>ctrl + shift + p</code>&nbsp;或者&nbsp;<code>cmd + shift + p</code>，输入&nbsp;<code>task</code>。</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111137010-786684153.png" alt="在这里插入图片描述"><br>选择项目启动命令：</p>
<p><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111137123-1620511561.png" alt="在这里插入图片描述"><br>在生成的<code>./.vscode/tasks.json</code>&nbsp;文件中添加如下配置：</p>
<pre class="set-code-show prettyprint highlighter-prismjs language-json prismjs-lines-highlighted" tabindex="0" data-index="2" data-dark-theme="true"><code>{
        "version": "2.0.0",
        "tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "vite --host",
      "isBackground": true
    }
]
}</code></pre>
<p>同时在<code>./.vscode/launch.json</code>&nbsp;文件中增加如下配置：</p>
<pre class="set-code-hide prettyprint highlighter-prismjs language-json prismjs-lines-highlighted" tabindex="0" data-index="3" data-dark-theme="true"><code>{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173/metro-metaverse/",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
      "preLaunchTask": "npm: dev" // task的label
    }
]
}</code></pre>
<p>这样就配置完成了。</p>
<p><mark>需要注意的是：在启动的时候会弹出一个提示框，一定要选择 “仍要调试”</mark><br><img src="https://img2024.cnblogs.com/blog/572188/202407/572188-20240701111137003-191075311.png" alt="在这里插入图片描述"><br>现在你只需要等待项目启动完毕，就可以进行断点调试了。</p>
<p>&nbsp;</p>

</div>
<div id="MySignature" role="contentinfo">
    摘抄自网络，便于检索查找。<br><br>
来源：https://www.cnblogs.com/Chary/p/18277673
頁: [1]
查看完整版本: VS Code 调试 TypeScript 基本流程