詳解vscode刪除行相關功能

一、vscode刪除行號

1、介紹

在進行代碼編寫時，行號是十分重要的一部分。但在某些特殊需求下，我們可能需要將行號刪除。在vscode中，刪除行號非常簡單。雙擊vscode編輯器的左邊欄，在彈出的菜單中點擊「刪除行號」即可。

2、代碼示例：

<script>
    editor.updateOptions({lineNumbers: "off"});
</script>

二、vscode刪除行的快捷鍵

1、介紹

在開發過程中，頻繁地刪除行是常有的事情。如果每次都要通過菜單或者滑鼠選擇刪除行，效率會非常低下。這時可以藉助vscode提供的快捷鍵來完成刪除操作。在Windows下，使用快捷鍵「Ctrl+Shift+K」可以刪除當前行。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const selection = editor.getSelection();
        editor.getModel().applyEdits([
            {
                range: selection,
                text: "",
            }
        ]);
    });
</script>

三、vscode刪除行尾空格

1、介紹

在寫代碼的過程中，尾隨空格是一個很容易出現但難以發現的錯誤。如果不能及時地刪除這些多餘的空格，也會影響代碼的質量。在vscode中，可以通過設置快捷鍵來刪除行尾的空格。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const selection = editor.getSelection();
        const trailingWhitespace = editor.getModel().getValueInRange(
            new monaco.Range(selection.endLineNumber, selection.endColumn, selection.endLineNumber, Number.MAX_VALUE)
        ).match(/^\s+/);
        if (trailingWhitespace) {
            editor.getModel().applyEdits([
                {
                    range: new monaco.Range(selection.endLineNumber, trailingWhitespace.index + 1, selection.endLineNumber, Number.MAX_VALUE),
                    text: "",
                }
            ]);
        }
    });
</script>

四、vscode刪除行前空格

1、介紹

除了行尾空格，行首空格也是經常需要清除的。和行尾空格一樣，我們可以使用快捷鍵清除行首的空格。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const selection = editor.getSelection();
        const leadingWhitespace = editor.getModel().getValueInRange(
            new monaco.Range(selection.startLineNumber, 1, selection.startLineNumber, selection.startColumn)
        ).match(/\s+$/);
        if (leadingWhitespace) {
            editor.getModel().applyEdits([
                {
                    range: new monaco.Range(selection.startLineNumber, 1, selection.startLineNumber, leadingWhitespace[0].length + 1),
                    text: "",
                }
            ]);
        }
    });
</script>

五、vscode刪除行中的換行符

1、介紹

有時候在編寫代碼時，我們會將一行的代碼分成多行，這時不可避免地會產生換行符。如果需要將這些代碼整合成一行，我們需要刪除這些換行符。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const selection = editor.getSelection();
        const text = editor.getModel().getValueInRange(selection);
        const newText = text.replace(/[\r\n]/g, "");
        editor.getModel().applyEdits([
            {
                range: selection,
                text: newText,
            }
        ]);
    });
</script>

六、vscode刪除多餘空行

1、介紹

在代碼中，連續的多行空行會讓代碼顯得十分臃腫。如果要刪除這些多餘的空行，我們可以藉助vscode提供的快捷鍵。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const lines = editor.getModel().getLinesContent();
        const newLines = [];
        let foundFirst = false;
        for (let i = 0; i < lines.length; i++) {
            const line = lines[i];
            if (line.trim() === "" && foundFirst) {
                continue;
            }
            newLines.push(line);
            foundFirst = true;
        }
        editor.getModel().applyEdits([
            {
                range: new monaco.Range(1, 1, Number.MAX_VALUE, Number.MAX_VALUE),
                text: newLines.join("\n"),
            }
        ]);
    });
</script>

七、vscode刪除空白行

1、介紹

與多餘的空行類似，空白行也會讓代碼顯得不夠緊湊。如果需要刪除代碼中的空白行，可以使用快捷鍵來實現。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const lines = editor.getModel().getLinesContent();
        const newLines = [];
        for (let i = 0; i < lines.length; i++) {
            const line = lines[i];
            if (line.trim() === "") {
                continue;
            }
            newLines.push(line);
        }
        editor.getModel().applyEdits([
            {
                range: new monaco.Range(1, 1, Number.MAX_VALUE, Number.MAX_VALUE),
                text: newLines.join("\n"),
            }
        ]);
    });
</script>

八、vscode刪除多行

1、介紹

在vscode中，我們可以快速地刪除多行代碼。只需要選中多行代碼，使用快捷鍵即可。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, () => {
        const selection = editor.getSelection();
        editor.getModel().applyEdits([
            {
                range: new monaco.Range(selection.startLineNumber, 1, selection.endLineNumber, Number.MAX_VALUE),
                text: "",
            }
        ]);
    });
</script>

九、vscode整行刪除選取

1、介紹

在vscode中，除了上述的刪除操作，我們還可以整行刪除選中的部分。只需使用快捷鍵，即可實現在代碼中快速刪除整行。

2、代碼示例：

<script>
    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_D, () => {
        const selection = editor.getSelection();
        editor.getModel().applyEdits([
            {
                range: new monaco.Range(selection.startLineNumber, 1, selection.endLineNumber + 1, Number.MAX_VALUE),
                text: "",
            }
        ]);
    });
</script>