Write a how-to guide for installing the VSCode extension

[jmacdotorg]

[linear]

ENG-1348 Write a how-to guide for installing the VSCode extension

[traycerai]

Plan

Observations

The docs site uses Docusaurus with integration guides under docs/integrations/, following kebab-case filenames, YAML frontmatter, and stepwise sections. Sidebars are manually configured in sidebars.ts under an “Integrations” category. The CodeRabbit VS Code extension lives on the Marketplace as CodeRabbit.coderabbit-vscode, supports UI, CLI, and optional VSIX installation (no official VSIX published).

Approach

1. Create a new vscode-extension.md file in the docs/integrations/ folder, modeled on existing guides. 2. Update sidebars.ts to add the new doc under the Integrations category. 3. Run the Docusaurus build and verify the guide appears correctly. 4. Adjust search/redirect settings if needed and finalize with a peer review.

Reasoning

I analyzed the docs folder structure, integration guide patterns, and category metadata. I inspected sidebars.ts and docusaurus.config.ts to understand nav and build configurations. I reviewed package.json and workflows to confirm build scripts, and researched the VS Code extension’s Marketplace ID and install methods via web search.

Proposed File Changes

📄 docs/integrations/vscode-extension.md ^(NEW) 🔗

References

• 📄 docs/integrations/issue-integrations.md
• 📄 docs/integrations/category.yaml

Create a new Markdown file at docs/integrations/vscode-extension.md. Add YAML frontmatter matching other integration guides with title: "Install the VS Code extension" and description: "How to install and configure the CodeRabbit VS Code extension". Structure content into these sections:

1. Introduction: summary of capabilities
2. Prerequisites: VS Code version, API access
3. Installation via Marketplace: UI and CLI commands
4. Installation via VSIX: offline install steps and alternative methods
5. Configuration: how to enter API key in Settings
6. Quick-start check: verify status bar icon or sample command
7. Troubleshooting: common errors, log location (Help → Toggle Developer Tools), link to docs/getting-started/support.md
8. Next steps: link to other docs/integrations guides and support resources

Use Markdown headings, code blocks, lists, and cross-links mirroring docs/integrations/issue-integrations.md.

📄 sidebars.ts ^(MODIFY) 🔗

References

• 📄 sidebars.ts

In sidebars.ts, find the Integrations category in the docsSidebar array. Insert a new item for the VS Code guide, matching adjacent entries’ style. For example:

{
  type: 'category',
  label: 'Integrations',
  items: [
    'integrations/issue-integrations',
    'integrations/knowledge-base',
    // add below:
    'integrations/vscode-extension',
    'integrations/code-graph-analysis'
  ],
  collapsed: false
}

Ensure single-quotes and trailing commas align with existing style.

Import In IDE

Developer Humor

🚀 New docs landing! 🎉
Why did the extension go to school?
To learn its A–Z of VS Code!
🐰 CodeRabbit’s students now have a guide to hop right in!
🎈 Happy installing!

---

Execution Information

Branch: main
Commit: 6fdc21b

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.