Young people’s first vscode expansion



Into the pitVS CodeBefore, I was already a well tested teacherEmacsOld users, so began to useVS CodeAfter that, I started it for the first timeEmacs Keymap. But I soon found out that this set of key mappings lacked an important shortcut——ctrl-l

stayEmacsIn the middle,ctrl-lThe corresponding command isrecenter-top-bottom, which is used to scroll the row where the cursor is in alternately to the visible area (i.eEmacsInwindow)The middle, top, and bottom of the

Young people's first vscode expansion

This is a function that I use frequently, especially after jumping to the first line of the definition of a function, I’m used to pressing twice to scroll it towindowTo see as much content as possible in one screen.

To avoid reinventing the wheel, I searched and found an extension that claims to implement the functionRecenter Top Bottom. Unfortunately, it doesn’t work after installation.

Can you only aggrieve yourself by carefully rolling the cursor line to the top with the mouse? Of course not. Since there is no one to use out of the box, write one by yourselfVS CodeLet’s extend this function.

The first vs code extension for young people

Create project for vs code extension

To get startedVS CodeExpansion of the development, the official will provide a good referencecourse. An extension has a lot of “eight part essay” code, you can useyoandgenerator-codeTo quickly generate

npm install -g yo generator-code
yo code

Here, you get a namehelloworldI’ve got my catalog. useVS CodeOpen it, and then you’re going to do something about it.

Realize the function of center the cursor line vertically

VS CodeThe core logic of the extension is defined in the filesrc/extension.tsIn the middle. stayyoIn the generated sample code, useregisterCommandRegistered ahelloworld.helloWorldThe logic of the command is simply to pop up a sentence in the lower right cornerHello VS Code from HelloWorld!. This callback function is the foothold of business logic.

To realize the function of scrolling the cursor line to the middle, you need to knowVS CodeWhat support is provided for developers. After groping for a pass fromVS CodeOfAPI documentationAfter that, I had the following clues:

  1. adoptvscode.window.activeTextEditorYou can get the currently focused editor – its value may be empty(undefined);
  2. TextEditorProperties of the instance.selection.activeThe current cursor position can be obtained;
  3. TextEditorExample has a methodrevealRangeYou can scroll through the text to change the scope of the presentation. It needs avscode.RangeClass, and avscode.TextEditorRevealTypeEnumeration value of type;
  4. vscode.TextEditorRevealType.InCenterThe effect is to show the given range in the middle,vscode.TextEditorRevealType.AtTopIt’s at the top.

With these knowledge reserves, it is easy to implement such a callback function

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

Because there is no shortcut key configured for this command, you can only use theVS CodeTo call the

Young people's first vscode expansion

The function of placing the cursor on the top of the line is realized

Next, I’ll implement two consecutive callshelloworld.helloWorldCommand to scroll the cursor line to the top. stayEmacsIt’s easy to know whether a command is running continuously or not——EmacsThere’s one calledlast-commandThe variable of stores the name of the last command, just check whether it is equal torecenter-top-bottomThat’s it. butVS CodeWithout exposing such powerful functions, we can only find another way.

My strategy is, if you callhelloworld.helloWorldIf the position of the cursor is the same as that of the previous call, it is considered as a continuous call. To do this, you need two functions in therecenterTopVariables defined outside:

  1. previousPositionResponsible for recording the last callrecenterTopThe position of the time mark, its initial value isnull
  2. revealTypeIt stores the information that was passed to theTextEditorInstancerevealRangeThe value of the second parameter of the method, whose initial value is alsonull

My goal is to simulate as much as possibleEmacsInrecenter-top-bottomIt has the characteristics of alternate use, center and top effect

  1. IfrevealTypebynull, which means that this is the first callrecenterTopThen the effect is in the middle. Otherwise;
  2. If the cursor position is different from the previous one, it means that therecenterTopAfter calling other commands, the effect is still centered. Otherwise;
  3. IfrevealTypeIt’s already in the middle, so it’s on the top. Otherwise;
  4. takerevealTypeChange to center.

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) {
  const cursorPosition =;
  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);

define custom keyboard shortcut

It’s not my ultimate goal to use the command panel, it’s my shortcut. according toVS CodeOffileYou can know, as long as youpackage.jsonOfcontributesObject, a new object namedkeybindingsAnd define the command and key sequence.

  //Other unnecessary attributes are omitted here
  "contributes": {
    "Keybinding": {// new attribute
      "command": "helloworld.helloWorld",
      "key": "ctrl+l"


If you read my previous articlesFinger pain, write some code to ease itAs you will remember, I have learned fromEmacs KeymapIt’s time for defectionVim KeymapIt’s too late. So, I didn’t really use the aboveVS CodeExpansion. On the contrary, high frequency is currently usedVim KeymapBuilt well asz-↵The former is used for vertical center, the latter is used for top.

Take good care of your fingersVim KeymapStart.

Read the original