Skip to content

XState VS Code 扩展

XState VS Code 扩展 通过在 VS Code 中提供自动补全、类型生成、代码检查和可视化编辑器，增强了 XState 的开发体验。

安装​

  1. 使用 shift + cmd/ctrl + p 打开命令面板。
  2. 搜索 Install Extensions 命令并按回车键打开扩展搜索。
  3. 搜索 XState 以找到 XState VS Code 扩展，并使用安装按钮安装扩展。
  4. 确保你已设置 VS Code 插入空格；我们注意到使用制表符缩进时会出现问题。

安装完成后，你可以从命令面板运行 XState: Open Visual Editor 以打开光标位置的任何机器。

如果启用了代码透镜（可以使用 editor.codeLens 设置启用），‘Open Visual Editor’ 也会浮动在每个 createMachine 调用上方。

你也可以从 VS Code 市场 或 Open VSX 市场 下载 VS Code 扩展。

功能​

  • 可视化编辑机器。使用集成的 Stately Visual editor 拖放编辑任何 XState 机器。
  • 自动补全。为转换目标和初始状态提供智能建议。
  • 代码检查。突出显示 XState 机器定义中的错误和潜在问题。
  • 跳转到定义。通过跳转到目标、动作、守卫、演员等定义，轻松导航机器。

TypeScript 类型生成​

你可以使用我们的 VS Code 扩展和 命令行界面 自动生成智能类型。阅读更多关于如何使用类型生成以及我们的推荐最佳实践，请参阅类型生成页面。

xsm 代码片段​

使用 xsm 代码片段快速生成所需的状态机代码。观看 ‘XState + VS Code: xsm 代码片段’ 视频（1分23秒） 以获取演示。

重构​

当鼠标悬停在机器中的命名动作、守卫或演员上时，按下灯泡图标以查看可用的重构选项。

忽略机器​

如果你想忽略机器上的代码检查/自动补全，在机器上方添加 // xstate-ignore-next-line 注释：

// xstate-ignore-next-line
createMachine({});