😊

URL文字列をZennのリンクカード記法にするVSCode拡張機能のご紹介

に公開
TypeScript
VS Code
Zenn
Markdown
tech

背景

先般、こちらの記事を書きました。

それまで< >でくくったりしていて不恰好だった記事上のURLリンクを、かっこよくカードにする方法はわかったのですが、
せっかくなら VSCode の拡張機能にして「右クリックして１クリックでポン！」みたいにできたら便利だなあ、と思いつきました次第です。(スニペットでもできそうだけど)

というわけで

作って公開しました！

使い方

※VSCodeへのインストール手順は割愛いたします。本記事執筆時点で、linkcardで拡張機能を検索するとすぐに見つかるかと思います。

1. コピーしたURLをリンクカード形式で貼り付ける

適当なURLをコピーします。

copy url to clipboard

markdownファイル上で右クリックします。
コンテキストメニューからLinkcard style: paste URL[1]を選択します。

paste URL

コピーしたURLが、リンクカード形式で貼り付きます。

pasted

2. 選択したURL文字列を変換する

リンクカード形式にしたいURL文字列をエディタ上で選択します。(素のURLはダメよ、とmarkdownlintに怒られてます)

selected

選択箇所を右クリックし、コンテキストメニューからLinkcard style: convert selection[2]を選択します。

convert selection

選択したURL文字列が、リンクカード形式に変換されます。

converted

まとめ

以上です。

本記事では拡張機能「URL to Linkcard for Zenn markdown」の紹介にとどめ、開発の中身については別の記事で、以下のようなトピックを中心に書いてみようと思います。

  • VSCode Extensionの開発、以外と簡単だった
  • 多言語対応の話
  • 初めて公開するまではちょっと面倒だった(手続き上のいろいろなこと)
  • Github ActionsでCI/CDしてみた件
  • CHANGELOGのこと

最後まで読んでいただき、ありがとうございました。リンクカード記法をかんたんに入力できる拡張機能、ぜひインストールしてお試しいただければ幸いです。

ではまた！

ちなみに

VSCode User Snippetsでもやってみました。

macの場合、メニューバーのCode -> Preferences -> Configure User Snippetsと選択し、

preferences

コマンドパレットではmarkdownのように入力してmarkdownを選択します。

select markdown

たとえば、下記のようなjsonを記述してsnippetを作成します。

markdown.json
{
    "Zenn Link Card" : {
        "prefix": "linkcard",
        "body": "@[card]($1)",
        "description": "Zennの記事においてカッコ内にURLを記述するとリンクカード形式になります。",
    }
}

貼り付けたいURLをあらかじめコピーしておきます。
エディタ上でliのように入力してコード補完(macの場合はctrl+spaceなど)をかけると、

show snippet

登録したsnippetが表示されますのでenterします。

invoke snippet

自動でリンクカードが生成され、カーソルがカッコの中に移動しますので、そのままctrl+vすれば完成です。

うん、どっちでも良いんじゃないでしょうか！

参考記事

脚注

  1. 日本語環境の方はLinkcard style: URLを貼り付けと表示されます ↩︎

  2. 日本語環境の方はLinkcard style: 選択範囲を変換と表示されます ↩︎

Discussion