VSCode
Markdown

VSCodeのMarkdown環境を整える　～その2 画像貼り付け機能～

2020.08.31

はじめに

前回に引き続き、第二弾のVSCodeのMarkdown環境を整えていきたいと思います。
今回は使用頻度も高い画像貼り付けについて説明していきたいと思います。

環境

  • VSCode
    • 1.48.2
  • Paste Image
    • v1.0.4

改善したい項目一覧

改善したい点は以下になります。

  • アウトライン機能　←　済？
  • 画像ファイルの貼り付け　←　今回はここが対象
  • リアルタイムプレビュー
  • ショートカット機能
  • Lint機能（Typoraにはない機能）
  • CSS拡張

やりたいこと

Typoraと同様にクリップボードにコピーした画像をマークダウンに貼り付けたい。そして、画像自体も任意の場所に保存したい。

それを実現できる拡張機能がPaste Imageです。

拡張機能：Paste Image

インストール

まず拡張機能マーケットプレイスからPaste Imageと検索してインストールを行います。

f:id:ashitaka1963:20200829194447p:plain

使い方

  1. 画像をクリップボードにコピーする。
  2. Paste ImageのデフォルトショートカットCtrl+Alt+Vをキーボードから入力する。
  3. クリップボードにコピーした画像が保存される。
  4. 保存した画像ファイルが相対パス参照でmdファイルに貼り付けられる。

設定

使いそうなものだけ記載するので、詳細を知りたい場合はこちらから。

pasteImage.defaultName

保存される画像のファイル名。
デフォルトではY-MM-DD-HH-mm-ssが設定されている。

なので、実際には2020-08-29-16-36-13.pngといった形式で保存される。

pasteImage.path

画像ファイルの保存先。

使える変数には以下のようなものがあります。

  • ${currentFileDir}：現在の編集ファイルを含むディレクトリのパス。
  • ${projectRoot}：vscodeで開かれたプロジェクトのパス。
  • ${currentFileName}：拡張子付きの現在のファイル名。
  • ${currentFileNameWithoutExt}：拡張子なしの現在のファイル名。

デフォルトでは、${currentFileDir}が設定されているので貼り付け先の編集ファイルと同等の階層に画像が保存されます。

これだと、mdファイルと画像が同一階層に配置されてしまい画像ファイルとmdファイルがごっちゃになってしまうので、settings.jsonから変更します。

"pasteImage.path": "${currentFileDir}/images/${currentFileNameWithoutExt}"

例を用いて設定内容を説明します。

下のようなフォルダ構成でtest.mdに画像を張り付けた場合には、imagesフォルダ配下に「現在編集しているファイル名（拡張子なし」のtestフォルダが作成され、その配下に画像が配置されていきます。

なお、imagesフォルダも勝手に作られるのでわざわざ作る必要はないです。

.
├── test.md
└── images
└── test ← ここ画像が追加される
├── 2020-08-29-17-18-07.png
└── 2020-08-29-17-18-07.png

おわりに

拡張機能のPaste Imageを使用することでMarkdownへの画像貼り付けを行うことができました！

これに関しては、その1のアウトライン機能を追加したときのとのもやもやとは違いTyporaの代替機能として活用できそうです。