VS Code扩展开发：如何设置文件前3行只读？API问询

目前VS Code没有直接设置指定行/区域为只读的官方API，你当前用装饰器标记+onDidChangeTextDocument()回滚的方式是可行的，但体验上还有优化空间。

现有临时方案的弊端 #

• 用户修改只读行后会出现内容闪回，编辑体验不够流畅
• 若同时存在多段编辑操作，可能出现内容冲突或回滚不及时的问题

优化后的实现思路 #

1. 监听文档变更事件，精准判断修改范围是否触及前3行
2. 若触及只读区域，通过vscode.workspace.applyEdit()精准恢复原始内容，而非直接替换整个前3行
3. 结合装饰器给只读行添加视觉标记，让用户直观感知不可编辑区域

示例代码片段 #

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    // 创建只读行装饰器（灰色背景标记）
    const readOnlyDecoration = vscode.window.createTextEditorDecorationType({
        backgroundColor: 'rgba(200, 200, 200, 0.3)',
        isWholeLine: true
    });

    // 监听文档内容变更
    const changeListener = vscode.workspace.onDidChangeTextDocument((event) => {
        const targetDoc = event.document;
        // 可根据需求调整文件类型过滤，比如只处理.ts/.js文件
        if (!['typescript', 'javascript'].includes(targetDoc.languageId)) return;

        // 定义前3行的范围（行号从0开始）
        const readOnlyRange = new vscode.Range(0, 0, 2, targetDoc.lineAt(2).text.length);
        
        // 检查每一处变更是否触及只读区域
        for (const change of event.contentChanges) {
            if (readOnlyRange.intersection(change.range)) {
                // 生成编辑操作恢复原始内容
                const restoreEdit = new vscode.WorkspaceEdit();
                restoreEdit.replace(
                    targetDoc.uri,
                    readOnlyRange,
                    targetDoc.getText(readOnlyRange)
                );
                vscode.workspace.applyEdit(restoreEdit);
                break;
            }
        }
    });

    // 切换活跃编辑器时更新装饰器显示
    const editorChangeListener = vscode.window.onDidChangeActiveTextEditor((editor) => {
        if (!editor) return;
        const currentDoc = editor.document;
        if (!['typescript', 'javascript'].includes(currentDoc.languageId)) return;

        // 生成前3行的装饰范围
        const decorationRanges = [0, 1, 2].map(lineNum => 
            new vscode.Range(lineNum, 0, lineNum, currentDoc.lineAt(lineNum).text.length)
        );
        editor.setDecorations(readOnlyDecoration, decorationRanges);
    });

    // 注册订阅，避免内存泄漏
    context.subscriptions.push(changeListener, editorChangeListener, readOnlyDecoration);
}

额外说明 #

• 可以根据需求调整文件类型过滤规则，或移除过滤逻辑支持所有文件
• 若需要更严格的只读控制，可以结合onWillSaveTextDocument事件提前拦截修改，减少回滚操作的视觉干扰

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