0-1开发自己的obsidian plugin DAY 3

磨刀不误砍柴工

随着模块变多肉眼看不出问题了 于是先来解决一下debug配置的问题

之前只用过python的debug不知道typescript怎么搞,原来需要另外设置node.js的模式

主要参考的是:

https://www.youtube.com/watch?v=f3i9b3uK00U

预感踩坑开始,所以先新建了一个目录来实验一下,

新建一个src/main.ts放在上述目录下

然后cd到该目录运行:

npm install --save-dev ts-node tsconfig-paths

  • npm是 Node.js 的包管理器

  • ts-node是一个能让你(无需编译)直接运行.ts的执行器,

  • tsconfig-paths帮助Node.js理解typescript项目中的(类似src/ * 这样)的路径别名

这段代码运行以后可以看到*/node_modules/里生成了这两个对应的文件夹。

另外在项目目录下新建一个tsconfig.json,直接粘贴下面的内容。

bash 复制代码
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true // 开启 source map
}
}

这一步的目的是让断点和调试信息通过 sourceMap 文件映射回 TypeScript 文件

也就是说 ts-node 不显式生成 .js 文件,它会在后台动态编译你的 TypeScript 文件,是在开发阶段的一种调试。

最后就是回到vs code界面点那个侧边栏那个debug icon -> create a launch.json file -> node.js,打开配置launch.json, 粘贴下面内容:

bash 复制代码
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/main.ts",
            "runtimeArgs": ["-r", "ts-node/register","-r","tsconfig-paths/register"],
            "console":"integratedTerminal",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

这里的:

  • -r 是require的意思,表示在启动node.js前先加载(require)一个模块
  • 后面的参数就是前面生成的两个文件夹
  • console的配置使得能在vs code的终端看到的debug信息

最最后在代码里加断点,测试就可以看到成功了。

相关推荐
FanetheDivine2 分钟前
过于ts的ts不是好ts
typescript
MiyueFE20 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio1 天前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈1 天前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript