docs: Add VS Code extension documentation#16229
Open
rafaeelaudibert wants to merge 3 commits intomasterfrom
Open
docs: Add VS Code extension documentation#16229rafaeelaudibert wants to merge 3 commits intomasterfrom
rafaeelaudibert wants to merge 3 commits intomasterfrom
Conversation
We're gonna be marketing this real soon, so let's add some docs here! This covers most of the features we have, we can easily extend documentation in the future if needed. Backlinking to the extension hasn't been done yet, I'd appreciate help from the editorial team here somehow.
rafaeelaudibert
requested review from
a team,
MattBro and
fercgomes
and removed request for
a team
Merge activity
|
Contributor
Deploy preview
Push a fix or re-run the workflow to try again. Common culprits
|
Contributor
|
Vale prose linter → found 41 errors, 207 warnings, 8 suggestions in your markdown Full report → · Copy the Job Summary code block into an LLM to batch-fix issues.
|
ivanagas
approved these changes
Apr 8, 2026
vercel.json
Outdated
Comment on lines
+1834
to
+1836
| { "source": "/docs/vscode", "destination": "/docs/vscode-extension" }, | ||
| { "source": "/vscode-extension", "destination": "/docs/vscode-extension" }, | ||
| { "source": "/vscode", "destination": "/docs/vscode-extension" } |
Contributor
There was a problem hiding this comment.
we shouldn't add redirects if no pages existed before
Member
Author
There was a problem hiding this comment.
I was just thinking people might do /vscode as an attempt to find an extension and would automatically find it. Is that bad practice?
| @@ -0,0 +1,80 @@ | |||
| --- | |||
| title: Flag management | |||
Contributor
There was a problem hiding this comment.
We should include these so it isn't confused with normal feature flags docs and people can search for it better.
Suggested change
| title: Flag management | |
| title: Flag management in the VS Code extension |
|
|
||
| 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`). | ||
|
|
||
| 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. |
Contributor
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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. |
Comment on lines
+152
to
+157
| ## Further reading | ||
|
|
||
| - [PostHog VS Code extension on GitHub](https://github.com/PostHog/posthog-vscode) | ||
| - [PostHog MCP server for VS Code](/docs/model-context-protocol/vscode) — AI agent integration | ||
| - [Feature flags documentation](/docs/feature-flags) | ||
| - [Session replay documentation](/docs/session-replay) |
Contributor
There was a problem hiding this comment.
Don't think we need this as we've already covered it multiple times.
Suggested change
| ## Further reading | |
| - [PostHog VS Code extension on GitHub](https://github.com/PostHog/posthog-vscode) | |
| - [PostHog MCP server for VS Code](/docs/model-context-protocol/vscode) — AI agent integration | |
| - [Feature flags documentation](/docs/feature-flags) | |
| - [Session replay documentation](/docs/session-replay) |
| @@ -0,0 +1,114 @@ | |||
| --- | |||
| title: Inline code intelligence | |||
Contributor
There was a problem hiding this comment.
Suggested change
| title: Inline code intelligence | |
| title: Inline code intelligence and annotations |
Comment on lines
+21
to
+23
| - **`posthog.additionalClientNames`** — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`. | ||
| - **`posthog.detectNestedClients`** — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`. | ||
| - **`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. |
Contributor
There was a problem hiding this comment.
Suggested change
| - **`posthog.additionalClientNames`** — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`. | |
| - **`posthog.detectNestedClients`** — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`. | |
| - **`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. | |
| - `posthog.additionalClientNames` — Add variable names like `["analytics", "ph"]` so the extension recognizes `analytics.capture()` the same way it recognizes `posthog.capture()`. | |
| - `posthog.detectNestedClients` — When enabled (default), detects nested member expressions like `window.posthog?.capture()` or `this.analytics.posthog.capture()`. | |
| - `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. |
| ### Unrecognized flag keys | ||
|
|
||
| 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). | ||
| <ProductScreenshot |
Contributor
There was a problem hiding this comment.
Suggested change
| <ProductScreenshot | |
| <ProductScreenshot |
| @@ -0,0 +1,44 @@ | |||
| --- | |||
| title: Session replay | |||
Contributor
There was a problem hiding this comment.
Suggested change
| title: Session replay | |
| title: Session replays in the VS Code extension |
| @@ -0,0 +1,76 @@ | |||
| --- | |||
| title: Sidebar dashboard | |||
Contributor
There was a problem hiding this comment.
Suggested change
| title: Sidebar dashboard | |
| title: Sidebar dashboard in the VS Code extension |
gewenyu99
approved these changes
Apr 8, 2026
| url: '/docs/activity', | ||
| }, | ||
| { | ||
| name: 'VS Code extension', |
Contributor
There was a problem hiding this comment.
Not an issue for this PR, but this is quite hidden. This is definitely the right place for now, but I'd love to find a better way to bring attention to this.
Maybe at the end of the installation sections we can mention this plugin, toolbar, the MCP server, etc. Maybe we can recommend in wizard?
Other than this, I'm thinking we rework the ProductOS nav a bit.
Member
Author
There was a problem hiding this comment.
Yeah, absolutely agree with it. I had a hard time navigating here myself, but it's the only reasonable place IMO, unfortunately.
I'll see if I can add some backlinks to improve this.
|
|
||
| | Setting | Description | Default | | ||
| |---|---|---| | ||
| | `posthog.additionalClientNames` | Additional variable names the extension should recognize as PostHog clients (e.g., `["analytics", "ph"]`) | `[]` | |
Contributor
There was a problem hiding this comment.
Suggested change
| | `posthog.additionalClientNames` | Additional variable names the extension should recognize as PostHog clients (e.g., `["analytics", "ph"]`) | `[]` | | |
| | `posthog.additionalClientNames` | Additional variable names the extension should recognize as instances of PostHog clients (e.g., `["analytics", "ph"]`) | `[]` | |
| @@ -0,0 +1,80 @@ | |||
| --- | |||
| title: Flag management | |||
| title: Flag management | ||
| sidebar: Docs | ||
| showTitle: true | ||
| availability: |
Contributor
There was a problem hiding this comment.
I don't think these do anything anymore 🤔 The new website doesn't have these
|
|
||
| ## Installation | ||
|
|
||
| Install directly from your editor using these links: |
Contributor
There was a problem hiding this comment.
Use tabs for selections like this. Dw they render properly in the md version of the page
|
|
||
| These settings can also be shared across your team via a [`.posthog.json` configuration file](/docs/vscode-extension#team-configuration). | ||
|
|
||
| ## Feature flag status |
|
|
||
| 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). | ||
| <ProductScreenshot | ||
| imageLight="https://res.cloudinary.com/dmukukwp6/image/upload/w_800,c_limit,q_auto,f_auto/pasted_image_2026_04_07_T17_59_45_503_Z_1d9df5f0a8.png" |
Contributor
There was a problem hiding this comment.
Can you update the w_800 to a higher value for these? Not sure how big your screenshots are. Code screenshots should be slightly higher definition imo. Clearer text :D
|
|
||
| ## Typo detection | ||
|
|
||
| The extension uses **Levenshtein distance matching** to detect likely typos in event names. If you type `capture("page_veiw")` but your project has an event called `page_view`, the extension flags it with a warning and suggests the correct name. |
Comment on lines
+75
to
+80
| | Action | How to access | | ||
| |---|---| | ||
| | **Copy flag key** | Right-click context menu, CodeLens, or `PostHog: Copy Flag Key` command | | ||
| | **Open in PostHog** | CodeLens, sidebar, or `PostHog: Open in PostHog` command — opens the flag in your browser | | ||
| | **Find all references** | `PostHog: Find Flag References` — searches your workspace for every usage of a flag key | | ||
| | **View flag detail** | Click a flag in the sidebar or run `PostHog: Show Flag Detail` | |
Contributor
There was a problem hiding this comment.
| Action | How to access | Command |
|---|---|---|
| Copy flag key | Right-click context menu or CodeLens | PostHog: Copy Flag Key |
| Open in PostHog | CodeLens or sidebar — opens the flag in your browser | PostHog: Open in PostHog |
| Find all references | Searches your workspace for every usage of a flag key | PostHog: Find Flag References |
| View flag detail | Click a flag in the sidebar | PostHog: Show Flag Detail |
| enterprise: full | ||
| --- | ||
|
|
||
| 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. |
Contributor
There was a problem hiding this comment.
Suggested change
| 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. | |
| 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.z |
in this case, it's the product (a proper noun) 🤓
…n docs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rafaeelaudibert
force-pushed
the
rafa/feat-add-vscode-extension-documentation
branch
from
253c736 to
bdbe63c
Compare
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Added comprehensive documentation for the PostHog VS Code extension, including:
We're gonna be marketing this real soon, so let's add some docs here! This covers most of the features we have, we can easily extend documentation in the future if needed. Backlinking to the extension docs hasn't been done yet; I'd appreciate help from the editorial team here somehow.
Checklist
vercel.json