🐎

【VS Code 拡張機能開発】カーソル関連情報の取得方法まとめ

2022/11/30に公開

TypeScript

こんな VS Code 拡張機能を作りました。
日本語編集時のカーソル移動を高速化します。

カーソル位置や行の情報を取得するのに色々調べ回ったので以下備忘録。

カーソルの周辺情報

各種プロパティから Position を取得できる。

start：常に選択範囲の左上の Position
end：常に選択範囲の右下の Position
active：カーソルがある位置の Position
anchor：選択を開始した地点の Position

非選択状態だと、上記はすべて同じ Position になる。

このほかにも、選択状態か否かを判定する isEmpty や上図2枚目のように下から上に選択しているかを判定する isReversed、行を1つだけ選択しているかを判定する isSingleLine なども用意されている。

カーソルを移動させる

new Selection(anchor: Position, active: Position): Selection

始点と終点の Position を指定することで文字列を選択状態にできる。
始点と終点を同じにするとその Position に非選択状態でカーソルが移動する。

Position のインスタンスを生成するには行と列を指定してやる必要がある。
始点・終点を Position として使い回す必要がなければ、始点の行, 始点の列, 終点の行, 終点の列 をダイレクトに指定してやることでも同様の操作が可能。

new Selection(anchorLine: number, anchorCharacter: number, activeLine: number, activeCharacter: number): Selection

具体例

行インデックス0は「文書の1行目」なので表示される行番号とは1ズレる。
それに対して、列インデックス0は「行の先頭」。すなわちインデックスが「n 文字目の後ろ」に相当するので文字数とズレない。

extension.ts

import * as vscode from "vscode";
const editor = vscode.window.activeTextEditor;
if (editor) {
  editor.selection = new vscode.Selection(0, 0, 9, 10); // 文書の先頭から10行10文字目までを選択
}

下記でも同様の操作に相当。

extension.ts

import * as vscode from "vscode";
const editor = vscode.window.activeTextEditor;
if (editor) {
  const s = new vscode.Position(0, 0);
  const e = new vscode.Position(9, 10);
  editor.selection = new vscode.Selection(s, e); // 文書の先頭から10行10文字目までを選択
}

スクロール

new Selection() でカーソルを移動させてもスクロールは連動しないので手動で追従させる必要がある。

scroll で検索しても出てこないと思っていたらビルトインコマンドの revealLine を使用すればいいようなので簡単な関数を作る。

const scrollToLine = (line: number) => {
  vscode.commands.executeCommand("revealLine", {
    lineNumber: line,
    at: "center",
  });
};

at に top ／ center ／ bottom を指定すると画面上のどの位置までスクロールするかを制御できる。

カーソルの周辺情報

カーソルを移動させる

具体例

スクロール

Discussion