Add VSC extension page

docs/docs.json

@@ -23,11 +23,17 @@
             "pages": ["index"]
           },
           {
-
             "group": "🚀 Quickstart",
             "pages": [
               "getting-started/local-installation"
-            ]          },
+            ]
+          },
+          {
+            "group": "🛠 IDE Extensions",
+            "pages": [
+              "editor-plugins/vscode"
+            ]
+          },
           {
             "group": "⚡ Optimizing with Codeflash",
             "pages": [

docs/editor-plugins/vscode.mdx

@@ -0,0 +1,48 @@
+# VS Code Extension & VSIX Installation
+
+Bring Codeflash directly into your editor with the Visual Studio Code extension. The extension surfaces optimization suggestions inline, and keeps the CLI workflow close at hand with more visual experience in editor.
+
+## Requirements
+
+- VS Code 1.94.0 or later (Code, VS Code Desktop, Cursor, Windsurf and other VS Code–compatible editors supported)
+- Python 3.9+
+- Git repository initialized for your project
+- Codeflash CLI installed and initialized with `codeflash init` (Extension will also walkthrough with interactive onboarding)
+
+## Install from the Marketplace
+
+1. Open VS Code and head to the Extensions panel.
+2. Search for **“Codeflash”** or open the listing directly:<br />
+   [Install from VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=codeflash.codeflash)
+3. Click **Install** and reload VS Code when prompted.
+
+That’s it! As soon as you open a Python file inside a project that has already run `codeflash init`, the extension analyses the codebase and starts surfacing optimization opportunities.
+
+## Install via VSIX (Cursor, offline, or air‑gapped environments)
+
+Some environments—Cursor, Windows without Marketplace access, or air-gapped machines—require installing from a VSIX package.
+
+1. Download the latest VSIX build from Open VSX:<br />
+   [Download VSIX →](https://open-vsx.org/extension/codeflash/codeflash)
+2. In VS Code, run the command palette (`Cmd/Ctrl + Shift + P`) and select **Extensions: Install from VSIX…**
+3. Choose the downloaded `codeflash-*.vsix` file and restart the editor.
+
+## Initial Setup Checklist
+- The complete Setup flow is within extension to initialize codeflash LSP server
+
+## Everyday Workflow
+
+- **Inline suggestions:** Optimizable functions display a “optimize” hint above the function definition. And once optimized they will show a comment where you can click it to preview and apply improvements.
+- **Sidebar overview:** Use the Codeflash panel to review queued, inprogress, and completed optimizations.
+- **Targeted runs:** Trigger “Optimize Changed Functions” from the extension to focus on recent uncommited edits.
+- **Pair with CLI:** For batch workflows (`codeflash --all`), you can still run the CLI. The extension will pick up the results when you return to the editor.
+
+## Troubleshooting
+
+| Issue | Quick Fix |
+| ----- | --------- |
+| Using Cursor / custom VS Code build | Install via VSIX and restart the editor. |
+| Still stuck? | Reach out on [Discord](https://www.codeflash.ai/discord) or file an issue on [GitHub](https://github.com/codeflash-ai/codeflash/issues). |
+
+With the extension in place, you can review, accept, or iterate on optimizations without leaving your editor—perfect for maintaining focus while keeping performance top of mind.
+