Visual Studio Codeとは通称VSCodeと呼ばれ、Microsoft社が開発したテキストエディタです。

他のテキストエディタに比べ、HTMLやCSSなどを書く時の補助的な機能が揃っているため、多くのプログラマやWebデザイナー達の指示を集め最近人気のテキストエディタです。

それをMacOSにインストールし、使用できるまでの手順をまとめました。
ちなみにVSCodeはマルチプラットフォームなのでWindows、MacOS、Linuxのいずれの環境にもインストールできます。

1. VSCodeのサイトにアクセス

下記のサイトにアクセスし、「Download for Mac」をクリック

https://code.visualstudio.com/

2. ダウンロード

画面が移動したら自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。

3. ダウンロードしたファイルを開く（解凍する）

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。

4. アプリケーションフォルダに移動

ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

5. 認証ボタンを押す（人によっては表示されず、スキップして構いません）

この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

6. アプリケーションフォルダからVSCodeを開いてください

サイドメニューの「アプリケーション」をクリックし、VSCodeを見つけ、ダブルクリックで開いてください。

【開発元が未確認のため開けません】という警告ダイアログが表示された場合

macOS Sierraから、Macのセキュリティ機能であるGateKeeperによって確認が必要な状態となり、不明な開発元（デベロッパIDを持たない開発元）によって作られたアプリは開けなくなりました。
Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。
※ただ不正なコードが含まれる可能師があるアプリも存在します。

このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。

MacのFinderで、開きたいアプリケーションを検索します

Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません

Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します

「開く」をクリックします。

参考

アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。

7. VSCodeの初期画面

この様な画面がでるかと思います。

8. もっと便利になるような拡張機能をインストール

サイドメニューの■マークが並んだアイコンをクリックしてください。

9. 拡張機能の検索からインストールまで

赤枠の検索フォームに「Japanese Language Pack」と打ってみてください。
そうすると下に検索結果が表示されるので、同じ名前の拡張機能にある「Install」ボタンをクリックします。

10. 他の拡張機能もインストールしましょう

他にも下記の拡張機能を同じようにインストールしてみてください。
下記のテキストをコピー・アンド・ペーストで検索したほうが確実です。

Japanese Language Pack（日本語対応）
Path Intellisense（パスの入力補完）
Material Icon Theme（サイドメニューのアイコンの装飾変更）
HTMLHint（HTMLの文法チェック）
HTML CSS Support（CSSクラスを入力補完）
CSS Variable Autocomplete（CSS変数の入力補完）
Code Spell Checker（スペルチェック）
zenkaku（全角のスペースを可視化）

11. ひととおりインストールしたらVSCodeを再起動しましょう。

VSCodeを開いた今の状態で、左上の「Code」から「Quit Visual Studio Code」をクリックすると閉じます。
そして再度アプリケーションフォルダからVSCodeを開いたら、インストールと準備は完了です。

12. 参考

HTMLを作成時にlang属性をenからjaに変更する方法が下記サイトで詳しく書いています。
VSCodeのemmetでhtmlのlangをjaに設定する方法