You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: contents/docs/libraries/js/index.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ import IdentifyFrontendCallout from '../../_snippets/identify-frontend-callout.m
31
31
32
32
<IdentifyFrontendCallout />
33
33
34
-
Once you've installed PostHog, see our [features doc](/docs/libraries/js/features) for more information about what you can do with it.
34
+
Once you've installed PostHog, see our [features doc](/docs/libraries/js/features) for more information about what you can do with it. You can also install the [PostHog VS Code extension](/docs/vscode-extension) to see live analytics, flag status, and session replay links inline in your code.
Copy file name to clipboardExpand all lines: contents/docs/model-context-protocol/vscode.mdx
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,8 @@ import SharedContent from "./_snippets/shared.mdx"
8
8
9
9
The PostHog [MCP server](https://modelcontextprotocol.io/introduction) enables VS Code to directly interact with your PostHog data – managing feature flags, querying analytics, investigating errors, and more.
10
10
11
+
> **Note:** This is different from the [PostHog VS Code extension](/docs/vscode-extension), which provides inline analytics, flag management, and session replay links directly in your editor. They complement each other.
Copy file name to clipboardExpand all lines: contents/docs/vscode-extension/_snippets/configuration-reference.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
| Setting | Description | Default |
4
4
|---|---|---|
5
-
|`posthog.additionalClientNames`| Additional variable names the extension should recognize as PostHog clients (e.g., `["analytics", "ph"]`) |`[]`|
5
+
|`posthog.additionalClientNames`| Additional variable names the extension should recognize as instances of PostHog clients (e.g., `["analytics", "ph"]`) |`[]`|
6
6
|`posthog.additionalFlagFunctions`| Additional bare function names that accept a flag key as the first argument (e.g., `["useMyFlag"]`) |`[]`|
7
7
|`posthog.detectNestedClients`| Detect PostHog clients accessed via nested member expressions like `window.posthog?.capture()`|`true`|
8
8
|`posthog.showInlineDecorations`| Show inline annotations (sparklines, flag status) in the editor |`true`|
The [PostHog VS Code extension](https://marketplace.visualstudio.com/items?itemName=PostHog.posthog-vscode) brings feature flags, experiments, event analytics, and session replay data directly into your editor. It works with JavaScript, TypeScript, Go and Ruby files (`.js`, `.jsx`, `.ts`, `.tsx`, `.go`, `.rb`).
14
10
15
-
With it, you can see live analytics data inline in your code, manage feature flags without leaving your editor, clean up stale flags with AST-based refactoring, and jump to session replays for events in your codebase.
11
+
With it, you can see live analytics data inline in your code, [manage feature flags](/docs/vscode-extension/flag-management) without leaving your editor, [clean up stale flags](/docs/vscode-extension/stale-flag-cleanup) with AST-based refactoring, and [jump to session replays](/docs/vscode-extension/session-replay) for events in your codebase.
16
12
17
13
> **Note:** This extension is different from the [PostHog MCP server for VS Code](/docs/model-context-protocol/vscode), which enables AI agents and Copilot to interact with PostHog. The VS Code extension provides direct, visual tooling for developers in the editor. They complement each other.
18
14
19
15
## Installation
20
16
21
-
Install directly from your editor using these links:
17
+
Install directly from your editor:
22
18
23
-
-[Install in VS Code](vscode:extension/PostHog.posthog-vscode)
24
-
-[Install in Cursor](cursor:extension/PostHog.posthog-vscode)
19
+
<Tab.Grouptabs={['VS Code', 'Cursor']}>
20
+
<Tab.List>
21
+
<Tab>VS Code</Tab>
22
+
<Tab>Cursor</Tab>
23
+
</Tab.List>
24
+
<Tab.Panels>
25
+
<Tab.Panel>
26
+
27
+
[Install in VS Code](vscode:extension/PostHog.posthog-vscode)
28
+
29
+
</Tab.Panel>
30
+
<Tab.Panel>
31
+
32
+
[Install in Cursor](cursor:extension/PostHog.posthog-vscode)
33
+
34
+
</Tab.Panel>
35
+
</Tab.Panels>
36
+
</Tab.Group>
25
37
26
38
Or install manually:
27
39
@@ -31,27 +43,31 @@ Or install manually:
31
43
32
44
The extension is also available on the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=PostHog.posthog-vscode) and the [Open VSX Registry](https://open-vsx.org/extension/PostHog/posthog-vscode).
33
45
34
-
Copy file name to clipboardExpand all lines: contents/docs/vscode-extension/inline-code-intelligence.mdx
+10-13Lines changed: 10 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,7 @@
1
1
---
2
-
title: Inline code intelligence
2
+
title: Inline code intelligence and annotations
3
3
sidebar: Docs
4
4
showTitle: true
5
-
availability:
6
-
free: full
7
-
selfServe: full
8
-
enterprise: full
9
5
---
10
6
11
7
The VS Code extension analyzes your source code in real time and overlays PostHog data directly in the editor. It detects PostHog SDK calls — `capture()`, `isFeatureEnabled()`, `getFeatureFlag()`, and others — and annotates them with live analytics, flag status, and contextual actions.
@@ -18,9 +14,9 @@ The extension automatically recognizes standard PostHog client patterns like `po
18
14
19
15
If your codebase wraps the PostHog client in a custom variable, configure the extension to recognize it:
20
16
21
-
-**`posthog.additionalClientNames`** — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`.
22
-
-**`posthog.detectNestedClients`** — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`.
23
-
-**`posthog.additionalFlagFunctions`** — Add bare function names like `["useMyFlag"]` that accept a flag key as the first argument. This is useful for custom hooks or wrapper functions.
17
+
-`posthog.additionalClientNames` — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`.
18
+
-`posthog.detectNestedClients` — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`.
19
+
-`posthog.additionalFlagFunctions` — Add bare function names like `["useMyFlag"]` that accept a flag key as the first argument. This is useful for custom hooks or wrapper functions.
24
20
25
21
These settings can also be shared across your team via a [`.posthog.json` configuration file](/docs/vscode-extension#team-configuration).
26
22
@@ -34,16 +30,17 @@ Next to every `isFeatureEnabled()`, `getFeatureFlag()`, or similar call, the ext
34
30
-**Experiment status** if the flag is linked to an experiment, including win/loss/inconclusive results
alt="PostHog VS Code extension feature flag status indicators"
39
35
classes="rounded"
40
36
/>
41
37
42
38
### Unrecognized flag keys
43
39
44
40
If you reference a flag key that doesn't exist in your PostHog project, the extension shows a **yellow underline warning**. You can use the quick-fix action to [create the flag directly from your editor](/docs/vscode-extension/flag-management#creating-flags-from-unrecognized-keys).
alt="PostHog VS Code extension feature flag yellow indicator"
48
45
classes="rounded"
49
46
/>
@@ -53,7 +50,7 @@ If you reference a flag key that doesn't exist in your PostHog project, the exte
53
50
Every `capture()` call in your code gets a **7-day event volume sparkline** displayed inline. This shows you at a glance how frequently each event fires, helping you identify dead events or unexpected spikes without leaving your editor.
Copy file name to clipboardExpand all lines: contents/docs/vscode-extension/session-replay.mdx
+3-7Lines changed: 3 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,10 @@
1
1
---
2
-
title: Session replay
2
+
title: Session replays in the VS Code extension
3
3
sidebar: Docs
4
4
showTitle: true
5
-
availability:
6
-
free: full
7
-
selfServe: full
8
-
enterprise: full
9
5
---
10
6
11
-
The VS Code extension connects your code to [session replay](/docs/session-replay) data, showing you how many sessions and users are triggering events and letting you jump directly to replays in PostHog.
7
+
The VS Code extension connects your code to [Session Replay](/docs/session-replay) data, showing you how many sessions and users are triggering events and letting you jump directly to replays in PostHog.
12
8
13
9
## CodeLens session and user counts
14
10
@@ -20,7 +16,7 @@ Above each `capture()` call and feature flag check in your code, the extension s
20
16
These counts give you a quick sense of how actively a piece of code is being exercised in production, without needing to check PostHog separately.
Copy file name to clipboardExpand all lines: contents/docs/vscode-extension/sidebar-dashboard.mdx
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,7 @@
1
1
---
2
-
title: Sidebar dashboard
2
+
title: Sidebar dashboard in the VS Code extension
3
3
sidebar: Docs
4
4
showTitle: true
5
-
availability:
6
-
free: full
7
-
selfServe: full
8
-
enterprise: full
9
5
---
10
6
11
7
The extension adds a **PostHog panel** to the VS Code sidebar (activity bar), giving you a dashboard-like interface with tabs for feature flags, experiments, analytics, and code-level event analysis.
0 commit comments