raiki_dev’s blog

右も左も分かりませんが、よろしくお願いいたします。

VSCodeのプラグイン簡単に作れた【base64-image-embedder】

VSCodeプラグイン作ってみた所感。

はじめての TypeScript で、はじめての VSCode プラグイン 開発であったが、機能が簡単なこともあり、作り方をググり始めてから公開するまで込々で6時間ぐらいで作れた。

公式や日本語記事の参考情報も豊富で、時代に感謝。参考サイトを載せておくので、それを見れば皆作れるはず。(1)(2)(3)

手軽に作ったプラグインVsCodeの検索で普通に出てきたときは感動した。

成果物

marketplace.visualstudio.com

※現状、htmlファイル内のローカルイメージパスをすべて、base64に変換するだけの機能

今回作ったプラグインで解決したいこと

他の記事でも何回か言及してるが、はてなブログの記事に投稿するために、手元にある(ローカルに保存されている)markdownやasciidocなどの資源をhtmlに変換して、はてなブログのhtmlを貼り付けてそのまま投稿する機能を使って記事を投稿する際、ローカルに依存する画像パスがhtmlに含まれていたら、当然はてなにhtmlだけコピペしても画像が表示できないので、html内のイメージパスの画像を読み取ってbase64に変換し、htmlに上書きすることで、そのままはてなブログの記事にできるのではないかという動機。

参考情報

ネットの皆さまいつも助かってます。ありがとう。

  1. VSCode Extensions(拡張機能) 自作入門 〜VSCodeにおみくじ機能を追加する〜 #VSCode - Qiita
  2. PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法 #Windows10 - Qiita
  3. Publishing Extensions | Visual Studio Code Extension API