ファイルの作成と保存
画面構成を見たところで、コードエディタであるところのVSCodeの基本的な流れを見ていきましょう。ファイルを新規に作成し、HTMLを少し入力し、それを保存してみます。
ファイルを新規に作成する
日本語化直後の画面に戻ります。メニューから［ファイル］－［新しいテキストファイル］を選択するか、[Command]＋[N]キー（macOS）／[Ctrl]＋[N]（Windows）を入力します。このように、多くの機能はメニューから選択できますが、ショートカットキーが用意されていればそれを活用するのが効率的ですから、どんどん覚えて活用しましょう。登場したショートカットキーは、記事の最後でまとめています。
［NOTE］メニュー項目「新しいファイル」
よく似たメニュー項目に［新しいファイル］というものがあり、これはプログラミング言語等の種類を指定できる便利なものですが、初期状態では選択肢がほとんどないので使用しても意味がありません。有効な選択肢を表示させるには、拡張機能をインストールしていく必要があります。これについては、後続の回で紹介します。
言語（HTML）を選択する
ファイルが作成されると、エディタグループに「Untitled-1」というタブが現れます。もちろん、中身は空ですが、「言語の選択、または 別のエディターを開く を使用して開始します。入力を開始して無視するか、［表示しない］をもう一度クリックします。」とメッセージが表示されています（図10）。
ここで［言語の選択］をクリックすると、これから入力しようとしているプログラミング言語を選択できます。［別のエディターを開く］をクリックすると、別のテキストエディタで入力を開始できますが、ここでは［言語の選択］で「HTML」を選んでおきます（図11）。この作業により、これから入力する内容がHTMLなのだとエディタに認識させます。これは、タブの左端に表示されているアイコンがテキストファイルを表す 
からHTMLを表す 
に変わるので、はっきりと確認できるはずです。
ひな型を入力する
そして、エディタで「html」とだけ入力してみてください。すると、「html」「html:5」「html:xml」という3つの選択肢がプルダウンで表示されるので、「html:5」を選択してください（図12）。すると、即座にHTML5のひな型が入力されます（図13）。これはEmmetという拡張機能によるもので、入力文字列を省略形として認識して、対応する内容を自動入力します。非常に便利な機能なので、次回以降の回で紹介予定です。
自動入力されたひな型では、HTMLにおける色分け（シンタックスハイライト）が施されていることが確認できるでしょう。なお、保存されたファイルを開く場合は、ファイルの言語は拡張子やファイル内容から自動判定されます。
最後に、保存します。保存は［ファイル］－［保存］（[Command]＋[S]／[Ctrl]＋[S]）です。未保存なので、［ファイル］－［名前を付けて保存］（[Command]＋[Shift]＋[S]／[Ctrl]＋[Shift]＋[S]）でも同様です。保存のためのダイアログボックスが開きますので、フォルダやファイル名を変更して保存を実行してください（図14）。なお、言語にHTMLを指定したので、ファイル名のデフォルトに自動的に拡張子「.html」が付加されていることにも注目してください。保存すると、タブのファイル名にも反映されます（図15）。
これでファイルが保存できました。このファイルは、［ファイル］－［エディターを閉じる］（[Command]＋[F4]／[Ctrl]＋[F4]）で閉じることができます。再度開くには、OSにおけるファイルの関連付けでVSCodeを開くか、あるいはVSCodeで［ファイル］－［ファイルを開く］（[Command]＋[O]／[Ctrl]＋[O]）を使って開けます。このほかに、ウェルカムページのリンクなどからもファイルを開くことができます。
VSCodeの終了
作業が終了してVSCodeを閉じるのは、OSの作法に則ります。ウインドウの［閉じる］ボタンをクリックするか、［Code］－［Visual Studio Code を終了］（macOS）または［ファイル］－［終了］（Windows）を選択します。なお、VSCodeはウインドウを複数開くことができます。VSCode全体を終了させるのではなく個別のウインドウを閉じる場合には、［ファイル］－［ウィンドウを閉じる］（[Command]＋[Shift]＋[W]／[Alt]＋[F4]）を選択します。この場合、最後のウィンドウが閉じた時点でVSCodeも終了します。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 新規ファイル | [Command]＋[N] | [Ctrl]＋[N] |
| ファイルを開く | [Command]＋[O] | [Ctrl]＋[O] |
| ファイル上書き保存 | [Command]＋[S] | [Ctrl]＋[S] |
| ファイル新規保存 | [Command]＋[Shift]＋[S] | [Ctrl]＋[Shift]＋[S] |
| ファイルを閉じる | [Command]＋[F4] | [Ctrl]＋[F4] |
| ウィンドウを閉じる | [Command]＋[Shift]＋[W] | [Alt]＋[F4] |
まとめ
今回は、VSCodeのあらまし、ダウンロードとインストール、日本語化の方法、画面の見方、そして簡単なファイルの作成と保存を通じた基本操作を見てみました。
次回は、VSCodeを便利かつ自分好みに使いこなすための下地となる各種の設定を見ていきます。
