如何在Visual Studio Code中实现代码块「粘性固定」效果？

你描述的这种滚动代码时，当前所在代码块头部固定在编辑器顶部的效果，目前有三种实现途径：原生内置功能、第三方插件，以及自定义开发插件。

一、VS Code原生内置功能（最便捷） #

从1.60版本开始，VS Code内置了**Sticky Scroll（粘性滚动）**功能，完全匹配你说的效果——滚动时，当前光标所在的类、函数、代码块的头部会自动固定在编辑器顶部，帮你随时看清当前代码的上下文。

开启步骤：

• 打开设置（快捷键Ctrl+, / Cmd+,）
• 搜索「Sticky Scroll」，勾选Editor: Sticky Scroll Enabled启用该功能
• 还可通过Editor: Sticky Scroll Max Line Count调整顶部固定的最大行数，避免占用过多编辑区域

二、第三方扩展插件 #

如果原生功能满足不了个性化需求，可试试这些第三方插件：

• Sticky Headers：专注代码块头部的粘性固定，支持自定义哪些元素（类、函数、注释块等）需要固定
• Indent Guides with Sticky Headers：结合缩进引导线和粘性头部，适合对代码层级敏感的场景

安装方法：打开左侧扩展面板（快捷键Ctrl+Shift+X / Cmd+Shift+X），搜索插件名称后点击安装即可。

三、自定义开发实现（进阶） #

若想完全自定义效果，可基于VS Code Extension API开发专属插件，核心思路如下：

1. 监听编辑器的滚动、光标位置变化事件
2. 通过TextDocument和Selection API获取当前光标所在的代码块范围
3. 利用编辑器装饰器（Decoration API）将代码块头部渲染为固定在顶部的元素
4. 滚动时动态更新固定元素的显示状态

简化版核心代码示例：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let activeEditor = vscode.window.activeTextEditor;
    // 创建粘性头部的装饰样式
    const stickyDecoration = vscode.window.createTextEditorDecorationType({
        position: vscode.DecorationPosition.Top,
        isWholeLine: true,
        backgroundColor: new vscode.ThemeColor('editor.background'),
        borderBottom: '1px solid #ccc'
    });

    // 更新粘性头部的逻辑
    function updateStickyHeader() {
        if (!activeEditor) return;
        const doc = activeEditor.document;
        const currentLine = activeEditor.selection.start.line;
        // 获取当前代码块的头部行（需根据不同语言语法实现识别逻辑）
        const headerLine = getCodeBlockHeader(doc, currentLine);
        
        if (headerLine !== undefined) {
            const headerRange = new vscode.Range(
                headerLine, 0, 
                headerLine, doc.lineAt(headerLine).text.length
            );
            activeEditor.setDecorations(stickyDecoration, [headerRange]);
        } else {
            activeEditor.setDecorations(stickyDecoration, []);
        }
    }

    // 绑定事件监听
    vscode.window.onDidChangeActiveTextEditor(editor => {
        activeEditor = editor;
        updateStickyHeader();
    });
    vscode.window.onDidChangeTextEditorSelection(updateStickyHeader);
    vscode.window.onDidChangeTextEditorVisibleRanges(updateStickyHeader);

    context.subscriptions.push(stickyDecoration);
}

// 自定义函数：识别当前代码块的头部行（示例逻辑，需适配具体语言）
function getCodeBlockHeader(doc: vscode.TextDocument, currentLine: number): number | undefined {
    // 向上查找最近的函数或类定义行
    for (let i = currentLine; i >= 0; i--) {
        const lineText = doc.lineAt(i).text.trim();
        if (lineText.startsWith('function') || lineText.startsWith('class')) {
            return i;
        }
    }
    return undefined;
}

内容的提问来源于stack exchange，提问作者Om_Wani