Microsoft のインストールと拡張機能
Visual Studio Codeとは
Visual Studio Code（以下VS Code）はMicrosoft社が開発しているWindows、Linux、macOS、web用のソースコードエディタです。インテリジェントなコード補完機能を持ち、拡張機能も多数リリースされています。フリーのソフトウェアであるため、誰でも無料で使用することが出来ます。
VS Codeのダウンロード
VS Codeをダウンロードするには下記のサイトにアクセスして
https://code.visualstudio.com/
使用するプラットフォームに合わせたファイルを選びボタンをクリックします。
インストール
ダウンロードしたファイルをダブルクリックするとインストーラーが起動してインストールが開始されます。
ライセンスに「同意する」を選択し、「次へ」をクリックします。
「次へ」をクリックして進んでゆくと追加タスクの選択ウィンドが示されますので、「PATHへの追加」にチェックを入れます。
「デスクトップ上にアイコンを作成する」を選択した場合、デスクトップ上にアイコンが出来ていますので、アイコンをダブルクリックすると起動します。
日本語化
初回起動時には英語版で起動しますが、日本語化するための拡張機能を追加するか聞いてきますので、クリックします。
（もし表示されなければ、左の機能拡張ボタンをクリックし、Japanese Language Packを検索してインストールします。）
「Japanese Language Pack」拡張機能がインストールされると自動的に再起動し、日本語化されます。
HTMLの作成
HTMを作成するときは、ファイルメニューから新らしい「テキストファイル」を選択します。
「言語の選択」をクリックすると、対応している言語のファイルの種類がリスト表示されます。
「HTML」を選択します。（半角で”h”を入力するとすぐに出てきます。）
このままでは何も入力されていませんが、VS Codeには「emmet」が搭載されていますので、半角”!”を入力し
「enter」キーを押すか、「Tab」キーを押すとスケルトンが表示されます。
残念ながら初期状態では言語設定が英語になっていますので、「lang="en"」を「lang="ja"」に変更します。
あとは通常通りタグを入力してゆくと、Dreamweaverと同様に入力候補をリストしてくれますので、効率的に入力出来ます。
Dreamweaverとの違いは、CSSデザイナーウィンドがないので、プロパティを自力で入力する必要があることでしょう。
おすすめ拡張機能
左の「
」アイコンをクリックすると拡張機能が表示されます。
初期状態では、日本語化拡張機能がインストールされていますが、入れておくと便利な機能が多数ありますので、インストールしておきましょう。
サイト制作で便利なのは、「Live Server」拡張機能です。
上の虫眼鏡アイコンの横にあるテキストボックスに「Live Server」と入力すると、アイコンが表示されますので、Installボタンを押します。
すると「Live Server」拡張機能がインストールされます。
Live Serverの使い方
「Live Server」機能を使うには、単にHTMLファイルを編集するだけでは動作しません。
あらかじめ保存するフォルダを作成しておき（Dreamweaverのサイト設定に当たる）、
ファイルメニューの「フォルダを開く」から、そのフォルダを選択します。
「このフォルダ内のファイルの作成者を信頼しますか？」と聞いてくるので、「信頼します」のボタンを押す
このフォルダに作成中のHTMLファイルを保存し、右下の「Go Live」をクリックします。
すると規定のブラウザが開き、編集中のHTMLが実際のブラウザで表示され、変更が即座に反映されます。
VS Codeとブラウザのウィンドを左右に配置すると見やすいでしょう。
