Picomachine VS Code Extension

Overview

The Picomachine VS Code Extension brings real-time error checking and an interactive state machine viewer directly into your editor. It validates your StateConfig objects and provides a dynamic graphical visualization that helps you design and debug your state machines with ease.

Click the button in the editor title to open the viewer in split screen mode, as illustrated above.

Linter

When editing a file containing a Picomachine configuration, the extension continuously validates your code. Errors are highlighted directly in the editor with swiggles, and detailed messages appear on hover.

This immediate feedback helps you catch mistakes early, streamlining your development process.

Viewer

In addition to inline error checking, the extension offers an interactive viewer that graphically renders your state machine. The viewer displays:

• States as nodes with their labels and types.
• Transitions as edges connecting states.
• Hierarchy via nested and compound nodes.

As you modify your configuration, the visualization updates in real time.

Moreover, hovering over a transition displays a popup with further details:

These features allow you to quickly understand your state machine's structure and the details of its transitions.

TypeScript Integration

Picomachine is designed with TypeScript in mind. For optimal results, declare your state machine configuration using the as const satisfies StateConfig syntax. This preserves literal types, allowing the extension to accurately extract the available event and state names.

const config = {
  name: "root",
  type: "nested",
  initial: "A",
  states: {
    A: { 
      type: "atom", 
      events: { FINISH: { target: "DONE" } } 
    },
    DONE: { type: "done" }
  }
} as const satisfies StateConfig;

For more details, please visit our TypeScript documentation.

Further Resources

• Full Documentation:
  Visit the Picomachine Documentation Website for detailed guides and API reference.
• Concepts:
  Learn about finite state machines and statecharts.

Troubleshooting

If you encounter any issues with the extension, please file an issue on our GitLab issues page.