Skip to content

A VS Code extension that makes PageUp/PageDown keys work like classic text editors, where the cursor stays at the same relative position on the screen when scrolling.

License

Notifications You must be signed in to change notification settings

sergev/vscode-classic-paging

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Classic PageUp/PageDown Extension

A VS Code extension that makes PageUp/PageDown keys work like classic text editors, where the cursor stays at the same relative position on the screen when scrolling.

Overview

By default, VS Code's PageUp/PageDown behavior moves the cursor to the top or bottom of the viewport after scrolling. This extension restores the classic behavior found in editors like Vim, Emacs, and traditional text editors, where the cursor maintains its relative position on the screen (e.g., if it was 5 lines from the top, it stays 5 lines from the top after paging).

Features

  • Classic Scrolling Behavior: When you press PageUp or PageDown, the viewport scrolls but the cursor maintains its relative position on the screen (measured in lines from the top of the viewport)
  • Smart Navigation: Scrolls by viewportHeight - 2 lines for natural page-by-page navigation with slight overlap
  • Automatic Keybinding: Automatically binds to PageUp/PageDown keys when the extension is active
  • Edge Case Handling: Gracefully handles cases where you're already at the top or bottom of the document
  • Dynamic Viewport Support: Adapts to viewport height changes during scrolling

Installation

From VSIX Package

  1. Download the classic-paging-1.0.0.vsix file
  2. Open VS Code
  3. Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
  4. Run "Extensions: Install from VSIX..."
  5. Select the .vsix file

From Source

  1. Clone or download this repository:

    git clone https://github.com/sergev/vscode-classic-paging.git
    cd vscode-classic-paging
  2. Install dependencies:

    npm install
  3. Compile the extension:

    npm run compile
  4. Press F5 in VS Code to open a new Extension Development Host window, or:

    • Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
    • Run "Extensions: Install from VSIX..." if you've packaged it
    • Or use "Developer: Install Extension from Location..." and select this directory

Usage

Once installed, the extension automatically activates and binds to the PageUp and PageDown keys. Simply use these keys as you normally would in any text editor - the cursor will maintain its relative position on the screen while the viewport scrolls.

Commands

The extension provides two commands that can also be invoked from the Command Palette:

  • Page Up (Classic): Scrolls up while maintaining cursor position
  • Page Down (Classic): Scrolls down while maintaining cursor position

Development

To develop and test the extension:

  1. Open the extension folder in VS Code
  2. Press F5 to launch a new Extension Development Host window
  3. Test PageUp/PageDown in the new window
  4. Make changes to src/extension.ts
  5. Press Ctrl+R (or Cmd+R on Mac) in the Extension Development Host to reload

Building

To build the extension:

npm run compile

To watch for changes during development:

npm run watch

How It Works

The extension implements classic paging behavior through the following steps:

  1. Calculate Relative Position: Determines how many lines the cursor is from the top of the visible viewport
  2. Scroll Viewport: Scrolls the viewport by viewportHeight - 2 lines in the requested direction (up or down)
  3. Maintain Cursor Position: After scrolling, repositions the cursor to maintain the same relative position (same number of lines from the top)

The implementation uses VS Code's revealRange API to control viewport scrolling and handles dynamic viewport height changes that can occur during the scroll operation.

Configuration

The extension automatically activates on startup and binds to PageUp/PageDown keys. No configuration is required.

If you want to customize the scroll amount, you can modify the scrollAmount calculation in src/extension.ts (currently set to viewportHeight - 2 lines).

Requirements

  • VS Code version 1.80.0 or higher

License

MIT

About

A VS Code extension that makes PageUp/PageDown keys work like classic text editors, where the cursor stays at the same relative position on the screen when scrolling.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published