怎么用VSCode开发Hono后端框架_VSCode Hono项目创建与边缘函数部署

千墨君_4282

千墨君_4282

2026-05-30

446人浏览

原创

vscode调试hono项目必须用tsx启动,因其依赖jsx/tsx语法、顶层await及esm特性,直接node运行会报cannot use import statement outside a module或unexpected token '

怎么用vscode开发hono后端框架_vscode hono项目创建与边缘函数部署

VSCode 调试 Hono 项目必须用 tsx 启动,不能直接跑 node —— 否则必报 Cannot use import statement outside a module 或 Unexpected token '。

为什么 launch.json 里 runtimeExecutable 必须指向 tsx 而不是 node

Hono 默认启用 JSX/TSX 写法(比如 app.get("/", () => <div></div>))、顶层 await、JSON 模块导入等纯 ESM 特性。Node.js 原生不支持这些语法,node index.ts 会直接崩溃。tsx 是专为现代 TS/ESM 设计的运行时,能无缝处理所有这些特性。

实操建议:

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 本地安装:npm install -D tsx(或 pnpm add -D tsx)
  • runtimeExecutable 设为 "./node_modules/.bin/tsx"(Windows 下路径分隔符用 \ 或保持 / 通常也兼容)
  • 不要加 "--loader", "ts-node/esm" —— 这是旧方案,和 Hono 的原生 ESM 加载链冲突
  • 若用 pnpm,runtimeExecutable 可写绝对路径(如 "./node_modules/.bin/tsx"),避免依赖 npx(调试中不可靠)

为什么 sourceMaps: true 会让断点变灰、无法命中

Hono 是直接运行 TS 源码,不经过 tsc 编译输出 .js 文件。VSCode 调试器若开启 sourceMaps,会尝试从 .js.map 映射回源码 —— 但根本不存在这些文件,于是找不到原始 .ts 行,断点失效。

实操建议:

  • 显式设 "sourceMaps": false(默认值,但写出来更稳)
  • 删掉或注释掉 outFiles 字段(它只在编译输出场景下有用)
  • type 必须是 "pwa-node",不是 "node" —— 新版 VSCode 对 ESM 的完整支持仅在 pwa-node 下可用

修改代码后服务不热重载?这不是 bug,是调试器默认行为

F5 启动调试时,VSCode 不会自动监听文件变化。你改了 index.ts,进程不会重启,新断点也不会生效 —— 这是设计如此,不是配置错误。

两种可靠解法:

  • 终端手动运行:npx tsx watch index.ts,再在 launch.json 中用 attach 模式连接("request": "attach", "port": 9229)
  • 或在 launch.json 的 runtimeArgs 中加 ["--watch"](仅限 tsx v4+),但注意:首次断点可能延迟 1–2 秒
  • 顺手关掉 VSCode 的 debug.javascript.autoAttachFilter(设为 "disabled"),否则它会抢连其他 Node 进程,干扰你的调试

HTTP 请求 404 或连接拒绝?先查 app.listen() 是否真正生效

app.listen(3000) 在调试中容易静默失败:端口被占用、绑定 127.0.0.1 却用 localhost 访问(DNS 解析差异)、或 process.env.PORT 被覆盖导致监听失败。

实操建议:

  • 启动后立刻检查控制台输出,确认有类似 Listening on http://localhost:3000 的日志
  • 用 curl -v http://127.0.0.1:3000 测试,排除 DNS 层问题
  • 在 listen() 后加一句 console.log("✅ Server ready"),确保执行流走到这里
  • 边缘部署前,本地务必验证路由是否响应 —— Hono 的 app.get() 不会自动 fallback,路径错一点就是 404

最易被忽略的一点:Hono 项目调试成功 ≠ 边缘部署就通。Cloudflare Workers 要求导出 default handler,且不能有顶层 console.log 外的副作用;tsx 能跑通的本地代码,可能在 wrangler dev 下报错。本地调试只是第一步,边缘环境的约束得单独验证。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2283

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5990

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5346

10

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1235

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2572

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1889

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1707

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2567

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1798

14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程