TypeScript playgroundでVimのキーバインドを有効にする

Yosuke Kurami
3 min readApr 9, 2020

もうタイトルのまんまです。ただ触ってみる、というだけであれば https://www.typescriptlang.org/v2/play?install-plugin=ts-playground-plugin-vim からどうぞ。

TypeScriptを書いているとき、ちょっとしたスニペットだったりいわゆる型パズルのような「1ファイルで済み、コンパイラのエラー有無が確認できれば十分!」といったときはTypeScript Playground を使うことが多いです。

PlaygroundはTS本家のwebサイトの1コンテンツですが、2019年の末頃からwebサイトのリニューアル活動が活発に行われています。例えば翻訳コンテンツの充実だったりハンドブックの作り直しなどが進行中なのですが、この流れでPlaygroundも新しくなっています。新Playgroundにはplugin機構が搭載されました。どんなことができんの?っていうのについては、Lekoさんの登壇資料がわかりやすいです。

折角なので、僕も一個pluginを作ってみました。エディタ部分にVimキーバインドを当てる君です。https://www.typescriptlang.org/v2/play?install-plugin=ts-playground-plugin-vim を叩くと「pluginをインストールしても良い?」ってプロンプトが聞いてくるので、yesを選択して、「use vim mode」をクリックするだけです。

Playground Pluginについては、2ヶ月ほど前に素振りしたことがあったし、monaco editor(Playgroundのエディタとして使われてるアイツ)にVimキーバインドを当てる部分については既にブツが存在していたのでそのまま使わせてもらいました。実質1時間程度で作れました。もっと早く作っときゃよかった。

ちょっとビルドの都合上、NPMから持ってきたmonaco-vimだと厳しかったので、一旦ソースを拝借させてもらいましたが。

キーバインド部分のソース眺めた感じ、CodeMirrorのVimバインディングと同程度のことは実装されていそうです。

Playground Pluginとしてのソースはこちらからどうぞ。

--

--

Yosuke Kurami

Front-end web developer. TypeScript, Angular and Vim, weapon of choice.