https://github.com/effect-ts/vscode-extension
Tools to assist development with the Effect Typescript framework
https://github.com/effect-ts/vscode-extension
Last synced: 12 months ago
JSON representation
Tools to assist development with the Effect Typescript framework
- Host: GitHub
- URL: https://github.com/effect-ts/vscode-extension
- Owner: Effect-TS
- License: mit
- Created: 2024-02-02T04:26:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-30T09:48:42.000Z (12 months ago)
- Last Synced: 2025-06-30T09:58:03.063Z (12 months ago)
- Language: TypeScript
- Homepage:
- Size: 561 KB
- Stars: 39
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Effect Dev Tools
View traces, metrics and inspect the context for your Effect app - all without leaving VSCode!
## Setup
To use Effect Dev Tools in your Effect project, first you need to install the following dependency:
```
pnpm install @effect/experimental
```
You can then import and use the `DevTools` module in your Effect app:
```ts
import { DevTools } from "@effect/experimental"
import { NodeRuntime, NodeSocket } from "@effect/platform-node"
import { Effect, Layer } from "effect"
const program = Effect.log("Hello!").pipe(
Effect.delay(2000),
Effect.withSpan("Hi", { attributes: { foo: "bar" } }),
Effect.forever,
)
const DevToolsLive = DevTools.layerWebSocket().pipe(
Layer.provide(NodeSocket.layerWebSocketConstructor),
)
program.pipe(Effect.provide(DevToolsLive), NodeRuntime.runMain)
```
If you are using `@effect/opentelemetry` in your project, then it is important that you provide the `DevTools` layer **before** your tracing layers, so the tracer is patched correctly.
## Usage
Once you have added the Layer to your project, open the Effect Dev Tools panel in vscode & click "Start the server" in the "Clients" panel.
You can then start your Effect app, and then begin to inspect the results!