FLOW BOOK 📓 RUN 🏃 - VSCode ext for 👍 DEVEX

FLOW BOOK 📓 RUN 🏃 - VSCode ext for 👍 DEVEX

Run, learn, test, document, or play with Cadence, FCL and Flow CLI right inside the most loved VS Code. Imagine Jupyter Notebook, JS Fiddle, etc, but for Flow development.

The problem FLOW BOOK 📓 RUN 🏃 - VSCode ext for 👍 DEVEX solves

You love Flow Playground but you want it in VSCode: then checkout FLOW BOOK 📓 RUN 🏃

DEVEX of the Playground is now more versatile for day-to-day developer workflows.

FLOW BOOK 📓 RUN 🏃 has 2 parts

FLOW RUN 🏃

To run and document Cadence (.cdc) scripts and transactions right within editor with just a click.

This is inspired by how the Playground enable testing of scripts and transactions.

In FLOW RUN 🏃 these .cdc scripts and transactions can be triggered with a single-click and these triggers' parameters can be documented right with the respective .cdc files.

FLOW RUN 🏃 leverages flow.json configs well as it is tapping into Flow CLI.

FLOW BOOK 📓

To document and run code interactively for Flow CLI commands, Javascripts using FCL.js, and Cadence scripts.

This is inspired by Jupyter notebooks; now with .flowbook code can be documented step-by-step interactively to onboard more new developers and to collaborate better among teams.

.flowbook are great for documentations and tutorials as .markdown blocks can be included among code blocks.

More enhancement macros for FCL javascripts and Cadence scripts can be implemented for convenience.


Interactive code documentation and learnings

With .flowbook documentation, learning is interactive and instant.

Result: quicker onboarding, better collaboration, lower barrier for participations

1-click running of Candence .cdc scripts and transactions right within code

.cdc files can be run with just a click and documented with //RUN TX or //RUN SX

Result: smoother coding & testing, easier handover to others in the team

Playground experience in VSCode

Flow Playground is great DEVEX for starting. But, as I progressed, I wish it grows with me.

Result: the essence of Playground into VSCode used by over 70% of devs.

Challenges I ran into

learning about VSCode extensions development

To scratch my own itches, I really needed certain things for my Flow development flow right inside VSCode. However, I have never done VSCode. So I took up this challenge to work on during hackathon.

learning about Cadence language server project

I thought I would need to work in-depth with that to achieve features I want to build. However, instead of re-inventing the wheel, I leverage it by building on top it and focusing on VSCode extension side.

Discussion