VSCodeで今聞いている曲が手軽にわかる拡張機能を作った
VSCode-music-status
VSCodeのステータスバーに、現在再生中の曲の情報を表示し、クリックするとその曲の詳細がわかるサイトに飛べる拡張機能を作成しました。
VSCodeの拡張機能を作成するのは初めてだったのですが、小一時間で手軽に自分の望む機能を実装できたので紹介します
GitHub
完成品のリンクです。
starしてもらえたらうれしいです！
詳しい使い方はREADMEを読んでください。
そもそも何をしているのか
再生中の音楽はLast.fmのAPIを使って取得しています。
Last.fmは、音楽の再生履歴を記録してくれるサービスです。
例えば私のアカウントはこんなかんじです。
めちゃくちゃ好きなサービスなので皆さん使ってください。
使用するには、Last.fmのAPIキーが必要です。
また、Last.fm Terms of Serviceに従って使用してください。
気軽に拡張機能を作る
VSCodeの拡張機能って、めちゃくちゃ簡単に作れます。
npm install -g yo generator-code
yo code
これだけ実行するといろいろ聞いてくるので、答えていくだけでひな形が作成されます。
私は最初pnpmでやろうとしたんですが後述する拡張機能のpackage化で詰まったので、とりあえずnpmで雰囲気をつかむのが良いかと思います。
拡張機能の本体はsrc/extension.tsです。こいつに良い感じにTypeScriptを書いてやるだけで動きます。(F5で気軽にデバッグしながら動かせます)
公式のsampleがだいぶ充実しているので、あんまり詰まることはなさそうです
インストール
とりあえず手元のVSCodeで使うにはpackagingする必要があります。
vsceというツールを使います。
dockerで動かした方がいいかもしれません。
vsce package
を実行すると、.vsixファイルが作成されるので、これをインストールするだけでVSCodeで自分の拡張機能が動きます。やったー！
これをマーケットプレイスに公開するにはさらに結構手順が必要なので、公式ドキュメントを貼っておきます。
vsceを用いたパッケージの公開のほかに、MarketPlaceで直接.vsixを公開する方法もあります。自分はこちらの方法で公開しました。
Discussion