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信息

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

相关推荐
叫我阿柒啊8 小时前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
烛阴10 小时前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
拜无忧14 小时前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
冰冷的bin15 小时前
【React Native】点赞特效动画组件FlowLikeView
react native·react.js·typescript
Bug生产工厂20 小时前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
烛阴2 天前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓2 天前
Typescript入门-类型断言讲解
前端·javascript·typescript
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
流影ng2 天前
【TypeScript】闭包
typescript