vscode拡張機能としてhoverを実装する

• 概要
• ベースとするソースコードの入手
• importの追加
• 初期化処理の編集
• hover用関数を実装
• hover用関数をサーバに登録
• Hoverレスポンスの構造

概要

vscode拡張機能にhoverを実装するために以下を行う。 今回はlanguage serverとして実装する。
* ベースとするソースコードの入手
* 初期化処理の編集
* hover関数を実装
* hover関数をサーバに登録

ベースとするソースコードの入手

以下のリポジトリをクローンして、lsp-sampleのソースコードを使用する。
クローン後にmoduleをインストールする。

github.com

$ git clone https://github.com/microsoft/vscode-extension-samples.git
$ cd vscode-extension-samples/lsp-sample
$ npm install

その後vscodeでこのvscode-extension-samples/lsp-sampleを開く。

以下ではserver/src/server.tsを編集していく。

importの追加

以下のようにHoverParamsを追加でimportする。

import{
    createConnection,
    TextDocuments,
    Diagnostic,
    DiagnosticSeverity,
    ProposedFeatures,
    InitializeParams,
    DidChangeConfigurationNotification,
    CompletionItem,
    CompletionItemKind,
    TextDocumentPositionParams,
    TextDocumentSyncKind,
    InitializeResult,
    HoverParams,// ここを追加
    Hover   // ここを追加}from'vscode-languageserver/node';

初期化処理の編集

初期化時に設定するcapabilitiesにhoverの設定を追加する。server.tsの67行目あたりに追加すればよい。

// for hover
result.capabilities.hoverProvider =true;

hover用関数を実装

hover用の関数を実装する。 server.tsの適当な場所に以下を追記する。

// for hoverasyncfunction HoverSample(params:HoverParams): Promise<Hover>{var contents ="# Hover Test!\nyour hover!!!"var range ={
        start: { line: params.position.line, character: params.position.character },
        end : { line: params.position.line, character: params.position.character+5}}return{
        contents,
        range,}}

hover用関数をサーバに登録

実装した関数をサーバに登録する。server.tsの適当な場所に以下を追記する。

// for hover
connection.onHover(params => HoverSample(params));

以上でhoverの実装ができた。

Ｆ５で拡張機能を起動し、Plain Textファイルの適当なところにマウスを持っていくとhoverで文字列が表示されるはず。

Hoverレスポンスの構造

Hoverリクエストの結果として返すデータ構造を見ていく。
以下のサイトを参考にする。
Specification

Hoverは以下の構造になっている。

/** * The result of a hover request. */exportinterface Hover {/**    * The hover's content    */
    contents: MarkedString | MarkedString[] | MarkupContent;/**    * An optional range is a range inside a text document    * that is used to visualize a hover, e.g. by changing the background color.    */
    range?: Range;}

• contentsは以下の定義で、文字列で指定できる。

type MarkedString =string | { language: string; value: string};

• rangeは以下の形式で、hoverの対象となる文字列がドキュメントのどの位置にあるかを示す。

interface Range {/**    * The range's start position.    */
    start: Position;/**    * The range's end position.    */
    end: Position;}interface Position {/**    * Line position in a document (zero-based).    */
    line: uinteger;/**    * Character offset on a line in a document (zero-based). The meaning of this    * offset is determined by the negotiated `PositionEncodingKind`.    *    * If the character value is greater than the line length it defaults back    * to the line length.    */
    character: uinteger;}

今回はHoverで通知する情報はほぼ固定だったが、これらの値を変更することで必要な情報をhoverで通知できる。