徒然

VSCodeのサイドバーで簡易メモを取る

開発中は基本的にVSCodeを開いているので、簡易なメモ置き場があればなーと。新規ファイルを作るまでもないし、Tab切り替えや再起動の際に残ってなくても構わないメモが個人的に結構あって、簡単にできそうだったので作ってみた。

コミュニティに公開せずに個人で使うため、動作していればとりあえずOK。

サイドバーに常駐させた拡張機能 — セカンダリーサイドバーに常駐させて使っている

ジェネレーターをインストール

YeomanとVSCode Extension Generatorをインストール。

npm install -g yo
npm install -g generator-code

雛形プロジェクト作成

ガイド通りに進める。

yo code

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? temp-note
? What's the identifier of your extension? temp-note
? What's the description of your extension? temp note
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm

作成されたフォルダがVSCodeで開かれるので、src/extension.tsを編集。
公式サンプルが充実しているので、そちらを見ながらの方がわかりやすい。

今回はExplorer機能を使って実装。

src/extension.ts

// extension.ts
import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider(
      "tempMemo.view",
      new WebViewProvider(context.extensionUri)
    )
  );
}

class WebViewProvider implements vscode.WebviewViewProvider {
  constructor(private extensionUri: vscode.Uri) { }

  public resolveWebviewView(webviewView: vscode.WebviewView) {

    webviewView.webview.options = {
      enableScripts: true
    };

    const styleUri = webviewView.webview.asWebviewUri(
      vscode.Uri.joinPath(this.extensionUri, "media", "main.css")
    );

    webviewView.webview.html = `
      <!DOCTYPE html>
      <html lang="ja">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>メモ</title>
        <link rel="stylesheet" href="${styleUri}"
      </head>
      <body>
      <textarea id="myTextarea" class="textarea"></textarea>
      <script>
        document.getElementById('myTextarea').focus();
      </script>
      </body>
      </html>
    `;
  }
}

media/main.css

.textarea {
  background-color: transparent;
  box-sizing: border-box;
  border: none;
  color: white;
  line-height: 1.6;
  height: 100vh;
  width: 100%;
}

textarea:focus {
  resize: none;
  border: none;
  outline: 0;
}

repositoryを設定しておかないとパッケージ化できないので注意。

package.json

{
  …
  "main": "./dist/extension.js",
  "contributes": {
    "views": {
      "explorer": [
        {
          "type": "webview",
          "id": "tempMemo.view",
          "name": "メモ",
          "icon": "media/ghost.svg" //サイドバーに表示するアイコン
        }
      ]
    }
  },
  …
  "repository": { //git repositoryがないとパッケージ化できないので追加
    "type": "git",
    "url": "git://github.com/username/repository.git"
  }
}

license作成

ルートディレクトリにLICENSEを作成する。
LICENSE.md、LICENSE.txtでも可。

touch LICENSE

パッケージ化

vsce package

拡張機能をインストール