VSCODE 拡張機能 vscode-imgur: markdown に画像を貼りつつ、アップロードもできるツール

投稿日: 2021年 5月 1日

Image

vscode-imgur という VSCODE の拡張機能が便利です。
これを使うと、github のエディタに画像をペーストしたら、自動的に URL に置き換えてくれるあの感じで、vscode 上でも画像の貼り付けができるようになります。

クリップボードの画像を vscode 上の markdown に貼りつけると、その画像が imgur にアップロードされます。imgur にアップロードされると、markdown にはパブリックな url が設定されるので、markdown に書いた画像がどこでも見れるようになります。自分でサーバーにアップロードしたり、ウェブサイトの特定のフォルダなどで画像を管理する必要がなくなるのでとても楽です。

詳細は、vscode の説明ページで確認できます。

使い方

  1. imgur でアプリケーション登録して、api トークンを発行する(vscode-imgur が imgur の api にリクエストするようなので、必要)

  2. vscode に vscode-imgur をインストール

  3. 下記のような、設定を追加する

    "vscode-imgur.client_id": "385318520325f93", // Must be set to upload to imgur
    "vscode-imgur.client_secret": "${env:IMGUR_CLIENT_SECRET}", // Neaded for User upload. Not neaded for anonymous mode.
    "vscode-imgur.preferUserUpload": true,
    
    • 1. のアプリ登録が完了したときに、client_idclient_secret がもらえます。
    • アップロードした画像が自分の imgur アカウントに紐付かなくても良い場合、anonymous upload ができます。この場合、client_secretpreferUserUpload の行は不要。
    • 自分の imgur アカウントに対して画像を投稿するには、user upload をします。その場合、client_secretpreferUserUpload の指定が必須です。
    • client_secret は 環境変数に設定して、それを読み取るようにしました。
  4. 設定が済んだら画像をコピーして、Ctrl + Alt + v で貼り付けるだけ。

    • 初回は、imgur アカウントの認証を行うため、imgur のページがブラウザで開く
    • 1の工程で登録したアプリケーションを使って、画像をアップロードすることを許可(Allow)する
    • 許可(Allow)すると、一時的な PIN コードが発行されるので、vscode に戻り、vscode のプロンプトにその PIN コードを貼り付け ENTER する。
    • 画像がアップロードされ、markdown ファイル上にアップロードされた画像の url が入力される。

注意

imgur の client_secret は一度しか使えないっぽい?。なので、PC A でこの拡張機能を使えるように設定した後、PC A を買い替えて PC B にしたとき、同じ用に vscode-imgur の設定をすると、認証に失敗する。PC 買い替え時などは、client_secret を imgur のウェブサイトで再発行する必要がある。(もしくは別の imgur アプリを作っても良い?)

プログラミングに関するオススメ書籍