feat: External Editor Integration

[pratikb64]

This PR introduces integration with the Frappe Script Editor VS Code extension. It allows developers to open and edit Client Scripts, Data Scripts, Global Code, and Page Code directly in VS Code or its forks

Features

• Auto-Discovery: Automatically detects if the VS Code extension is active and only shows the necessary buttons if it is.
• Direct Access: Added "Open in Editor" buttons to all primary code editors (Global Code, Page Code, Data Scripts).
• Block Actions: New context menu options for blocks to jump directly to their specific Client or Data scripts in Editor.
• Graceful Permissions: Add a new setting Integrate with External Editor under Developer Settings tab to handle local network access permission

Technical Changes

• New Composable: useExternalEditor.ts handles the lifecycle of editor detection, permission requests, and URI generation using the vscode:// scheme.
• Enhanced UI Components:
  • CodeEditor.vue: Added support for an external editor context and a launch button.
  • BlockContextMenu.vue: Integrated "Open in Editor" actions for block-level scripts with dynamic labeling (e.g., "Open in VS Code").
  • GlobalDeveloper.vue: Added settings to manage, authorize, and check the status of local network access.
• Fixes:
  • Handled local network access popups to prevent silent failures.
  • Fixed dynamic labeling in context menus to reflect the detected editor name.

Preview

Working demo

Screen.Recording.2026-05-12.at.5.19.45.PM.mov

Integration setting

How to use:

1. Install the Frappe Script Editor extension in VS Code.
2. Go to Settings > Developer in Builder and click Request Access to allow Builder to talk to your local VS Code instance.
3. Once active, look for the "Open in VS Code" button in any script editor at the top right or right-click a block to see the new "Open in Editor" options.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 57.62%. Comparing base (7c4f31c) to head (8b9abbc).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #595   +/-   ##
========================================
  Coverage    57.62%   57.62%           
========================================
  Files           29       29           
  Lines         3193     3193           
========================================
  Hits          1840     1840           
  Misses        1353     1353           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.