032-VS Code MD編集基本操作

032
VS Code MD編集基本操作

▶︎

all

running...

📘 本を買う必要ある？
📘 VS Codeでの作業
📘 Paste Image
📘 目的の行にジャンプ

注記：本記事はGPT-4o期の対話ログをもとにしています。

📘 本を買う必要ある？

🙂 タケ：
VS Code について mdファイルを編集するにあたり、操作方法を知りたいんだけど、今回の僕みたいにnoteに貼り付ける程度の操作なら、君に聞けば十分かな？わざわざ本を買う必要もない？

🤖 チャットさん：
結論から言うと：

✅ 今回のように「noteに貼り付ける程度」のMarkdown（.md）編集なら、ChatGPT に聞くだけで十分です。

本を買う必要は全くありません。

🔹理由：

Markdownの記法はシンプル：見出し（#）、リスト（- または *）、リンク、画像、改行、引用…など、覚えることは多くない。
VS CodeはMarkdownとの相性が良い：プレビュー機能、拡張機能が充実。
君の目的は「執筆」や「出版」ではなく、“Web投稿向け整形”：note貼り付けがゴールなので、細かいMarkdown仕様まで学ぶ必要はない。

🔹実際に聞かれそうなこと（例）：

やりたいこと	聞いてくれればすぐ教える内容
太字・斜体にしたい	`太字`, `斜体` など
見出しをつけたい	`# 見出し1`, `## 見出し2` など
箇条書きリストを作りたい	`- 項目1`、`* 項目2` など
コードを貼りたい	`コード`、またはコードブロック ```
改行したい	行末に2スペースをつける、もしくは空行を入れる
プレビューしたい	`Ctrl + K V`（横分割）など

🔹もし本を買うとしたら…

対象がMarkdown全般（GitHubや出版用）だったり、
VS Code全機能を学びたいといった中級以上を目指す場合のみおすすめです。

📘 VS Codeでの作業

🙂 タケ：
VS Codeは複数のmdファイル開いて必要なところをコピペしたり、画像貼り付けは?

🤖 チャットさん：
はい、VS Codeでは以下のように複数のMarkdownファイルを並行して開いたり、画像を貼ったり、必要な部分だけコピペしたりする操作がスムーズにできます：

✅ 複数の .md ファイルを開いて作業する

方法①：タブで複数ファイルを開く

ファイルをダブルクリックで複数タブが開きます
タブ間の移動は Ctrl + Tab（またはタブをクリック）

方法②：左右に並べて同時に見る

タブを右クリック →「エディターを分割」
または Ctrl + \ で分割
タブをドラッグして別ペインに持っていくのもOK

✅ 画像の貼り付け（Markdownへの挿入）

画像ファイルをMarkdownに貼る基本の書き方：

![説明文](画像ファイルのパス)

例：

![猫の画像](images/cat.jpg)

方法①：エクスプローラーから画像をドラッグ＆ドロップ

VS Codeに画像をドラッグすると自動でパス付きで挿入されます（拡張機能があるとより便利）

方法②：右クリックで貼り付け（拡張機能必要）

拡張機能「Paste Image」などを使うと、クリップボードの画像を貼り付けられます
- Ctrl + Alt + V などで、画像をローカルに保存＆Markdownにパス挿入してくれます

✅ まとめ：VS Codeでの .md 作業はこんな感じ

操作	方法・ショートカット
複数ファイルを開く	タブで開く or `Ctrl + \` で分割
タブ間の移動	`Ctrl + Tab`
画像をMarkdownに貼る	`![説明](画像パス)`／ドラッグ＆ドロップ
コピペ（別.mdファイルから）	普通に `Ctrl + C` / `Ctrl + V`
プレビューを横に表示	`Ctrl + K V`

📘 Paste Image

🙂 タケ：
拡張機能「Paste Image」手順教えて

🤖 チャットさん：
もちろんです！
VS Codeで画像を手軽に貼り付けられる拡張機能「Paste Image」のインストールと使い方を、以下にわかりやすくまとめます。

✅ 「Paste Image」の導入と使用手順

【Step 1】
⇒拡張機能をインストールする

VS Code 左サイドバーの「拡張機能」（四角いアイコン）をクリック
検索バーに Paste Image と入力
作者が mushanh のものを選び、「インストール」をクリック

【Step 2】
⇒貼り付けたい画像をコピー（クリップボードに入れる）

たとえば：
- Web上の画像を右クリック → 「コピー」
- スクリーンショット（PrintScreen や Snipping Tool）
- 画像ビューアで開いた画像をコピー（Ctrl + C）

【Step 3】
⇒Markdownファイル内で Ctrl + Alt + V を押す

現在開いている .md ファイルのカーソル位置に以下のようなMarkdown記法が自動で挿入されます：

![](images/2025-06-17-10-35-12.png)

画像ファイルは .md ファイルと同じフォルダ内の images フォルダに保存されます（自動生成されます）

✅ よくあるカスタマイズ（settings.json）

画像の保存先などを変更したい場合：

Ctrl + Shift + P → settings.json と入力 → 「Preferences: Open Settings (JSON)」を選択
以下を追記：

"pasteImage.path": "${currentFileDir}/images",
"pasteImage.basePath": "${currentFileDir}",
"pasteImage.prefix": "",
"pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
"pasteImage.insertPattern": "![${imageFileName}](${imageFilePath})"

✅ 注意点

項目	説明
貼り付け形式	`![](相対パス)` で挿入される
ファイル名	日時ベース（変更可能）
保存先フォルダ	デフォルトは `images/` フォルダ
noteに使う場合	ローカル画像はアップロード不要か要確認（note側に貼り直すことが多い）

画像貼り付けが一気に楽になるので、Markdown作業が多いなら必須級の拡張です。

🙂 タケ：
mushanh？mushanは一番上にあったけど。

🤖 チャットさん：
ご指摘ありがとうございます！
正しくは「mushan」でOKです（最後の “h” はありません）。

✅ 正しい拡張機能情報

名前：Paste Image
作者：mushan
VS Code 上での表示：
👉 Paste Image - mushan
インストール時の見分け方：
- 星の数が多い（数万ユーザー以上）
- 説明文に「Paste an image from clipboard to markdown file folder」

つまり、VS Codeで一番上に出てくる「Paste Image（作者：mushan）」が正しい拡張機能です。
安心してインストールしてください。

🙂 タケ：
画像コピーしてCtrl + Alt + VしてもThere is not a image in clipboard.っていわれる。コピーできていない？

🤖 チャットさん：
そのエラーメッセージ：

"There is not a image in clipboard."

は、Paste Image 拡張機能が「画像がクリップボードに入っていない」と判断したときに出るものです。
つまり、画像のコピーがうまくできていない可能性が高いです。

✅ 原因と対策チェックリスト

🔹 1. 画像が本当にコピーされているか？

試した操作例	結果と対策
Webページの画像を「右クリック → コピー画像」	✅ OK（動作するはず）
Windows の Snipping Tool	✅ OK（ただし「コピー」後すぐ貼り付ける）
画像ファイルをエクスプローラーで選択後 Ctrl + C	❌ ×（これはファイルのコピーであって、画像の中身ではない）

→ 対策：
Web画像なら「右クリック → コピー画像」
Snipping Toolなら「切り取り → Ctrl + Alt + V ですぐに貼り付け」

🔹 2. 画像以外のクリップボードが邪魔してないか？

文章やURLが直前にコピーされていると、画像は上書きされてしまいます
→ もう一度画像だけをコピーし直してから Ctrl + Alt + V を押してください

🔹 3. VS Codeの設定や他のアプリが干渉してないか？

古い VS Code や OS によっては、一部の画像コピーが拾えないケースもあります
→ 対応として：

✅ 代替案：画像ビューアで開いてコピーする

画像ファイルをペイント、Photos、IrfanView などで開く
Ctrl + A（全選択）→ Ctrl + C（コピー）
VS Code で Ctrl + Alt + V

✅ テスト用に確実な手順例（画像コピーして貼り付け）

下記画像を右クリック
👉
「画像をコピー」選択
VS CodeのMarkdownファイル上で Ctrl + Alt + V

🤖 チャットさん：

それでも動作しない場合は：

▪ OSの種類（Windows/macOS）

▪ どこで画像をコピーしているか（ブラウザ？ファイル？アプリ？）

を教えてもらえれば、もっと具体的に対応できますよ。

🙂 タケ：
できた。エクスプローラーで選択後プログラムから開く、でSnipping Toolで開いてからコピーだった。

🤖 チャットさん：
おお、それはよかった！👏

✅ エクスプローラーで選択 → Snipping Tool で開く → コピー → Ctrl + Alt + V

という流れ、完全に正解ルートです。

🔍 今回のポイントまとめ

操作	補足
ファイルを直接コピー	❌ NG（画像ファイルとして認識される）
Snipping Tool で開く	✅ OK（画像内容として扱われる）
コピー直後に貼り付け	✅ OK（タイミングも重要）

🔧 補足ヒント（今後の効率化）

Snipping Tool を使わずに「Photos（画像ビューア）やペイント」でも同じことができます。
手順が多いと感じたら、画像をMarkdownと同じフォルダに保存して ![ ]() で書く方法も検討すると楽になる場面もあります。

📘 目的の行にジャンプ

🙂 タケ：
VS Codeで目的の行にジャンプする方法は？

🤖 チャットさん：
VS Codeで目的の行にジャンプする方法はとても簡単です👇

✅ 方法：指定した行番号にジャンプ

Windows / Linuxの場合：

Ctrl + G

Macの場合：

Cmd + G

すると、画面上部に「行番号を入力してください」というボックスが出るので、
たとえば 312 と入力すれば、その行に一発ジャンプします。

⏱補足Tips：

操作	説明
`Ctrl + G` → `312:1`	312行目の1文字目にジャンプ（:1 をつけると列も指定できる）
`Alt + Z`	行が長すぎて折り返したいときに「折り返し表示」をON/OFF切り替え
`Ctrl + Shift + L`	同じ単語を一括選択・編集（修正箇所が連続してるときに便利）