如何让输入中的CSS属性按长度自动动态排序？

你要的这种「输入时属性行越长越往上挪」的自定义排序逻辑，得靠编辑器的自定义脚本/扩展来实现，下面以VS Code（最常用的CSS编辑器）为例给出两种方案：

方案一：实时自动触发（VS Code扩展） #

这个方案能在你输入时自动检测长度并调整位置，完全符合你的需求：

1. 用VS Code的「Yeoman Generator for Code」快速生成一个扩展基础项目
2. 替换extension.ts里的代码为以下内容：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let timeout: NodeJS.Timeout | undefined;
    // 监听文档文本变更，加防抖避免快速输入时频繁触发
    const disposable = vscode.workspace.onDidChangeTextDocument(event => {
        const doc = event.document;
        if (doc.languageId !== 'css') return;

        const editor = vscode.window.activeTextEditor;
        if (!editor) return;

        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            const selection = editor.selection;
            const currentLine = doc.lineAt(selection.active.line);
            const fullText = doc.getText();
            const ruleRegex = /([^{]+)\{([\s\S]*?)\}/g;
            let match;

            while ((match = ruleRegex.exec(fullText)) !== null) {
                const blockStart = doc.positionAt(match.index + match[1].length);
                const blockEnd = doc.positionAt(match.index + match[0].length);
                // 检查当前编辑行是否在目标规则块内
                if (currentLine.range.isWithin(blockStart, blockEnd)) {
                    // 提取所有非注释的属性行
                    const props = match[2]
                        .split('\n')
                        .map(line => line.trim())
                        .filter(line => line && !line.startsWith('/*') && !line.endsWith('*/'));
                    
                    // 按行长度从长到短排序
                    const sortedProps = props.sort((a, b) => b.length - a.length);
                    // 重新拼接规则块内容，保留缩进
                    const newBlockContent = sortedProps.map(prop => `    ${prop}`).join('\n');
                    const newRule = `${match[1]}{\n${newBlockContent}\n}`;
                    
                    // 更新文档内容
                    const ruleRange = new vscode.Range(
                        doc.positionAt(match.index),
                        doc.positionAt(match.index + match[0].length)
                    );
                    editor.edit(edit => edit.replace(ruleRange, newRule));
                    break;
                }
            }
        }, 200);
    });

    context.subscriptions.push(disposable);
}

export function deactivate() {}

3. 将扩展打包安装到你的VS Code中，之后编辑CSS时，输入的属性行长度超过上方行就会自动上移，直到到达最顶部。

方案二：手动触发（无需写扩展） #

如果不想折腾扩展，可通过VS Code插件实现手动触发排序，适合不需要完全实时的场景：

1. 安装multi-command插件
2. 在settings.json中添加以下配置，绑定快捷键手动触发排序：

"multiCommand.commands": [
    {
        "command": "sortCssPropsByLength",
        "sequence": [
            "editor.action.selectToBracket",
            "editor.action.clipboardCopyAction",
            // 可配合自定义脚本处理复制的属性行，按长度排序后粘贴
            // 此步骤需额外编写简单脚本实现排序逻辑
            "editor.action.clipboardPasteAction"
        ]
    }
],
"keybindings": [
    {
        "command": "sortCssPropsByLength",
        "key": "ctrl+shift+s",
        "when": "editorLangId == css"
    }
]

注意事项 #

• 两种方案都会忽略注释行，避免打乱注释位置
• 实时方案的防抖时间可自行调整，数值越小响应越快，但可能增加卡顿感
• 排序依据是属性行的整体字符长度（包含属性名、值、分号、!important等内容）

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