hitode909の日記

趣味はマリンスポーツですの日記です

雑な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拡張を作ってる友達いはいない,友達になりましょう
  • 拡張が「作者名.拡張名」とネームスペースが切られている
    • 主語が大きいかも?と気にする必要がない
  • そこそこフィードバックもらえてモチベーションを保ちやすい
  • 便利グッズを作ると日々の生産性が向上するプリミティブな喜び

Perl用のLanguage::Serverを試した

ところどころおかしいけど,そこそこ動いて感動した. perlって名前だけど,Perl用のLanguageServerを使うための拡張.

marketplace.visualstudio.com

おかしい

perl -cしているだけなので,手元の環境をDocker化していると動かない.CPANから入れたモジュールがみつかりませんと言って止まる.Docker化してない,CPANに上げてるモジュールは動いた.find all referenceが動くのと,outlineを出してくれる.

正規表現でがんばるperl-outlineを作っていたけど,明らかにPPIでパースするほうが筋がよい.

また,wordの分割がおかしいのか,PPIへの参照を探すと,PPI::Documentもヒットしてしまう.::でトークンが分割されてしまっているように見える.

f:id:hitode909:20180817110727p:plain

やったらよさそうなこと

  • Dockerでも動かすには,使う側の工夫で,perlをdocker-compose execのエイリアスにするとよいのかも? ほかの言語のLnaguage Serverの様子も見てみる
  • wordの抽出はサーバー側の責務なので,Perl::LanguageServerを直せばよさそう.

同僚と話していて,料理の味が何段階あるかって話で,「めっちゃうまい」「うまい」「暴力的」「最悪」の4種類くらいの評価がある,という話になった.
最近は僕は塩分濃度が気になっていて,塩がどれくらい効いているかを評価項目に入れている.
めっちゃうまいスープがあるとして,これだけ塩が入ってたらうまいに決まっている,よって減点,みたいな.
塩味がなかったらヘルシー指向ではあるけど,うまみが足りなかったりすると,高尚すぎて,よって減点.
あとは温度も重要で,こないだカレーの本を読んでたら,口に入れる前の香りをこれくらいにするために,温度をこうしている,みたいな話があった.
家で料理作っていて一番悲しいのが,時間をかけて作った料理が,皿に盛る順番を間違って冷めてしまうこと.
熱々で食べるべきなのに冷めた料理については,料理に対しての減点ではなくて,食べる人物や,作った人物に対して,非情にも減点が言い渡される.

怒り

ふだん,あまり怒るようなことはないのだけど,きのう怒りを感じたのが,最近アイスを買いすぎていて,家の冷凍庫がアイスであふれている.
氷を作ろうとして製氷機を取り出すと,ハーゲンダッツがどんどん飛び出してくる.
早くハーゲンダッツ食べないとハーゲンダッツへの怒りで身を滅ぼすことになりそう.