Windowsでスラッシュを使った相対パスをでコピーできるようにするVS Code拡張機能


right-left

photo credit: marfis75 decisions ( #cc ) via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてお伝えするシリーズです。

前回の記事はこちらです。

Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount
ノンプログラマー向けにVS Codeを使ってMarkdownで技術書を執筆する方法についてシリーズでお伝えしています。今回は、Markdown文書を作成するときに便利な拡張機能Paste ImageとCharacterCountについて紹介します。

Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCountについて紹介しました。

今回は、Windowsで相対パスをコピーするときのやっかいな問題を解決してくれる拡張機能Copy Relative Path Posixを紹介します。

では、行ってみましょう!

Windows版VS Codeで相対パスをコピーするときの問題点

Markdownによる執筆で、文書に画像を挿入したいときは、以下のように画像ファイルのパスが必要です。

![代替テキスト](ファイルパス)

VS Codeでは、Explorer上のファイルを右クリックしたメニューから「Copy Relative Path」を選択することで、簡単にその相対パスをコピーできます。

VS Codeで相対パスをコピーする

しかし、Windowsの場合、ここでコピーできるパスに使われる記号がスラッシュ(/)ではなくて、バックスラッシュ(\)(または円記号)になってしまうんです。

ローカルでプレビューを見る分にはそれでもいいのですが、例えばGitHubにプッシュしたときには困ったことが起きてしまいます。

以前の記事の作成の際に発生した事例を紹介します。

VS Codeで画像ファイルの相対パスを取得したものを、そのまま使用して「fig\fig01-01.png」となっていました。

Windowsで取得したバックスラッシュによる相対パスを使用

これをGitHubでプッシュして確認すると、以下のようにリンク切れで画像がプレビュー表示されなかったのです。

GitHubではバックスラッシュの相対パスが受け入れてもらえない

つまり、GitHubではバックスラッシュ(\)(または円記号)で表現された相対パスは受け入れてもらえないのです。

これでは、レビュワーがチェックできなくて困っちゃいますよね。

拡張機能Copy Relative Path Posixとは

前回の記事で紹介した拡張機能Paste Imageでは設定でスラッシュ(/)による相対パスが挿入されるので、この問題は回避できます。

ただ、フォルダ内の画像ファイルを直接挿入したいときには、いちいち置換するのは面倒…

そこで、登場するのが今回紹介する拡張機能Copy Relative Path Posixです。

この拡張機能は、右クリックメニューにスラッシュによる相対パスをコピーできるメニューを追加してくれます。

Copy Relative Path Posix - Visual Studio Marketplace
Extension for Visual Studio Code - This extensions adds a command to copy the workspace relative path of a file using posix path separator ("/").

Copy Relative Path Posixのインストール

Copy Relative Path Posixのインストールも他の拡張機能と同様です。

アクティビティバーの「Extensions」から「copy relative path posix」などで検索して、「Install」です。

Copy Relative Path Posixのインストール

スラッシュによる相対パスのコピー

では、スラッシュによる相対パスのコピーの方法を見ていきましょう。

Copy Relative Path Posixのインストール後に、Explorerのファイルを右クリックすると、以下のように「Copy Relative Path (Posix)」というメニューが追加されています。

右クリックメニューのCopy Relative Path (Posix)

これによりコピーされた相対パスを貼り付けると、以下のように「fig/neko.jpg」つまりスラッシュを使ったパスになっていることが確認できます。

Copy Relative Path (Posix)でペーストした相対パス

基本的にこちらを使えば安心ですね。

まとめ

以上、Windowsでスラッシュを使った相対パスをコピーしてくれる拡張機能Copy Relative Path Posixを紹介しました。

これで、安心してMarkdown文書に画像を挿入できるというもの…どうぞご活用くださいね!

連載目次:ノンプロ向けVS CodeとMarkdownで書籍を執筆

コミュニティ「ノンプログラマーのためのスキルアップ研究会」では技術同人誌の制作プロジェクトを開始しました。その執筆環境としてVisual Studio Code(VS Code)を使い、Markdown記法で書くということを前提にしていきますので、このシリーズでその準備や書き方についてお伝えしていきます。
  1. VS CodeでMarkdownで書いた文書ファイルをプレビューする方法
  2. 【ノンプログラマー向け】Markdownとは何か、またその書き方について
  3. VS CodeでMarkdownを書くために便利な拡張機能Markdown All in One
  4. Markdownの構文やスタイルをチェックしてくれるVS Code拡張機能「markdownlint」
  5. Markdown文書の日本語をチェックするVS Code拡張機能「テキスト校正くん」
  6. Markdown文書をVS Codeで作成するときに便利な拡張機能Paste ImageとCharacterCount

タイトルとURLをコピーしました