はじめに
開発中に「Qiitaの記事を見ながらコードを書きたい」と思うこと、ありますよね。
たとえば、ライブラリの使い方を調べながら試したり、チュートリアルを見つつ実装したり——タブを行ったり来たりするのが地味に面倒だったりします。
そこで、VS Code上にQiitaの記事を直接表示できる拡張機能を作ってみました。
これを使えば、エディタを離れずに記事を読んだり、コードをコピーして試したりできます。
本記事では、この拡張機能の概要と、作る上で工夫したポイントをご紹介します。
Qiitaの記事をVS Code上に表示させる拡張機能
使い方のイメージ
1. コマンドパレットに「Qiita」と入力し、拡張機能を実行する
2. 表示させたいQiita記事のURLを入力する
3. Qiitaの記事が表示される
実装
1. InputBoxを表示させる
拡張機能が実行されたら、InputBoxが表示されるようにします。
2. URLのバリデーションを行う
URLのバリデーションとQiitaのドメインチェックを行っています。
3. URLから記事のIDを抽出する
URLから item_id を抽出します。
4. Qiita APIを使って、rendered_body を取得する
Qiita APIから取得できる rendered_body では、HTMLの形で記事が取得できます。
5. rendered_body をWeb Viewで表示させる
まとめ
今回はじめて、VS Codeの拡張機能を作成してみました。
AIの力もだいぶ借りて、1時間前後でサクッと作成しました。
普段の開発や業務での実装で困ったことがあたっら、VS Codeの拡張機能で解決できそうなイメージがわきました。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。