A minimal VS Code extension that provides commands to toggle scroll synchronization between editor and preview panels for HTML and Markdown files.
Features
- Toggle Preview Scroll Sync (to ON): Enable scroll synchronization between editor and preview panels
- Toggle Preview Scroll Sync (to OFF): Disable scroll synchronization between editor and preview panels
- Dynamic Command Display: Only one command is visible at any given time based on current state
- Multiple Access Points: Commands available in Command Palette, editor tab context menu, and editor title bar
- Workspace-Scoped Settings: Settings are saved at workspace level, allowing different behavior per project
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions view (Ctrl+Shift+X)
- Search for "Toggle Preview Scroll Sync"
- Click "Install" button
- Reload VS Code when prompted
From VSIX File
- Download the
.vsix file from the Releases page
- Open VS Code
- Go to Extensions view (Ctrl+Shift+X)
- Click the "..." menu in the top-right corner
- Select "Install from VSIX..."
- Navigate to and select the downloaded
.vsix file
- Click "Install"
- Reload VS Code when prompted
Usage
Command Palette
- Open Command Palette:
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
- Type "Toggle Preview Scroll Sync"
- Select the appropriate command:
- "Toggle Preview Scroll Sync (to ON)" - if scroll sync is currently disabled
- "Toggle Preview Scroll Sync (to OFF)" - if scroll sync is currently enabled
- Press Enter to execute
- Right-click on a Markdown or HTML file tab
- Select "Toggle Preview Scroll Sync (to ON)" or "Toggle Preview Scroll Sync (to OFF)"
- Click to execute
Editor Title Bar
- Open a Markdown or HTML file
- Look for the sync icon
$(sync) in the editor title bar (next to "Split Editor Right")
- Click the icon to toggle scroll sync
Settings
The extension modifies the following VS Code settings:
html.preview.scrollPreviewWithEditorhtml.preview.scrollEditorWithPreviewmarkdown.preview.scrollEditorWithPreview
Settings are saved at the workspace level, meaning each project can have its own scroll sync configuration.
Development
Prerequisites
- Node.js (LTS) 18.x or higher
- VS Code 1.80.0 or higher
@vscode/vsce package for packaging
Install Dependencies
npm install
Run in Debug Mode
- Open this project in VS Code
- Press
F5 to launch the Extension Development Host
- Test the extension in the new VS Code window
Package Extension
npm install -g @vscode/vsce
vsce package
This creates a .vsix file that can be shared or published to the VS Code Marketplace.
Publish to VS Code Marketplace
- Create a publisher account at VS Code Marketplace
- Install the
vsce CLI tool: npm install -g @vscode/vsce
- Create a
vsce publisher: vsce create-publisher your-publisher-name
- Login to your publisher:
vsce login your-publisher-name
- Publish the extension:
vsce publish
- Follow the prompts to provide extension details
Known Limitations
- Preview Panel "More Actions" Menu: Commands cannot be added to the "More Actions" (three dots) menu in built-in preview panels. This is a VS Code API limitation.
- Checkbox in Context Menu: Cannot display checkboxes in the editor tab context menu. VS Code only supports checkboxes in specific menu types.
- Dynamic Command Titles: Cannot dynamically change a single command's title. The extension uses two separate commands with different IDs to work around this limitation.
Troubleshooting
Command Not Visible
If commands are not visible in the expected locations:
- Ensure you have opened a Markdown or HTML file (for editor title bar and context menu)
- Check that the extension is activated (look for "Toggle Preview Scroll Sync" in the Extensions view)
- Try reloading VS Code (
Ctrl+Shift+P → "Reload Window")
- Check the VS Code output panel for any errors
Settings Not Changing
If scroll sync settings are not changing:
- Check that you're in a workspace (not a single file)
- Try manually changing the settings in VS Code settings
- Reload VS Code and try the command again
Extension Not Working
If the extension is not working:
- Check VS Code version (requires 1.80.0 or higher)
- Check the Extensions view for any errors
- Try reinstalling the extension
- Check the VS Code Developer Tools console for error messages
Contributing
Contributions are welcome! Please feel free to:
- Fork the repository
- Create a new branch for your feature
- Make your changes
- Submit a pull request
- Follow the coding standards in AGENTS.md
License
This project is licensed under the MIT License.
Support
For issues, questions, or suggestions:
- Open an issue on GitHub
- Check existing issues before creating a new one
- Provide detailed information about the problem
- Include steps to reproduce the issue
- Specify your VS Code version and operating system
Documentation
Version: 1.0.0
Last Updated: 2026-02-19
