VSコード / マークダウン記法で資料を作成する時に心掛けている事

ごきげんよう、百合宮桜です。
前回の記事がまさかの40いいね超えでBossに褒めてもらえました！
ということで調子に乗って、第二弾を書く事にしました。
今回のテーマは「心掛けている事」です。

# Tab キーでインデントを付ける
「[スペースキーで見た目を整えるのはやめなさい](https://www.amazon.co.jp/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%82%AD%E3%83%BC%E3%81%A7%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%82%92%E6%95%B4%E3%81%88%E3%82%8B%E3%81%AE%E3%81%AF%E3%82%84%E3%82%81%E3%81%AA%E3%81%95%E3%81%84-8%E5%89%B2%E3%81%AE%E7%A4%BE%E4%BC%9A%E4%BA%BA%E3%81%8C%E8%A6%8B%E8%90%BD%E3%81%A8%E3%81%99%E8%B3%87%E6%96%99%E4%BD%9C%E6%88%90%E3%81%AE%E3%82%AD%E3%83%9B%E3%83%B3-%E5%9B%9B%E7%A6%AE-%E9%9D%99%E5%AD%90/dp/4297112744)」というオフィスソフトでの資料作成の名著がありますが、その基本は VSコード / マークダウン記法でも同じです。
Word や Excelにはインデントを付けるためのボタンがありますが、VSコードでは Tabキーがインデントボタンの役割を果たします。

私が特に気を付けているのは、以下の2パターンです。

## 1. インデントをつけて、画像を配置する

### 悪い例

このように通し番号と画像のリンクを同じ位置で始めると、
~~~
1. Power Apps のホーム画面を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/6de013dd-856f-1ca5-4fe9-5183866ca763.png)
~~~

こういう風に表示されます。
1. Power Apps のホーム画面を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/6de013dd-856f-1ca5-4fe9-5183866ca763.png)

これだとレイアウト的にちょっと美しくありませんし、通し番号と画像の関連性がわかりにくいです。

### 良い例

Tab キーを1回押して、画像のリンクの開始位置を通し番号よりも一段下げてみました。
~~~
1. Power Apps のホーム画面を開きます。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/6de013dd-856f-1ca5-4fe9-5183866ca763.png)

~~~

こんな感じで画像が一段下がって表示された方が、通し番号1に関連する画像だという事が分かりやすいと思いませんか？
1. Power Apps のホーム画面を開きます。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/6de013dd-856f-1ca5-4fe9-5183866ca763.png)

## 2. インデントを使った階層化
階層化は必ずTab キーで行った方が良いです。
うっかりスペースで行うと、インデントがずれて、一部の画像が表示されなかったりします。
どこからずれているのかの特定が大変で、修正に膨大な時間を要することもしばしばです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/958129c7-230e-f09f-1eb8-09e8cefe4f8f.png)

Tabキーでインデントをつけると、インデントずれは発生しないので、絶対にTab キーでインデントをつけましょう！！
インデントのずれやマークダウン記法の間違いを可視化したい人は、拡張機能「markdownlint」のインストールもおすすめです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/97f967d6-13a0-3d0a-ce13-49ea6c926774.png)


# 通し番号は、自動採番する
人間はうっかりする生き物です。
特に
    1.1. Microsoft 365 にサインインする
    1.2. Power Apps を起動する
などと項目を細かく分けていると、急に1.2.のあとに1.4.が来たりしがちです。
あと資料の中身は修正したのに、項目番号は修正していないなんてこともよくあります。

Markdown All in One に「セクション番号の追加 / 更新」という機能があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/7fbe71a3-7f7a-3cfc-3652-1e25b81e65fb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/2b5e63da-1f1e-1f68-fe04-cc1a9da9231c.png)
これを使えば、1タッチで更新できます。
文明の利器を使って、余計な怒られを排除しましょう。

# 資料の更新と目次の更新は、1セットと思い込む
資料の中身は更新したのに、目次は古いまま……
これ、本当によくあります。
上書き保存をする前に、目次を更新しましょう。

これも Markdown All in One で解決できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/a6784d7d-fca9-5569-d82b-4df179c8407c.png)

# 目次からタイトルを除外する
Markdown All in One で目次を自動作成する時、資料タイトルがこんな風に目次に入ってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/474cf705-7ff2-1395-31e1-5f3800b68264.png)

このままでも特に問題ありませんが、できれば「1.大項目その1」から始まった方がスマートと考える方も多いかと思います。
そんな時はタイトルのあとに以下の文言を入力しておきましょう。

~~~
<!-- omit in toc -->
~~~

タイトルが目次から消えて、すっきりしましたね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/d75c2377-e562-071f-9ca7-0505a1125f6c.png)

以上です。
ここまで読んでいただき、ありがとうございました。