🐥

エディタのテキストをリアルタイムでパネルに出力

2021/08/24に公開

VS Code

tech

趣旨

バロウズはハサミとノリを使ったが、ジョイスは機械支援を受けられなかった。
一方ロシアは鉛筆を使った。

目的

VS Code の拡張を使って、エディタの画面でぽちぽちと文字を打っていくと、横のパネルにぽつぽつと出力されていくものをつくる。

動機

素人がとりあえずやってみたくなっても、手っ取り早いサンプルがあんまりない。

こういうの

つくる

これにパネルを足したもの

エディタのテキストをリアルタイムでDEBUG CONSOLEに出力

とりあえずコード

src/extension.ts

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  //パネルを作成する
  let panelGenerator = vscode.commands.registerCommand('write-on-panel.generate', () => {
    const panel = vscode.window.createWebviewPanel(
      'openPreview',
      'Preview test',
      vscode.ViewColumn.Two,
      {enableScripts: true}
    );

    //エディタの内容を取得、パネルに反映
    const updateWebview = ()=>{
      panel.webview.html = generatePanelContent();
    };

    //イベントリスナ
    let activeEditor = vscode.window.activeTextEditor;

    //テキストが変動したら更新
    vscode.workspace.onDidChangeTextDocument(event => {
      if (activeEditor && event.document === activeEditor.document){
        updateWebview();
      }
    });

    //テキストがセーブされたとき更新
    vscode.workspace.onDidSaveTextDocument( event => {
      if (activeEditor && event === activeEditor.document){
        updateWebview();
      }
    });

    //カーソルが移動したら更新
    vscode.window.onDidChangeTextEditorSelection(event => {
      if (activeEditor && event.textEditor === activeEditor){
        updateWebview();
      }
    });

  });
  context.subscriptions.push(panelGenerator);
}

function generatePanelContent(){
  let activeEditor = vscode.window.activeTextEditor;
  let text :string = "";
  if (activeEditor){
    text = activeEditor.document.getText();
  }
  return `<!DOCTYPE html>
  <html lang="jp">
    <head>
      <title>Example Webview</title>
    </head>
    <body>
    ${text}
    </body>
  </html> `;
}

export function deactivate() {}

vscode.window.createWebViewPanel でpanelという名前のWebViewを作成。

const panel = vscode.window.createWebviewPanel(
      'パネルの名前（内部用）',    
      'パネルのタイトル',
      vscode.ViewColumn.Two, //パネルは番号で配置が決まっている。Twoは右パネル
      {enableScripts: true}  //パネル内でのjavascript の実行を許可
    );

html の書かれた文字列、html_content を突っ込む

panel.webview.html = html_content

ことで、WebViewが更新される。
投入するhtmlはお好みでつくる。

とりあえずぽつぽつ動く。

エディタのテキストをリアルタイムでパネルに出力

趣旨

目的

動機

こういうの

つくる

コード

参考

Discussion