# VS Code extension

> How do I use the Windmill VS Code extension to build and sync scripts and flows locally?

The Windmill VS Code extension allows you to build scripts and flows in the comfort of your VS Code or Cursor editor, while leveraging Windmill UIs for test & flows edition.

![VS Code extension](../../../blog/2023-11-20-vscode/vscode_extension.png 'VS Code extension')

The extension can be used in particular from a repository synchronized to a Windmill instance to [develop scripts & flows locally](../../advanced/4_local_development/index.mdx) while keeping them synced to your workspace.

Windmill has its own IDE for creating [scripts](../../script_editor/index.mdx) and [flows](../../flows/1_flow_editor.mdx) from the Windmill application (cloud or [self-hosted](../../advanced/1_self_host/index.mdx)).

The Windmill UI allows you to edit directly the deployed scripts & flows, which is great for maintenance and quick prototyping.

However in many production settings it is more common to version everything from Git and to that end we have a CLI to sync a workspace to a local directory and the inverse operation (deploy local directory to a workspace). With this extension, you can efficiently edit scripts & flows directly from there.

To run scripts locally, see [Run locally](../../advanced/4_local_development/run_locally.mdx).

## Installation

First of all, have your workspace synced locally with [Windmill CLI](../../advanced/3_cli/index.mdx).

![Local workspace](../../../blog/2023-11-20-vscode/local_workspace.png.webp)

> [Example repo](https://github.com/windmill-labs/windmill-sync-example) opened in VS Code. We see 2 flows and 1 script, the flows are their own folders, each step in a flow is a separate file in their respective language. Scripts have their metadata in a separate file.

With [wmill sync pull](../../advanced/3_cli/sync.mdx#pulling) and [wmill sync push](../../advanced/3_cli/sync.mdx) you can synchronize your remote workspace to a local directory which you would version with GitHub / GitLab.

Then you can:

1. Install the [extension](https://marketplace.visualstudio.com/items?itemName=windmill-labs.windmill).

2. From any script file, use `> Windmill: Run preview in the current editor` or Ctrl+Enter and Shift+Enter to generate the UI preview (provided that the script meets the [few rules](../../core_concepts/13_json_schema_and_parsing/index.mdx#json-schema-in-windmill) required by Windmill).

All details to set up the workspace folder:

## Actions

The preview & run will work for any script meeting the specific language requirements (main function, imports) and being named with the dedicated file extension (.py, .go etc.). For scripts in Deno, name the file \[name\].deno.ts, ".ts" being by default Bun (configurable with the `defaultTs` field in your [wmill.yaml](../../advanced/3_cli/sync.mdx#wmillyaml)).

The extension will split your screen and display a panel. That panel will update automatically based on the edited document on the left.

- When editing a script (or a flow step), you see the script [preview UI](../../core_concepts/6_auto_generated_uis/index.mdx) with the [auto-inference of the parameters](../../core_concepts/13_json_schema_and_parsing/index.mdx).
- When editing a flow YAML, you see the flow builder and the flow [test UI](../../flows/18_test_flows.mdx).

In particular:

### Test scripts, flows and flows steps

Once you have your scripts and flows locally (either pulled from a remote workspace or created from scratch), you can test them directly from VS Code.

### Update UI from YAML

Editing the YAML definition of a flow instantly updates the rendered graph

### Update YAML from UI

Editing the flow from the UI immediately modifies the YAML definition

### Flow YAML validation

The VS Code extension includes syntax validation for flow.yaml files, making it easier to spot mistakes and ensure your flows are properly formatted before testing or deployment.

This validation is also useful for AI coding assistants that monitor IDE diagnostics, as they can automatically detect and fix flow YAML errors.

### Infer lockfile or use current lockfile

With this toggle, you can choose to use the metadata lockfile (derived from [workspace dependencies](../../core_concepts/55_workspace_dependencies/index.mdx) after [`wmill generate-metadata`](../../advanced/3_cli/generate-metadata.md)) instead of inferring them directly from the script.

![Toggle Lockfile](./toggle_lockfile.png 'Toggle Lockfile')

To learn more about lockfile, see [Local development](../../advanced/4_local_development/index.mdx).

## Commands

Access these commands through the Command Palette (Ctrl/Cmd+Shift+P):

| Command                                              | Description                                                                                                                                                                                         |
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Windmill: Show Preview**                           | This command launches a preview of your script in a new tab.                                                                                                                                        |
| **Windmill: Run preview**                            | Runs the current script and provides a preview within the VS Code environment. This feature lets you preview your work without leaving your code editor.                                            |
| **Windmill: Configure remote, workspace, and token** | Opens a setup wizard to configure your environment. This includes settings for the remote URL, workspace, and user token. You only need to do this once or when changing your environment settings. |
| **Windmill: Switch Windmill workspace**              | Allows you to switch between different workspaces.                                                                                                                                                  |
| **Windmill: Add a Windmill workspace**               | Adds a new workspace to your configuration.                                                                                                                                                         |

## Settings

The extension automatically uses workspace settings from your Windmill CLI configuration if available. This provides seamless integration between the CLI and VS Code extension without needing to configure settings separately.

The extension provides the following settings:

| Setting                         | Description                                                                                                  |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| `windmill.remote`               | The full remote URL including http and trailing slash. By default, it's "https://app.windmill.dev/".         |
| `windmill.workspaceId`          | The workspace id to use.                                                                                     |
| `windmill.token`                | The [token](../../core_concepts/4_webhooks/index.mdx#user-token) to use to authenticate with the remote and workspace.                                              |
| `windmill.additionalWorkspaces` | The list of additional remotes to use. This allows you to set up multiple workspaces for different projects. |
| `windmill.currentWorkspace`     | The workspace name currently used (if multiple). main or empty is the default one.                           |
| `windmill.configFolder`         | Override the CLI config folder path to fetch the workspace settings from.                                    |

![demo](./wm-settings.png.webp)

You can create a user token in the Windmill app. Follow the instructions on the [Webhooks docs](../../core_concepts/4_webhooks/index.mdx#user-token).

For TypeScript scripts, the Windmill extension will use by default [Bun](../../getting_started/0_scripts_quickstart/1_typescript_quickstart/index.mdx) as the runtime. You can change it either per script by using file extension `.deno.ts` or globally in your [wmill.yaml](../../advanced/3_cli/sync.mdx#wmillyaml) in the field `defaultTs`.