🖋️

Markdownでスクショ画像をペーストする(VS Code)

2020/10/16に公開

VS Code

Markdown

tech

初めまして，buchioです。
Zenn初投稿なのですが，Markdownでサクサク書けるのは最高ですね．
画像もスクショでクリップボードにある画像がそのままペーストできるのが素晴らしいです．

ただ，README.mdだったり論文をまとめるときはVS Codeで編集をします．VScodeで画像を挿入する場合

![代替テキスト](/path/to/画像)

と書きますが，わざわざディレクトリを用意して画像を入れて，pathを書いて，と結構面倒です．
スクショ画像をそのままペーストできないかなと思い，方法を探してみるとちょうどよい拡張機能があったので，その使い方とおすすめの設定を紹介します．

Paste Image

使い方はいたって単純で，

使いたい画像をスクショ(Windows:Win+shift+s, Mac: Cmd+Shift+5)
張りたい場所にCtrl+Alt+V (MacならCmd+alt+V)
設定したフォルダに画像が保存され，そのパスへの参照が挿入される

画像のファイル名は，"タイムスタンプ.png"がデフォルトになっている．

おすすめの設定

デフォルトの設定ではmdファイルのあるディレクトリに"タイムスタンプ.png"が保存されていくので，あまり気持ちよくありません．
設定で画像の保存場所や，ファイルのデフォルト名を指定できます．
詳細については公式のドキュメントに書いてありますが，ここでは自分の設定をシェアします．

{
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",// デフォルトのファイル名の頭にmarkdown名をつける
"pasteImage.path": "${currentFileDir}/img",//(markdownファイルのディレクトリ内)/img内に画像を保存
"pasteImage.prefix":"./", //pathの調整
"pasteImage.showFilePathConfirmInputBox":true,// ペースト時にファイル名を変更する
"pasteImage.filePathConfirmInputBoxMode":"onlyName",
}

これによって，imgフォルダ内に画像が保存されていきます．下２行は任意ですが，後々見返す場合も考えるとファイル名は毎度つけた方が整理しやすいかと思います．

最後に

短い記事でしたが，Paste Imageの設定について書かれている記事が見当たらなかったので作成してみました．最後に個人的なtipsというかおすすめなのですが，markdownのような文章を書く場合，フォントをセリフ体(明朝体)にしてみると，ちょっと気持ちよく書ける気がするのでよかったら試してみてください．ファイルタイプごとの設定はこのような感じで行えます．

{
  "[markdown]": {
    "editor.fontFamily": "Cambria, 游明朝",
    "editor.lineHeight": 24,
    "editor.fontSize": 14,
  },
 }

記事を読んでいただきありがとうございました．少しでも役に立てば幸いです．

Paste Image

おすすめの設定

最後に

Discussion