40. IDE 集成

本节目标

用 wails init -ide 一次性生成编辑器调试配置
看懂 tasks.json 和 launch.json 每个字段在做什么
给 react-ts 项目补上前端安装与构建步骤，让断点调试真正可用
分清 Go 侧断点和前端断点各自该在哪里打

40-1 生成 IDE 配置文件

上一章的排错基本靠日志和控制台。想更进一步——在 Go 代码上打断点、单步走、看变量——就得让编辑器接管启动过程。

Wails CLI 能直接生成这套配置，建项目时加一个参数：

# 生成 VS Code 配置
wails init -n myapp -t react-ts -ide vscode

# 生成 GoLand 配置
wails init -n myapp -t react-ts -ide goland

目前官方支持这两个编辑器。VS Code 会多出一个 .vscode 目录，里面是 tasks.json 和 launch.json；GoLand 会生成 .idea 下的运行配置。

Tip

项目已经建好了也不用重来。找个空目录用同样的模板和 -ide 参数再生成一次，把配置文件复制过去，改掉里面的项目名即可。

40-2 读懂 tasks.json

tasks.json 定义的是「启动调试前先做什么」。默认模板生成的内容长这样：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "shell",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "command": "go",
      "args": [
        "build",
        "-tags",
        "dev",
        "-gcflags",
        "all=-N -l",
        "-o",
        "build/bin/myproject.exe"
      ]
    }
  ]
}

三个地方值得单独说。

-tags dev 是 Wails 的开发构建标签。带上它，程序会走开发模式的资源加载分支，从磁盘读前端文件而不是从二进制里读 embed 资源。少了这个标签，你改前端得重新编译整个 Go 程序。

-gcflags "all=-N -l" 关掉 Go 编译器的优化和函数内联。不关的话，断点会跳到奇怪的行，变量显示成「optimized out」。调试构建必须加。

-o build/bin/myproject.exe 是产物路径，要和 launch.json 里的 program 完全对应。非 Windows 平台去掉 .exe 后缀。

Note

-tags dev 这个组合是 Wails 特有的，wails dev 内部也是这么调 go build 的。手动在终端跑同样的命令，效果和 IDE 里一致。

40-3 补上前端的安装与构建

默认生成的 tasks.json 只有一个 Go 构建任务，因为它是按 vanilla 模板写的——那个模板的前端是纯静态文件，不需要打包。

react-ts 模板不一样，前端要经过 Vite 构建。直接按默认配置调试，你会看到窗口起来了但界面是旧的，甚至白屏。得把 npm install 和 npm run build 加进去：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm install",
      "type": "npm",
      "script": "install",
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "presentation": {
        "clear": true,
        "panel": "shared",
        "showReuseMessage": false
      },
      "problemMatcher": []
    },
    {
      "label": "npm run build",
      "type": "npm",
      "script": "build",
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      },
      "presentation": {
        "clear": true,
        "panel": "shared",
        "showReuseMessage": false
      },
      "problemMatcher": []
    },
    {
      "label": "build",
      "type": "shell",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "command": "go",
      "args": [
        "build",
        "-tags",
        "dev",
        "-gcflags",
        "all=-N -l",
        "-o",
        "build/bin/myapp.exe"
      ],
      "dependsOn": ["npm install", "npm run build"]
    }
  ]
}

关键在最后那行 dependsOn。它声明了依赖顺序：先装依赖，再打前端，最后编 Go。VS Code 会按这个顺序串起来执行。

Warning

cwd 必须指向 frontend 目录。写成 ${workspaceFolder} 会在项目根目录找 package.json，直接报错。

每次调试都重跑 npm install 有点慢。依赖稳定之后可以把它从 dependsOn 里去掉，只保留 npm run build，需要时手动装。

40-4 读懂 launch.json

launch.json 定义的是「怎么启动被调试的程序」：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Wails: Debug myapp",
      "type": "go",
      "request": "launch",
      "mode": "exec",
      "program": "${workspaceFolder}/build/bin/myapp.exe",
      "preLaunchTask": "build",
      "cwd": "${workspaceFolder}",
      "env": {}
    }
  ]
}

mode 是 exec 而不是常见的 auto 或 debug。意思是不让 VS Code 自己编译，而是直接执行 program 指定的那个已存在的二进制。因为 Wails 项目的构建参数很特殊，交给 tasks.json 统一管更可靠。

preLaunchTask: "build" 对应 tasks.json 里 label 为 build 的那个任务。名字必须一字不差。

env 可以塞环境变量，调试时想临时切数据库地址、打开某个开关，放这里最方便：

"env": {
  "APP_ENV": "debug",
  "API_BASE": "http://127.0.0.1:8080"
}

配好之后按 F5，VS Code 会先跑完前端构建和 Go 编译，再拉起应用窗口。这时在 app.go 的方法里打断点，前端点一下按钮，执行就会停在断点上，调用栈、局部变量、goroutine 列表全都能看。

Tip

断点打在被 Bind 出去的方法里最直观，比如 func (a *App) Greet(name string) string。前端每次调用 Greet，都会命中一次。

40-5 GoLand 的配置方式

GoLand 用 -ide goland 生成的是运行配置，思路和 VS Code 一样：先构建再执行。

如果想手动配，在「Run/Debug Configurations」里新建一个 Go Build：

Run kind 选 Package 或 Directory，指向项目根目录
Go tool arguments 填 -tags dev -gcflags "all=-N -l"
Working directory 填项目根目录
Output directory 填 build/bin

然后加一个 Before launch 步骤，执行 npm run build，工作目录设成 frontend。

GoLand 的好处是它自带 JavaScript 调试器，配合 wails dev 的 http://localhost:34115，可以在同一个 IDE 里同时调 Go 和前端。

40-6 前端断点怎么打

Go 断点靠调试器，前端断点走另一条路。开发模式下有两个选择。

一是在应用窗口里右键打开 DevTools，Sources 面板里找到源码打断点。Vite 生成了 source map，看到的是原始的 .tsx 文件，不是编译后的产物。

二是用浏览器。wails dev 会在 http://localhost:34115 提供完整应用，Chrome 打开就能用 React DevTools 看组件树、看 hooks 状态：

wails dev -browser

Note

浏览器里打开的是同一个应用实例，前端能正常调用 Go 方法。但涉及原生窗口的运行时 API（比如 WindowMinimise）在浏览器环境里不会有可见效果，那部分还是得回到应用窗口测。

一个常见的组合打法：Go 逻辑在 VS Code 里下断点，前端交互在浏览器里调。两边同时开着，改一处两边都刷新。

40-7 让编辑器认识 wailsjs 目录

Wails 会在 frontend/wailsjs/ 下自动生成绑定代码和运行时的类型定义。默认的 tsconfig.json 有时不包含这个目录，导致 import { Greet } from "../wailsjs/go/main/App" 报找不到模块。

把它加进 include：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "allowJs": true
  },
  "include": ["src/**/*", "wailsjs/**/*.ts", "wailsjs/**/*.d.ts"]
}

改完重启一下 TS 服务（VS Code 里是命令面板输入 TypeScript: Restart TS Server），补全和跳转就正常了。

如果你的前端不是 React 而是 Vue，还会碰到插件在根目录找不到前端工程的问题。Vue 的语言服务默认假设 package.json 在仓库根目录，而 Wails 把前端放在 frontend/ 下。解决办法是在项目根建一个配置文件，把前端根目录指过去。这属于 Vue 生态的细节，主线是 React 就不展开了。

Warning

frontend/wailsjs/ 是生成目录，不要手写内容。每次 wails dev 或 wails build 都会重新生成，改了也会被覆盖。

常见误区

忘了加 -gcflags "all=-N -l"。 断点能打上但位置乱跳，变量看不到值，多半就是编译优化没关。

preLaunchTask 名字和 tasks.json 的 label 对不上。 VS Code 会提示找不到任务，检查两处字符串是否完全一致。

以为 IDE 调试能替代 wails dev。 IDE 这套配置解决的是 Go 侧断点，前端没有热重载，改一行样式要重跑整个流程。日常写界面还是 wails dev 效率高，需要深挖后端逻辑时才切到调试模式。

在 build/bin 里手动放文件。 这个目录每次构建都可能被 -clean 清空，别把有用的东西放进去。

小结

IDE 集成的核心就两个文件：tasks.json 管构建，launch.json 管启动。react-ts 项目一定要自己补上前端构建步骤，否则调试时看到的界面永远是上一次的。Go 断点交给调试器，前端断点交给 DevTools 或浏览器，两条线并行不冲突。下一章看看 Wails 在移动端走到了哪一步。