hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > 雑なVSCode拡張を作ろう #kyotoasterisk

雑なVSCode拡張を作ろう #kyotoasterisk 

プレゼンモード
再生
← / →で移動
fでフルスクリーン
escでおわる

id:hitode909です．Kyoto.なんか #4 に飛び入りでLTするための資料です．

VSCode拡張を作ろう

  • ここ2ヶ月くらい早起きして作っている
  • 友達作りのため様子を紹介

自己紹介

はてなで働いている
Emacs→Atom→VSCode

練習

  • 祝日を挿入するコマンド

gyazo.com

const holidayList = "元日 成人の日 建国記念の日 春分の日 昭和の日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 体育の日 文化の日 勤労感謝の日 天皇誕生日 元日 成人の日 建国記念の日 建国記念の日 振替休日 春分の日 昭和の日 昭和の日 振替休日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 秋分の日 振替休日 体育の日 文化の日 勤労感謝の日 天皇誕生日 天皇誕生日 振替休日 元日 成人の日 建国記念の日 春分の日 昭和の日 憲法記念日 みどりの日 こどもの日 こどもの日 振替休日 海の日 山の日 山の日 振替休日 敬老の日 秋分の日 体育の日 文化の日 文化の日 振替休日 勤労感謝の日".split(/ /g);
vscode.window.showQuickPick(holidayList).then(item => {
    editor.edit(editBuilder => {
        editor.selections.forEach(selection => {
            editBuilder.insert(selection.start, item);
        });
    });
});

今日の日付.mdを開くやつ

  • ほかのエディタでも今日の日付.mdにメモを取っていた 10年分，2500ファイル
  • エディタを開く前にファイルを作る必要があるようだった
    • fs.closeSync(fs.openSync())
const path = expandHomeDir(`${dir}/${date()}.md`);
if (!fs.existsSync(path)) {
    fs.closeSync(fs.openSync(path, 'w+'));
}
const doc = await vscode.workspace.openTextDocument(path);
vscode.window.showTextDocument(doc, -1, true);

github.com

perlを編集中にコードのアウトラインを出してくれるやつ

https://github.com/hitode909/vscode-perl-outline/raw/master/images/screenshot.png
github.com

  • vscode.DocumentSymbolProviderを実装するとエディタにアウトラインを表示できる
    • (普通は静的解析して)パッケージ一覧や関数一覧を返していく
  • ポイント：雑な正規表現
    • 雑すぎてバグ報告がきてちょっと直した
  • 作りは荒くても動けば便利
    // TODO: replace with better regexp
    private get pattern() {
        return /(^package|\bsub|\bsubtest)\b +([^ ;\n'"{]+|(['"].+['"])+)/gm;
    }

古いタブを順番に閉じてくれるやつ

https://github.com/hitode909/vscode-zentabs/raw/master/images/screenshot.gif
github.com

  • Atomのzentabsが便利だったのでほしかった
  • タブの一覧を得るAPIがない
    • フォーカスが当たるたびに記録していく
  • ほかのタブを閉じるAPIがない
    • まずアクティブにする→閉じる→もといたタブに戻る
  • 失敗すると振動してなにもできなくなる
  • 分割したウィンドウごとにn件ずつ保持してほしいというissueをもらえた
    • リリースしてほったらかしにしてたら要望もらえた

作り方

  • yo codeする
% yo code
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)
  • .vscode/launch.jsonが仕込まれているのでデバッガから起動できる
    • 新しいウィンドウが立ち上がる
  • ブレイクポイントとか普通に使えて快適

f:id:hitode909:20180818092313p:plain

ほかのエディタとの比較

VS Emacs

  • TypeScriptで書けるのでnode modulesの資産を使える
  • async/awaitで非同期処理を簡単に書ける
  • 歴史が浅いので足りないAPIが足りなかったりする

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20150903/20150903172115.gif

Emacsのウィンドウが勝手にびよんびよんなってたのしいやつ - hitode909の日記

VS Atom

  • VSCodeはAtomとちがってあまり無茶できないので治安が保たれている
    • Atomはwindow.atomからなんでもできたり，Viewを出すのもdivだったり
    • VSCodeでは突然marqueeを出したりできない(はず)

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20161108/20161108211209.gif

EmacsからAtomに乗り換えた - hitode909の日記

Eclipseプラグイン

  • ほしいAPIをひたすら探す宝探しっぽい雰囲気が似てる
  • デバッガの充実感が似てる

歩き方

  • 公式のチュートリアル

Your First Visual Studio Code Extension - Hello World

  • リリースブログのAPIコーナー
  • API
  • ふだん使ってるVSCode拡張の実装を読む
    • 案外雑だったりする，元気を出して雑なコードを書ける
      • 1行ずつにスライスしてから正規表現でマッチさせていて効率が悪かったり

VSCode拡張を作るのはおすすめ

  • 最高の開発環境が突然手に入るのでテンションが上がる
  • 歴史が浅いのでほしい拡張はだいたいない，ブルーオーシャン
    • Emacs, Vim, Atom拡張を作ってる友達はたくさんいるけどVSCode拡張を作ってる友達いはいない，友達になりましょう
  • 拡張が「作者名.拡張名」とネームスペースが切られている
    • 主語が大きいかも?と気にする必要がない
  • そこそこフィードバックもらえてモチベーションを保ちやすい
  • 便利グッズを作ると日々の生産性が向上するプリミティブな喜び