序言

入坑VS Code前，我已經是一名久經考驗的Emacs老用户了，因此開始正式使用VS Code後，我第一時間啓用了它的Emacs Keymap。但不久我便發現，這套鍵映射缺少一個重要的快捷鍵——ctrl-l。

在Emacs中，ctrl-l對應的命令是recenter-top-bottom，它用於將光標所在的行輪替地滾動到可視區域（即Emacs中的window）的中間、頂部，以及底部（如下圖所示）

這是我高頻使用的一個功能，尤其是跳轉到函數的定義的首行後，我習慣於連按兩次，將其滾動到window的頂部以便在一屏中看到儘量多的內容。

為了避免重複發明輪子，我先搜索了一番，找到了一個宣稱實現了該功能的擴展Recenter Top Bottom。可惜的是，安裝後並不生效。

難道只能委屈自己用鼠標小心翼翼地將光標所在行滾到頂部了嗎？當然不是。既然沒有開箱即用的，那便自己寫一個VS Code的擴展實現這個功能吧。

年輕人的第一個VS Code擴展

創建VS Code擴展的項目

要想入門VS Code擴展的開發，官方便提供了一份不錯的教程。一個擴展有許多的“八股文”代碼，可以用yo和generator-code來快速生成

npm install -g yo generator-code
yo code

到這裏，便得到了一個名為helloworld的目錄了。用VS Code打開它，接下來要在其中大展身手。

實現將光標所在行垂直居中的功能

VS Code擴展的核心邏輯定義在文件src/extension.ts中。在yo生成的示例代碼中，用registerCommand註冊了一個名為helloworld.helloWorld的命令，其邏輯是簡單地在右下角彈出一句Hello VS Code from HelloWorld!。這個回調函數，便是業務邏輯的落腳點。

要想實現將光標所在行滾動到中間的功能，首先要知道VS Code為開發者提供了哪些支持。在摸索了一通從VS Code的API文檔後，我有了以下的線索：

1. 通過vscode.window.activeTextEditor可以取得當前聚焦的編輯器——其值可能為空（undefined）；
2. TextEditor實例的屬性.selection.active可以取得當前光標的位置；
3. TextEditor實例有一個方法revealRange可以滾動文本來改變展示的範圍，它需要一個vscode.Range類的實例，以及一個vscode.TextEditorRevealType類型的枚舉值；
4. vscode.TextEditorRevealType.InCenter的效果是將所給定的範圍展示在中間，vscode.TextEditorRevealType.AtTop則是置頂。

有了這些知識儲備，實現這樣的一個回調函數便是信手拈來的事情了

function recenterTop() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return;
  }
  const cursorPosition = editor.selection.active;
  editor.revealRange(new vscode.Range(cursorPosition, cursorPosition), vscode.TextEditorRevealType.InCenter);
}

由於暫時沒有配置該命令的快捷鍵，只能用VS Code的命令面板來調用

實現將光標所在行置頂的功能

接下來我將實現連續調用兩次helloworld.helloWorld命令，把光標所在行滾動到頂部的效果。在Emacs中，可以很輕鬆地知道一個命令是否被連續運行——Emacs有一個名為last-command的變量存儲着上一個命令的名稱，只需要檢查其是否等於recenter-top-bottom即可。但VS Code沒有暴露這麼強大的功能，只能另闢蹊徑。

我的策略是，如果調用helloworld.helloWorld時光標的位置，與上一次調用該命令時的位置相同，就認為是連續調用。為此，需要兩個在函數recenterTop之外定義的變量：

1. previousPosition負責記錄上一次調用recenterTop時光標的位置，它的初始值為null；
2. revealType存儲着上一次調整展示範圍時傳遞給TextEditor實例的revealRange方法的第二個參數的值，它的初始值也為null。

我的目標是儘量模擬Emacs中的recenter-top-bottom所具備的、交替使用居中、置頂效果的特點，因此：

1. 如果revealType為null，意味着這是第一次調用recenterTop，那麼效果便是居中。否則；
2. 如果這一次與上一次的光標位置不同，意味着在上一次調用recenterTop後調用過其它命令，效果依然是居中。否則；
3. 如果revealType已經是居中了，就改為置頂。否則；
4. 將revealType改為居中。

Talk is cheap. Show me the code.

let previousPosition: null|vscode.Position = null;
let revealType: null|vscode.TextEditorRevealType = null;

function recenterTop() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) {
    return;
  }
  const cursorPosition = editor.selection.active;
  if (!revealType) {
    revealType = vscode.TextEditorRevealType.InCenter;
  } else if (previousPosition && !cursorPosition.isEqual(previousPosition)) {
    revealType = vscode.TextEditorRevealType.InCenter;
  } else if (revealType === vscode.TextEditorRevealType.InCenter) {
    revealType = vscode.TextEditorRevealType.AtTop;
  } else {
    revealType = vscode.TextEditorRevealType.InCenter;
  }
  previousPosition = cursorPosition;
  editor.revealRange(new vscode.Range(cursorPosition, cursorPosition), revealType);
}

定義快捷鍵

通過命令面板來使用不是我的最終目標，通過快捷鍵才是。根據VS Code的文檔可以知道，只要在package.json的contributes對象中，新增名為keybindings的屬性，並定義命令及按鍵序列即可。

{
  // 此處省略其它不必要的屬性
  "contributes": {
    "keybindings":{ // 新增屬性
      "command": "helloworld.helloWorld",
      "key": "ctrl+l"
    }
  }
}

後記

如果看過我之前的文章《手指疼，寫點代碼緩解一下》的讀者應當會記得，我已經從Emacs Keymap“叛逃”到了Vim Keymap了。所以，我並沒有真正用上上述的VS Code擴展。相反，目前高頻使用的是Vim Keymap內置的z-.以及z-↵了——前者用於垂直居中，後者用於置頂。

愛護手指，從使用Vim Keymap做起。

閲讀原文