# フォーマッターと検証ツール
## Prettier
index.htmlを以下のように記述しましたが、
{% code title="index.html" %}
```html
初めてのHTML
東茶屋街の街並みです！
とても綺麗でした！
```
{% endcode %}
1行でもブラウザで表示する際は特に変化はありません。
```html
初めてのHTML東茶屋街の街並みです！
とても綺麗でした！
```
しかし、1行で書くとhtmlファイルを編集する際に、見通しが悪いため、
タグごとに改行し、タグの中に別のタグが含まれる場合は、
その分**インデントを下げる**（半角スペース2個分が望ましい）ことが推奨されます。
VSCodeの場合、Prettierという拡張機能を入れて設定を編集すると、改行やインデントを自動で整えてくれます。
* 設定方法
1. 左下の歯車をクリック
2. settingをクリック
3. 右側のsettingsページにて、入力欄に`format on save`と入力
4. 下部に表示された「Editor: Format On Save」をチェック
## DevTools
DevToolsとは、Google Chromeに搭載されている開発者用検証ツールで、表示されているページが、実際にどのようなHTMLの構成になっているか、どのようなスタイリングがされているのかを確認することができます。
先ほど作成した`index.html`をlive serverで開きましょう。
開いたページにて、`command` + `option` + `i` を押すと、
右側にDevToolsが開きます。
DevToolesの最上部のタブを要素にすると、HTMLが表示され、
表示されたHTMLのタグにホバーすると、左側に表示されるページの対応部分が強調されたり、
タグをクリックすると、そのタグに適応されているスタイリングが右側に表示され確認することができます。
