VisualStudioCodeの設定

自分用に設定内容を記載。
（追加があったら随時更新予定）

---

1.HTMLの雛形を呼び出し、雛形の言語をデフォルトで日本語にする

手順

1.VisualStadioCodeの設定（⌘+,）を開く。
2.設定内の検索ボックスに"emmet Exclude languages"と入力。

3."emmet Exclude languages"内のsettings.jsonを編集。
設定内の"emmet.variables"がデフォルトでは"en"になっているので"ja"に変更。

settings.json

	"emmet.variables": {
		"lang": "ja"
	}

2.行スペースの可視化

1.VisualStadioCodeの設定（⌘+,）を開く。

2.設定内の検索ボックスに"Render Control Characters"と入力し、
チェックボックスにチェックを記入。

【"Render Control Characters"チェック後のコード】

3.HTMLのフォーマッタ

フォーマッタとは？

→VisualStadioCode内のソースコードを自動整形してくれるもの。

設定

1.VisualStadioCodeの設定（⌘+,）を開く。

2.設定内の検索ボックスに"HTML.format"と入力し、
チェックボックスにチェックを記入。

4.フォーマッタの補足

筆者は拡張機能で"Prettier"という拡張機能を使用しているが、
デフォルトで"Prettier"を使用する設定方法を記載しておく。

1.VisualStadioCodeを開き"shift+⌘+f"を入力し、
検索結果でVisualStadioCodeのsettings.jsonが出てくる。

2.settings.jsonをクリックし、コード内の"editor.defaultFormatter"を以下のように記述。

settings.json

{
	"editor.renderControlCharacters": true,
	"editor.renderWhitespace": "all",
	"html.format.indentInnerHtml": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"eslint.format.enable": true
}

※筆者の個人的な設定を丸々コピペしただけだが、"editor.defaultFormatter""editor.defaultFormatter"が"esbenp.prettier-vscode"に
なっていればデフォルトでのフォーマッタが"Prettier"になる。

5. あとがき

今後も追記事項があれば随時更新。