githubや引き継ぎ書類などでmarkdownを利用している多くの方々が思っているであろうスクリーンショットを貼り付けたいと言う願望をあっさり叶えてくれる！！そんな機能がVSCodeにはある！！
Paste Image
VSCodeの[拡張機能][pasteimg]であるPaste Imageを利用することであっさり実現できる。
使い方はいたってかんたん。
- Installを行う
- 使いたい画像をスクリーンショットする(windows: win+shift+S, Mac: Cmd+Shift+5)
- MarkDown内の貼りたい場所でWindows: Ctrl+Alt+V Mac: Cmd+Alt+V
- 設定したフォルダに画像が保存され、そのパスへの参照が挿入される
[pasteimg]:https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image
画像のファイル名は'タイムスタンプ.png'がデフォルトになる。
おすすめPaste Imageの設定
デフォルトの設定では、MarkDownファイルがあるディレクトリにそのまま画像が保存されていく。これはあまりきれいとは言えないと個人的には感じている。そのため、保存先のディレクトリや保存時のファイル名などを変更していく。設定の変更の仕方を解説していく。まずはVSCode左下の歯車をクリックし設定を開く。
設定をひらいたあと右上にある下の画像の赤枠で囲んでいるアイコンをクリック。すると'setting.json'を開くことができる。
その中に下記の設定を追加する。
//Markdownの設定
// デフォルトのファイル名の頭にmarkdown名をつける
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
//保存したいディレクトリの設定。※"${currentFileDir}"はマークダウンファイルがあるディレクトリを指す
"pasteImage.path": "${currentFileDir}/img",
//pathの調整
"pasteImage.prefix":"./",
// ペースト時にファイル名を尋ねる設定
"pasteImage.showFilePathConfirmInputBox":true,
"pasteImage.filePathConfirmInputBoxMode":"onlyName",
最後に
楽しいマークダウンライフを！！