2019年10月7日月曜日

vscode #02 : 便利機能

どうも、もりもりです。

今回はVS Codeの便利機能 第二弾です。
マークダウンのテーブル作成をラクにしてくれる拡張機能の紹介です。

※第一弾はコチラ

VS Codeは「.md」ファイルであれば標準の機能で
「Ctrl + K, V」とコマンドを打つとマークダウンのプレビューを表示してくれます。
が、テーブル作成の支援まではしてくれません。

そこで紹介するのが「Text Tables」です。

|Col1|Col2|Col3| |---|---|---| |item01|item002|item3| |item004|item5|item0006|

まぁこれでも全然問題なく表示されますが、メンテしたりコピペで使いまわそうとすると少し見にくいです。

「Text Tables」を使えば下記のようにキレイに整形してくれます。

| Col1    | Col2    | Col3     | | ------- | ------- | -------- | | item01  | item002 | item3    | | item004 | item5   | item0006 |

使い方


1.下記どちらかの方法でファイルをマークダウンと認識させる
  ・「.md」で保存する
  ・「Ctrl + K, M」で「Markdown」を選択

2.「Ctrl + Q」&「Ctrl + Q」でTable ModeをOnにする
  Ctrlを押しながらQを2回クリックでOK


3.タイトル行を入力しTabキーをクリック
  タイトルの下に自動で行が追加される

| Col1 | Col2 | Col3 | | | | |

4.追加された2行目の1列目に「-」と入力してEnterキーをクリック
  ヘッダとデータ部の境目(2行目)を自動で作成してくれる

| Col1 | Col2 | Col3 | | ---- | ---- | ---- | | | | |

5.データを3行目以降から入力していく
  データを入力し、TabキーやEnterキーをクリックすると幅を自動調整してくれる

| Col1    | Col2    | Col3     | | ------- | ------- | -------- | | item01  | item002 | item3    | | item004 | item5   | item0006 |


なかなか便利な拡張機能です。
ブログや仕様書などをマークダウンで作成されてる方にはオススメです。



0 件のコメント:

コメントを投稿