VSCode その他

過去に書き溜めたVSCode使用方法等についてのメモをそのまま転記。
主にVSCodeをMarkDownのメモアプリとして使う内容。
内容が古い、間違っている、表現が不適切、画像がない、自分以外の人が見ても意味がわからない場合があるのでご注意ください。
追々他のページに整理したりする予定。

  1. その他
    1. 250710 VSCodeの概要
      1. 250709 Python拡張機能がインストール出来ない
      2. 250710 Python仮想環境の作成(調査中)
    2. 260122 VSCodeの実行ファイルの場所
    3. 250801 タブの検索・置換
    4. 250808 ターミナルでスクリプトが無効
    5. 260113 プレーンテキストファイルでアウトライン機能を利用する方法
    6. 260113 フォルダを開くについて
    7. 260116 特定文字列の含まれる行のみフィルタする方法
    8. 260113 VSCodeからExcel等別アプリのファイルをそのアプリで開く拡張｢Open｣
    9. 260116 VSCodeで図を書ける拡張「Draw.io Integration」
      1. 既存の画像ファイル(png, jpeg)を編集する方法
    10. 260116 VSCodeで画像編集できる拡張「Luna Paint — Image Editor」
    11. 250910 プレーンテキストとしてコピーできる拡張 ｢Copy Plain Text｣
    12. 260120 複数ワークスペースを別のウィンドウで開く方法
    13. 260120 折りたたみ・展開のショートカット
    14. 260122 ファイル名で検索
    15. 編集操作でよく使うショートカット 260325
      1. 編集関連
      2. 移動関連
      3. 選択関連
      4. その他
  2. Markdown関連
    1. 260113 Markdownのプレビューの見た目を改善したりする拡張「Markdown Preview Enhanced」
      1. この拡張のCSSの場所
      2. その他の機能 260405
        1. シンタックスハイライト 260406
        2. コードブロックに行番号をつける 260406
        3. コードブロックの行を強調表示 260406
        4. テーブルのセルをマージ 260406
        5. マーカー(黄色背景)で強調表示 260406
        6. タスクリスト(チェックボックス) 260406
      3. 260409 現状の設定
    2. 260113 Markdownのプレビューを開く
    3. 260113 Markdownで改行で改行する設定
    4. 260113 Markdownでテーブルを扱うときの便利拡張機能「Markdown Table」
      1. 機能
    5. 260113 コピーしたExcelの表をマークダウンとしてペーストする拡張「Excel to Markdown table」
    6. 260113 Markdownのテーブル(表)の操作支援拡張「Text Tables」(不要)
    7. 260113 Markdownの定番プラグイン「Markdown All in One」
      1. 機能
    8. 260113 「Markdown Navigation」(不要)
    9. 260113 Markdownへの画像の貼り付け設定(スクリーンショット画像自動保存)
      1. 260114 スクリーンショット画像自動保存の実際に設定した内容
    10. 260114 Markdownに画像ファイルを挿入する方法(画像がコピーされる)
    11. 260114 Markdownに画像をコピーせずリンクを挿入する方法
    12. 260218 Windowsのエクスプローラーで画像を選んで、Markdownに画像をコピーせずリンクを挿入する方法
    13. 260113 Markdownをプレビュー状態で編集できる拡張「Typora」(不要)
      1. この拡張のCSSの場所
        1. 260113 Typoraカスタマイズ内容
    14. 260113 Markdownなどのインデントの折りたたみ・展開のショートカット
    15. 260114 Markdownのレベルを一括で上げ下げする方法
    16. 260114 Markdownのプレビューで折りたたみする方法
    17. 260114 Markdownの不使用画像を移動する拡張「Clear Markdown Unused Images」(不要)
    18. 260114 Markdownドキュメント内の内部リンクについて
    19. Markdownのエディタとプレビューのコードをシンタックスハイライトする
    20. 260515 エディタ上でMarkdownの見出しの色を変える設定方法
      1. 260515 実際の設定内容
    21. 260515 WYSIWYGに編集できる拡張「Markdown Live Editor」
  3. VSCodeの設定関連
    1. 260114 タブバーの設定(複数段表示、タブの幅等)
    2. 260114 ユーザー設定ファイル(settings.json)の開き方
    3. 260122 VSCodeの折りたたみ、展開を使いやすくする設定
    4. 260114 設定した内容まとめ
    5. 260312 書式をコピーしないをデフォルトにする設定
    6. 260312 タイトルバーの検索窓「コマンドセンター」の表示/非表示設定
    7. 260306 空白文字(スペース)を表示する設定
    8. 260316 VSCodeの色を変更する設定

その他

250710 VSCodeの概要

プロジェクトのフォルダをVSCodeで開いくと以下のフォルダ構成がツリーで表示される。フォルダ内のファイルをクリックしたらすぐに編集出来る状態になる。
pythonファイルはVSCode上からすぐにテスト実行可能。一旦保存する必要がある。

250709 Python拡張機能がインストール出来ない

再起動したらインストールできた。

250710 Python仮想環境の作成(調査中)

参考サイト https://qiita.com/otya1989/items/59717648daddcab0d6d1

260122 VSCodeの実行ファイルの場所

項目内容
場所%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code
ファイル名Code.exe

会社PCでの実際の場所
C:\Users\(ユーザー名)\AppData\Local\Programs\Microsoft VS Code

例えばマウスのボタンにプログラムごとに別の機能を割り当てたい時、VSCodeの実行ファイルの場所を指定する必要がある。

250801 タブの検索・置換

正規表現を有効にし以下を入力すると検索できる。
\t (バックスラッシュt 又は エンマークt)

250808 ターミナルでスクリプトが無効

pythonの仮想環境を有効にするスクリプトを実行しようとしたら以下のエラーが出た
このシステムではスクリプトの実行が無効になっているため、ファイル C:\xxx\xxx\xxx を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。

260113 プレーンテキストファイルでアウトライン機能を利用する方法

プレーンテキストの言語モードをMarkdownファイル(.md)にすると、Markdownのアウトラインを利用できる。
ウィンドウ右下の「プレーンテキスト」をクリック。

言語選択のポップアップからMarkdownを選択する。
検索窓にmarkと入力してEnterが早い。



260113 フォルダを開くについて

フォルダを開くとディレクトリをツリー表示し、ツリー上のテキストファイル等をクリックするだけでプレビューできる。

操作動作
クリックプレビュー。タブのファイル名が斜線表示。他のファイルをクリックするとそちらが開く。プレビュー上で編集すると編集状態になる。
ダブルクリック編集状態。タブのファイル名が通常表示。他のファイルをクリックしても開いたままになる。

Onenoteでのノートブック、セクション、ページで情報を整理しているのと同じようなことが、VSCodeでフォルダとtxtファイルやMarkdownファイルを使えば可能になるかもしれない。(アウトライン機能がある点はVSCodeのほうが上)

jpg, png, svgなどの画像もプレビューできる。Excel, Wordファイルはプレビューできない。

二つのフォルダを同時に開くことは出来ない。
ワークスペースに追加すると複数フォルダを同時に開ける。

260116 特定文字列の含まれる行のみフィルタする方法

Ctrl + Fの通常の検索では出来ないが、Ctrl + Shift + Fのフォルダを検索(左ペインにある)で可能。

現在開いているファイルに限定するには「含めるファイル」の右の「開いているエディターでのみ検索」を有効にする。
alt text

260113 VSCodeからExcel等別アプリのファイルをそのアプリで開く拡張｢Open｣

フォルダツリー上のExcelファイルやその他のファイルを、そのファイルに関連付けられているアプリ(Excel等)で開く方法。
通常は「サポートされていない」とでてVSCode上では開くことが出来ない。

拡張機能「Open」をインストール

ツリーで該当ファイルを右クリック→「Open with default application」

Markdown上にExelファイルなどのリンクが書いてある場合、プレビューでクリックするとツリー上のExcelファイルが選択状態になるので右クリックして開くとよい。

残念ながらMarkdownのプレビューから直接は開けない。

260116 VSCodeで図を書ける拡張「Draw.io Integration」

Draw.ioというブラウザ上で図を描けるサービスをVSCodeで利用できるようにしたもの。
拡張子「.drawio」または「.dio」のファイルを作成して開くとGUIのエディタが立ち上がる。
Inkscape的な使い勝手。

できること

  • 矩形、円形、曲線の図形、テキスト描画
  • フリーハンド描画 (後から修正できない)
  • 図形をコネクタでつなぐ
  • png, svgなどでエクスポート
  • 画像の挿入
  • 挿入画像のcrop(後で元に戻せる)
  • レイヤー
  • 等

出来ないこと

  • 描画のモード(乗算とか)の変更

拡張子を「.drawio.png」とすると表向きはpngファイルとなるが中身はdraw.ioファイルとなり、エクスポートの必要なくMarkdown等に挿入出来て便利。

編集したいときはMarkdown中のリンクをCtrl + クリックで即座に編集画面が開く。

参考 https://zenn.dev/ulxsth/scraps/d76aaa47f2975b

既存の画像ファイル(png, jpeg)を編集する方法

Markdownの画像フォルダに入っている画像のリンクがmdに書かれていて、ちょっと書き込みをしたい場面を想定。

mdファイルの画像リンクをCtrl+クリック、またはマウスホバーで現れる画像プレビューをクリックする。
alt text

新しいタブで画像のプレビューが開き、エクスプローラーでファイルが選択された状態になる。
同じフォルダに画像と同名で拡張子「.drawio.png」のファイルを作成してVSCodeのエクスプローラ上でダブルクリックするとDrawIOが開かれる

alt text
alt text

エクスプローラーで元の画像ファイルを右クリック→「パスのコピー」
DrawIOの編集画面のメニュー「ファイル」→「Import」→コピーしたパスを貼り付けて開く
alt text

必要な編集を加えて保存。
mdファイルの画像へのリンクの拡張子を「.drawio.png」に変更する

alt text

260116 VSCodeで画像編集できる拡張「Luna Paint — Image Editor」

alt text

ちょっとした画像編集に。
編集したいときはMarkdown中のリンクをCtrl + クリックで即座に編集画面が開く。

できること

  • ブラシで描画 (ペンサイズの変更方法が不明)
  • レイヤー
  • クロップ

250910 プレーンテキストとしてコピーできる拡張 ｢Copy Plain Text｣

拡張機能の「Copy Plain Text」(作者: Matthew Bolger)をインストール
alt text

ショートカットキー Ctrl + Alt + Cでプレーンテキスト(書式なし)としてコピーできる。
Ctrl + Cで通常通り書式ありコピー。

補足
書式なしでコピーする方法として、設定を変更する方法が数多く紹介されているが、
場合によっては書式ありでコピーしたいときもある。
貼り付け先のソフトによってはShift + Ctrl + Vで書式なしペーストできるが、対応しているかはソフト次第。

260312 書式をコピーしないをデフォルトに設定した
書式がコピー出来て良かった場面が一度もないので、デフォルトOFFにした。この拡張も不要となる。

設定方法「Copy With Syntax Highlighting」のチェックを外す。

関連項目 260312 書式をコピーしないをデフォルトにする設定

260120 複数ワークスペースを別のウィンドウで開く方法

正しい方法か不明。
メニュー「ファイル」→「新しいウィンドウ」 (またはShift + Ctrl + N)
Ctrl + R で最近使ったワークスペースの候補が出るので選択する。
候補にない場合は、メニュー「ファイル」→「ファイルでワークスペースを開く」

260120 折りたたみ・展開のショートカット

ショートカットキー内容
Ctrl+Shift+[折りたたみ
Ctrl+Shift+]展開
Ctrl+K Ctrl+L (左記２つを押下)折り畳み／展開のトグル
Ctrl+K Ctrl+[ (左記２つを押下)再帰的折りたたみ
(カーソル位置以下の階層すべて折り畳む)
Ctrl+K Ctrl+] (左記２つを押下)再帰的展開
(カーソル位置以下の階層すべて展開)
Ctrl+K Ctrl+0 (左記２つを押下)すべて折りたたみ
Ctrl+K Ctrl+J (左記２つを押下)すべて展開
Ctrl+K Ctrl+1 (左記２つを押下)1階層目を折り畳み
Ctrl+K Ctrl+2 (左記２つを押下)2階層目を折り畳み
Ctrl+K Ctrl+3 (左記２つを押下)3階層目を折り畳み
Ctrl+K Ctrl+4 (左記２つを押下)4階層目を折り畳み
Ctrl+K Ctrl+5 (左記２つを押下)5階層目を折り畳み
Ctrl+K Ctrl+6 (左記２つを押下)6階層目を折り畳み
Ctrl+K Ctrl+7 (左記２つを押下)7階層目を折り畳み
Ctrl+K Ctrl+8 (左記２つを押下)8階層目を折り畳み
Ctrl+K Ctrl+9 (左記２つを押下)9階層目を折り畳み
Ctrl+K Ctrl+/ (左記２つを押下)全てのコメントのブロックを折り畳み

参考 https://rishuntrading.co.jp/blog/tools/vs-code_fold_unforld/

260122 ファイル名で検索

ファイル内容ではなく、ファイル名のみで検索したい場合

VSCodeのエクスプローラーにフォーカスしCtrl + Alt + Fで検索窓が出る。
あいまい検索、フィルタもできる。

エクスプローラーにフォーカスするショートカット Shift + Ctrl + E

編集操作でよく使うショートカット 260325

編集関連

キー動作備考
Ctrl+X行の切り取り (未選択時)
Ctrl+C行のコピー (未選択時)
Alt+Downカーソル行を下に移動
Alt+Upカーソル行を上に移動
Shift+Alt+Downカーソル行を下にコピー
Shift+Alt+Upカーソル行を上にコピー
Ctrl+Shift+Kカーソル行削除複数行選択時も可能
Ctrl+Enter下に行追加
Ctrl+Shift+Enter上に行追加

移動関連

キー動作備考
Ctrl+Shift+\次の対応する括弧に移動「\」はBackspace左だけ対応
Ctrl+Shift+]対応する括弧に移動
Ctrl+Up行を上にスクロールカーソル位置はそのまま
Ctrl+Down行を下にスクロールカーソル位置はそのまま
Alt+PgUp画面を上にスクロールカーソル位置はそのまま
Alt+PgDown画面を下にスクロールカーソル位置はそのまま
Ctrl+G指定行に移動マイナス値を指定で最下行からの相対行にジャンプ
Ctrl+Pファイルに移動
Ctrl+Shift+O指定シンボルに移動
Ctrl+PgUp次のタブに移動
Ctrl+PgDown前のタブに移動
Alt+Left前に戻る
Alt+Right次に進む
Ctrl+K, Ctrl+Q最後の編集位置に移動
Ctrl+Uカーソル移動を1つ前に戻す編集操作以前には戻れない

選択関連

キー動作備考
Shift+Ctrl+Alt+↑↓←→(カーソル)矩形選択マウスの場合は中ボタンドラッグ or Shift+Alt+クリック
Ctrl+Alt+↑↓(カーソル上下)マルチカーソルマウスの場合はAlt +クリックで任意位置に追加
Ctrl+D選択と一致の文字列を選択に追加マルチカーソル状態になる(同じ文字列をまとめて選択出来る)
Shift+Ctrl+L選択と一致の文字列をすべて選択
Ctrl+L行選択し下の行にカーソル移動
Shift+Alt+←→(カーソル左右)選択範囲の拡大/縮小Markdownの見出し以下を丸ごと素早く選択したり出来る

その他

キー動作備考
Ctrl+K, Ctrl+Shift+\エディタを分割表示/解除
Ctrl+K Ctrl+Sキーボードショートカット一覧を開く

Markdown関連

260113 Markdownのプレビューの見た目を改善したりする拡張「Markdown Preview Enhanced」

インストールすると標準では黒背景のプレブユーが白背景になった。(変更可能)

プレビュー画面右クリックでPDFエクスポートなど色々できる。

この拡張のCSSの場所

保存場所C:\Users\(ユーザー名)\crossnote\
ファイル名style.less

VSCodeで開くには、Shift + Ctrl + P → 以下の文字をコピペすると開ける。
Markdown Preview Enhanced:Customize CSS

このファイルをいじっても、標準機能のプレビューには影響しない。

その他の機能 260405

こちらに解説あり。
https://github.com/shd101wyy/markdown-preview-enhanced/blob/master/docs/ja-jp/markdown-basics.md

シンタックスハイライトの仕方とか、テーブルの拡張構文とか。

シンタックスハイライト 260406

バッククオート3つで囲んだコードブロックのコードをシンタックスハイライトする方法。
最初のバッククオート3つの後に言語名をつける。

例

<span class="token selector"><span class="token class">.markdown-preview</span><span class="token class">.markdown-preview</span></span> <span class="token punctuation">{</span>
  // modify your style here
  // <span class="token property">eg</span><span class="token punctuation">:</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>

  <span class="token selector">p<span class="token punctuation">,</span> table<span class="token punctuation">,</span> pre<span class="token punctuation">,</span> div<span class="token punctuation">,</span> div<span class="token class">.box1</span></span> <span class="token punctuation">{</span>
  <span class="token property">margin-left</span> <span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span> //見出し以外を右にずらす設定
  <span class="token punctuation">}</span>
コードブロックに行番号をつける 260406

バッククオート3つで囲んだコードブロックのコードに行番号を付ける方法。
最初のバッククオート3つの後に{.line-numbers}をつける。

例

a
b
c
コードブロックの行を強調表示 260406

バッククオート3つで囲んだコードブロックのコードの行を強調表示する方法。
最初のバッククオート3つの後に{.line-numbers}をつける。

例

a
b
c

a
b
c

a
b
c
テーブルのセルをマージ 260406

機能を有効にするには、拡張機能の設定で enableExtendedTableSyntax を有効にする必要があります。

項目内容
abc123
def456
789
項目内容1内容2
abc123456
def789
マーカー(黄色背景)で強調表示 260406

marked

タスクリスト(チェックボックス) 260406

プレビューをクリックしてチェックのON/OFFが出来る。

  • @言及、#参照、リンク、強調、および tags をサポートします
  • リスト構文が必要（順不同リストまたは順序付きリストがサポートされています）
  • これは完了したアイテムです
  • これは未完了なアイテムです

260409 現状の設定

.markdown-preview.markdown-preview {
  // modify your style here
  // eg: background-color: blue;

  p, table, pre, div, div.box1, ul, ol{
  margin-left : 30px; //見出し以外を右にずらす設定
  }

  ul ul, ol ol{ //リストの入れ子を必要以上にずらさないように指定 260407
  margin-left : 0px; //見出し以外を右にずらす設定
  }

  p img{
  margin-left : 0px; //pの中のimgに適用。pにmargin-left:30pxがあるので、pの中のimgは結果的に30px右に寄る。
  }

  img{
  margin-left : 30px; //pの中にないimgに適用。右にずらす設定
  display: block; //小さい画像が横並びにならないようにブロック要素にする(デフォルトはインライン要素)
  }

  pre, code { //コードブロック(pre), インラインコード(code)に適用 260404
    background: #dadada; //コードブロックの背景色をちょっと濃くする 260404
  }

th { //テーブルの見出しを左寄せ(デフォルトで中央寄せ)
  text-align: left; 
}


  ul { //リストの黒丸を四角にする
    list-style: square;
  }
  h1 {
    counter-reset: chapter;
    font-size: 30px; /* デフォルト36pxくらい */
    border: solid 3px #364e96;/*線色*/
    padding: 0.3em;/*文字周りの余白*/
    border-radius: 0.5em;/*角丸*/
  }

  h2 {
    counter-reset: sub-chapter;
    font-size: 22px; /* デフォルト36pxくらい */
    //background: #fdd6aa;/*背景色*/
    background: #e0ecff;/*背景色*/
    border-bottom: double 5px #5c5c5c;
  }

  h2::before {
    counter-increment: chapter;
    content: counter(chapter) ". ";
  }
  h3 {
    counter-reset: section;
    font-size: 18px; /* デフォルト28pxくらい */
    //background: #fceed5;/*背景色*/
    background: #f5f9ff;/*背景色*/
    border-bottom: double 3px #5c5c5c;
  }
  h3::before {
    counter-increment: sub-chapter;
    content: counter(chapter) "." counter(sub-chapter) ". ";
  }
  h4 {
    font-size: 16px; /*  */
    //background: #fcfaf0;/*背景色*/
        border-bottom: solid 1px #5c5c5c;
  }
  h4::before {
    counter-increment: section;
    //content: "(" counter(section) ") ";
    content: counter(chapter) "." counter(sub-chapter) "." counter(section) ". ";
  }
  h5 {
    font-size: 16px; /*  */
    border-bottom: dashed 1px #5c5c5c;
  }

  h6 {
    font-size: 16px; /*  */    
    border-bottom: dashed 1px #e0e0e0;
  }

  p, table, code, ul, ol {
    font-size: 14px; /* デフォルトは16px */    
  }
  //四角い枠で囲みたいときに<div class=box1>を使用する
  div.box1{
    border: solid 1px black;
  }

  // 260202画像にシャドウ追加
  img {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
  }

  // 260316 折りたたみ部の範囲をわかりやすくするために枠をつける
  details {
    border: dashed 5px rgba(145, 145, 145, 0.322);
  }
}

260113 Markdownのプレビューを開く

別タブでプレビューShift + Ctrl + V
編集タブの右にプレビュー表示Ctrl + K → V

260113 Markdownで改行で改行する設定

Markdownの正式な書き方では行末にスペース2個で改行となる。
気に入らないので普通に改行したらプレビューでも改行するようにしたい。

設定で「markdown 改行」で検索したらそれっぽいのがでてくるので、チェックする。
Markdown > Previwe: Breaks

260113 Markdownでテーブルを扱うときの便利拡張機能「Markdown Table」

Markdown Table
作者は日本人らしい

機能

自動整形(入力時Tabで次セルに移動で実行される)
手動整形(右クリック→Markdown tabel: format all tables)
Tabで次のセルに移動
最終行の行末でTabで新たな行を自動作成
右クリックで列の挿入可能

260113 コピーしたExcelの表をマークダウンとしてペーストする拡張「Excel to Markdown table」

拡張機能Excel to Markdown table (Sebastian Holmqvist)
コピーしたExcelの表をマークダウンとしてペーストできる(Alt + Shift + V)

260113 Markdownのテーブル(表)の操作支援拡張「Text Tables」(不要)

コマンドパレット(Ctrl + Shift + P)に”Text tabeles”と検索すると使用できる機能が表示される。

「Enter table mode」でモードに入るとTabでセル移動したり行や列を入れ替えたり色々できるっぽい。
だがモードに入るのが面倒かも。
モードのON/OFF状態はウィンドウ左下に表示されている。

Create tablesで新規の表をサイズ指定で作成できるのはちょっと便利かも。

(260222)インストールしなくてもいい

260113 Markdownの定番プラグイン「Markdown All in One」

VSCodeでMarkdownを扱うときの定番プラグインらしい。

機能

見出し番号を自動で振る、等

(260222)なくてもいいかもしれない

260113 「Markdown Navigation」(不要)

デフォルトの「アウトライン」とは別に「MARKDOWN NAVIGATION」を表示する。

以下の画像の比較でわかるように、頭のabcや#がなくなり若干見やすい。
ただそれだけ。
標準のアウトラインはカーソルに追従したり全て折りたたみ・展開が出来るが、それも出来ない。
しかもファイルを保存しないと更新しないし表示されない。
不使用とする。

デフォルト

拡張

260113 Markdownへの画像の貼り付け設定(スクリーンショット画像自動保存)

キャプチャした画像を編集中のMarkdownファイルに貼り付けると、mdファイルのあるフォルダに画像ファイルとして自動で保存される。
便利。

settings.json に以下の設定を追加することで、画像の保存先を「images/ドキュメント名/」に設定することができます。

"markdown.copyFiles.destination": {  
"**/*": "images/${documentBaseName}/"  
},

これにより、画像を Markdown ドキュメントに貼り付けると、Markdown ファイルから相対パスでフォルダ images/ドキュメント名/に画像が保存されます。

貼り付け元 <https://qiita.com/KEI_YAMA/items/57f41316654df41961e4>

より詳しい情報は公式ドキュメント参照
https://code.visualstudio.com/updates/v1_79#_copy-external-media-files-into-workspace-on-drop-or-paste-for-markdown

(260222)不要

260114 スクリーンショット画像自動保存の実際に設定した内容

以下のように設定した

settings.json (ユーザー設定)

"markdown.copyFiles.destination": {
&nbsp; &nbsp; "**/*": "MD-images/${documentBaseName}/"
}

設定画面(ファイル→ユーザー設定→設定)では↓こうなる。

MDファイルがあるフォルダに「MD-images」フォルダを作成し、その中のMDファイル名のフォルダに画像が保存される。

複数のMDファイルが同一フォルダにある時に画像はMD-imagesフォルダにまとめつつ、その中で各ファイルごとに整理する目的。

260114 Markdownに画像ファイルを挿入する方法(画像がコピーされる)

Shiftを押しながら画像ファイルをドロップ、または画像ファイルをエクスプローラーでコピーしてVSCodeのMarkdownに貼り付けすると、画像へのリンクが挿入される。
しかし、mdファイルと同じフォルダに画像ファイルのコピーが作成されてしまうのでこの方法はあまり使いたくない。

コピーされた後、出来た画像を削除してリンク先を修正するという手もある。
VSCodeのファイルツリーからShift+ドラッグで画像をコピーせずリンクを貼れるが、場合によってはこっちのほうが早いかも。

260114 Markdownに画像をコピーせずリンクを挿入する方法

Shiftを押しながら画像ファイルをドロップ等すると、画像ファイルのコピーが作成されるのでよろしくない。
ファイルを増やさず相対パスのリンクのみMarkdownに記述する方法。

まずエクスプローラーのツリーをVSCodeに表示させる。
mdファイルから画像の相対パスを挿入するので、画像ファイルを適切なフォルダに配置する。
VSCodeのエクスプローラーツリー上の目的の画像ファイルを編集中のmdファイルにドラッグし、Shiftを押してドロップすると相対パスの画像リンクができる。
(ドラッグ開始前にShiftを押すと、ドラッグ出来ないので注意)

260218 Windowsのエクスプローラーで画像を選んで、Markdownに画像をコピーせずリンクを挿入する方法

VSCodeのエクスプローラーから画像ファイルをドラッグ → Shift + ドロップで画像をコピーせずリンクを挿入できるが、Windowsのエクスプローラーでサムネイル表示で視覚的に選んで挿入したい場合もある。

エクスプローラーで選んだ画像をVSCodeのタブのところにD&Dすると画像のタブができる。
そのタブをドラッグし、リンク挿入したいMDファイルのタブの上で1秒くらいホバーすると、エディタにMDファイルが表示される。
リンクを挿入したい場所にShift + ドロップする。

260113 Markdownをプレビュー状態で編集できる拡張「Typora」(不要)

(260222)現在不使用

Typora – Visual Studio Marketplace
Extension for Visual Studio Code – Edit markdown like typora in vscode.
marketplace.visualstudio.com

すでに更新は止まっているらしい。

拡張機能が有効の状態でmdファイルを開くとTypora独自のエディタが開き、プレビュー上で編集が行えるような形になる。
エディタにGuiが表示され、表の作成などが簡単に行える。
VSCodeのアイコンをクリックすると通常のエディタが別タブで開く。

独自エディタでは、標準のアウトラインとは別に、独自アウトライン(ナビゲーション)を備えている。(標準のアウトラインは機能しなくなる)
折りたたみは出来ない模様。

スクショ画像を貼り付けると、image/(mdファイル名)/(ファイル名.png)とフォルダが作られて自動保存される。
(デフォルトではmdファイルと同じ階層に保存される。)

おまけ？でExcelファイルの編集やWordファイルのプレビューも可能になる。

この拡張のCSSの場所

項目内容
保存場所C:\Users\(ユーザー名)\vscode\extensions\cweijan.vscode-typora-3.5.4\resource\vditor\
ファイル名index.css

参考: https://qiita.com/akmt-ishii/items/da551200dd6b6cbc1783

260113 Typoraカスタマイズ内容

見出し以外を右にずらす

p, table {
margin-left : 30px;
}

260113 Markdownなどのインデントの折りたたみ・展開のショートカット

ファイル全部折りたたみ
Ctrl + K → Ctrl + 0

ファイル全部展開
Ctrl + K → Ctrl + J

カレント全部折りたたみ
Ctrl + K → Ctrl + [

カレント全部展開
Ctrl + K → Ctrl + ]

参考: https://qiita.com/yuzukaki/items/b9c995829567c348c74b

260114 Markdownのレベルを一括で上げ下げする方法

例えばこのマニュアルのMarkdown関連の項目が溜まってきたので、今まで見出しレベル1で書いていた項目をレベル2にし、上位のレベル1に「# Markdown関連」を作成してまとめたい場合など。
拡張機能”Markdown All in One”の以下のショートカットCtrl + Shift + ] (or [)がうまく機能しなかったので別の方法。

一括上げ下げしたい部分を切り取り、別のエディタに貼り付け。
「^### 」→「#### 」に置換。
次は「^## 」→「### 」に置換、次は「^# 」→「## 」に置換、といった具合に、深いレベル→浅いレベルの順に増やしていく。

編集後のテキストを元のファイルに貼り付けて完了。

260114 Markdownのプレビューで折りたたみする方法

Markdownで見出しを設定すると、エディタやアウトラインでは折りたたみ・展開ができるが、プレビュー画面では折りたたみが出来ない。

次のように書くと折りたたみができる。

&lt;details&gt;&lt;summary&gt;要約した文章&lt;/summary&gt;折りたたみたい内容&lt;/details&gt;

複数行の場合。
</summary>の後に空白行を入れないとまとめて1行になってしまう。

&lt;details&gt;&lt;summary&gt;要約した文章&lt;/summary&gt;

折りたたみたい内容
折りたたみたい内容
折りたたみたい内容
折りたたみたい内容
&lt;/details&gt;

正確にはMarkdownの記法ではなくhtml。

↓実際に使ってみた例 要約した文章

折りたたみたい内容
折りたたみたい内容
折りたたみたい内容
折りたたみたい内容

260114 Markdownの不使用画像を移動する拡張「Clear Markdown Unused Images」(不要)

alt text

“Clear Markdown Unused Images: Run”

260114 Markdownドキュメント内の内部リンクについて

以下の記事が詳しい

Qiita Markdownのページ内リンクの罠 – Qiita
Qiitaで記事書いてる人たち、ページ内リンクで困ったことないですか？ 僕はこんな寄り道みたいなところでとても困りました。 書き方にいくつかルールがあるみたいなんですけど、あんまり情報が見つからなかったのでまとめておきます。 公式のマニュア…
qiita.com

基本的な書き方

# hoge

## fuga

[hoge](#hoge)

[fuga](#fuga)

ルール
見出しの深さに関係なく#は常に1つ
英字の大文字ABCは小文字abcで
半角空白はハイフン-で
記号(半角、全角共)はアンダーバー_とハイフン-以外省略
英字の全角大文字ＡＢＣは全角小文字ａｂｃで
全角空白は省略
同じヘッダー ヘッダーのハッシュが重複した場合、2つ目以降は末尾に-1, -2と連番が付く

VSCodeだと[hoge](#と入力した時点で候補が出るので、そこから選択するのが早い。

Markdownのエディタとプレビューのコードをシンタックスハイライトする

拡張「Markdown Preview Enhanced」の機能で可能。

｢“`(バッククオート3つ)｣で囲んだところがコードブロックになるが、｢“`lua｣のように最初のバッククオート3つの後に言語名を記述すると色がつく。

適用前
alt text

適用後
alt text

(左がエディタ、右がプレビュー)

260515 エディタ上でMarkdownの見出しの色を変える設定方法

Ctrl + Shift + P → 「settings」と検索 →「基本設定：ユーザー設定を開く (JSON) (Preferenses: Open user Settings (JSON))」を開く

<span class="token punctuation">{</span>
  <span class="token property">"editor.tokenColorCustomizations"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">"textMateRules"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token comment">// 見出しレベル1の設定</span>
        <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.1.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
        <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">// ここに任意の色を設定する</span>
          <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#4d85c3"</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// 見出しレベル2以下も同様に設定する</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

参考: https://ics.media/entry/240523/

260515 実際の設定内容

    <span class="token property">"editor.tokenColorCustomizations"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">"textMateRules"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル1の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.1.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#c4a679"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル2の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.2.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#ff9595"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル3の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.3.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#eeff8b"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル4の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.4.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#4dc388"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル5の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.5.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#a0b9ff"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                <span class="token comment">// 見出しレベル6の設定</span>
                <span class="token property">"scope"</span><span class="token operator">:</span> <span class="token string">"heading.6.markdown entity.name.section.markdown"</span><span class="token punctuation">,</span>
                <span class="token property">"settings"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">// ここに任意の色を設定する</span>
                <span class="token property">"foreground"</span><span class="token operator">:</span> <span class="token string">"#ffaef8"</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

260515 WYSIWYGに編集できる拡張「Markdown Live Editor」

alt text

VSCodeの設定関連

260114 タブバーの設定(複数段表示、タブの幅等)

タブを複数段表示する設定 (デフォルト: off)

"workbench.editor.wrapTabs": true,

タブの最小幅 (デフォルト: 50)
tab sizingがfixedのときのみ有効
“workbench.editor.tabSizingFixedMinWidth”: 80,

タブの最大幅 (デフォルト: 160)
tab sizingがfixecのときのみ有効

"workbench.editor.tabSizingFixedMaxWidth": 120,

タブサイズの制御方法 (デフォルト: fit)

"workbench.editor.tabSizing": "fixed"

260114 ユーザー設定ファイル(settings.json)の開き方

メニュー「ファイル」→「ユーザー設定」→「設定」

設定を開いた状態で右上のアイコン↓を押すと、設定ファイルの本体であるsettings.jsonファイルを直接開くことができる。

260122 VSCodeの折りたたみ、展開を使いやすくする設定

VSCode自体の設定ではないが、マウスのサブボタンに折りたたみ、展開を設定すると使いやすくなる。
Logiのマウスのボタンに、再帰的折りたたみ(Ctrl+K Ctrl+[)、再帰的展開(Ctrl+K Ctrl+])を登録。

H1にカーソル併せて再帰的折りたたみし、#の右の展開の三角をクリックするとH2が折り畳まれた状態にできる。

260114 設定した内容まとめ

260113 見出し以外を右にずらす設定を追加 (Markdown Preview Enhanced)

260113 Typoraカスタマイズ内容

260114 スクリーンショット画像自動保存の設定

260515 エディタ上でmarkdownの見出しの色を変える設定方法

260312 書式をコピーしないをデフォルトにする設定

設定で以下を検索
Copy With Syntax Highlighting
「構文ハイライトをクリップボードにコピーするかどうかを制御します」のチェックを外す。

関連項目 250910 プレーンテキストとしてコピーできる拡張 ｢Copy Plain Text｣

260312 タイトルバーの検索窓「コマンドセンター」の表示/非表示設定

非表示にする
検索窓上で右クリック→「コマンドセンター」のチェックを外す

表示する
設定で「command center」を検索し、チェックを入れる。

260306 空白文字(スペース)を表示する設定

ユーザー設定で以下を検索
editor.renderWhitespace
値を”all”にする。

他にも設定できるが、すべて表示するallで良いと思う。

260316 VSCodeの色を変更する設定

メニュー「ファイル」→「ユーザー設定」→「設定」
“Color Customizations”を検索。
alt text

「settings.jsonで編集」をクリックすると、
ユーザー設定ファイル”settings.json”に以下の項目が追加される。
ここに設定を記述すると反映される

    "workbench.colorCustomizations": {

    }

以下のように変更 260325更新

    "workbench.colorCustomizations": {    
        "editor.lineHighlightBackground": "#ffffff31", //カーソル位置の行の色
        //"editor.lineHighlightBorder": "#000", // 現在行の境界線
        "editor.selectionBackground": "#d48236", //選択箇所の色
        //"editor.selectionHighlightBackground": "#beff25f6", //選択範囲と同じ内容の背景色
        "editorCursor.foreground": "#ffc60afb", //カーソルの色
        "editor.wordHighlightBackground": "#31313185", //カーソル位置の単語のハイライト
        "tab.activeBackground": "#8b8b8b", //アクティブタブの背景色
        "tab.activeBorder": "#fa3636", //アクティブタブ下部の境界線
        "tab.activeBorderTop": "#fa3636", //アクティブタブ上部の境界線
        "tab.hoverBackground":"#5398af", //タブにマウスホバーしたときの背景色
        "tab.hoverForeground":"#ffffff", //タブにマウスホバーしたときの文字色
        "focusBorder": "#ff0800", //フォーカス箇所(検索窓とか)の枠の色
        "editor.findMatchBackground": "#ffd255", //検索で現在のマッチ箇所
        "editor.findMatchHighlightBackground": "#c2950069", //検索で現在のマッチ場所以外のマッチ箇所
        "scrollbarSlider.background": "#777777", //スクロールバースライダーの色
        "sideBar.background": "#1d3320", //サイドバーの背景色
        "sideBar.foreground": "#ffffff", //サイドバーの文字色
        "sideBarSectionHeader.foreground": "#e9e9e9", //サイドバーのセクション名の文字色
        "sideBarSectionHeader.background": "#346e4a",  //サイドバーのセクション名の背景色
        "list.activeSelectionBackground": "#505050", //アクティブなツリーリストの背景色
        "list.inactiveSelectionBackground": "#757e00", //選択されたツリーリストの背景色
        "list.hoverBackground":"#5398af", //リストツリーにマウスホバーしたときの背景色
        "window.activeBorder":"#ff0000",
        "window.inactiveBorder":"#ff0000",
        "titleBar.activeBackground":"#574b0a", //アクティブ時タイトルバー背景色
        "titleBar.activeForeground":"#ffffff", //アクティブ時タイトルバー文字色
        "titleBar.inactiveBackground":"#3b3407", //非アクティブ時タイトルバー背景色
        "titleBar.border":"#557575" //タイトルバー境界線の色
    }

設定可能な項目は他にもたくさんある模様。

参考情報
https://qiita.com/youtoy/items/285b2c2c884fb8af76ca
https://atmarkit.itmedia.co.jp/ait/articles/1709/15/news027.html

公式情報 情報が網羅されているっぽいが、設定項目と実際に変更される箇所の対応がわかりにくい。
https://code.visualstudio.com/api/references/theme-color

コメント

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