VSCode拡張機能を作ってみた

個人開発でいろいろなものを作っていると、それに最適ないろんな言語でコードを書くと思います。

そこで困るのが、「あれ、JSで連想配列のソートどうやるんだっけ」「NumPyのndarrayの結合どうなんだっけ」とか、ちょっと調べたいものがたくさん出てきます。

そういった時、ブラウザと行ったり来たりがめんどくさかったり、開いたサイトに良いコード例がなかったりすることがあるので、「検索ワードを入れるとその結果をコードを並べて表示してくれる」拡張機能を作りました。

自分自身ただのぺーぺーなので、もしアドバイス等ありましたらコメントいただけると飛び跳ねて喜びます。

作ったもの

検索ワードを入れると、その結果をコードを並べて表示してくれる拡張機能です

お試し気分で使ってみていただけると幸いです。

参考にした記事

公式ドキュメント

準備編

基本的にドキュメントに沿って進めれば問題ありませんでした。

npm install -g yo generator-code

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

yo code

を実行し、質問に答えて、雛形を生成します。

開発編

雛形を生成したら、src/extension.tsをコネコネしてオリジナルの拡張機能にしていきました。
結果を表示する部分にはWebvirePanelの公式サンプルを丸パクリ参考にさせていただきました。
このCatCodingというサンプルは猫がめちゃめちゃかわいいのでVSCodeAPIに興味がない人も見てみてください笑

公開編

公開に関しては

こちらのサイトがとても参考になりました。言われた通りにやっていると、気づいた時には僕の拡張機能がマーケットにありました。

まとめ

わかりやすい技術記事、公式のAPI、ドキュメントのおかげで、比較的簡単に拡張機能開発に挑戦することができました。
この記事を読んだ方が「こんな簡単なんだ！」となってくれたら嬉しいです。