Visual Studio Codeの初期設定を行い、画面構成を理解する。

関連リンク

Visual Studio Code User Interface

Script

VS Codeをインストールしたら、日本語化パックの拡張機能をインストールして、日本語化します。

1番左のアクティビティバーから「Extensions」タブをクリックして、Marketplaceの検索エリアを選択します。

「Japan」と入力すると「Japanese Language Pack for Visual Studio Code」が出てくるので、「Install」ボタンをクリックして、VS Codeを再起動します。もし「Uninstall」が表示されていたら、すでに日本語化パックがインストールされているので、同じくVS Codeを再起動してください。

メニューが日本語化されました。次に、画面の構成をみていきます。

アクティビティバー サイドバー エディタ パネル ステータスバー セカンダリ サイドバー

これらは右上のボタンから表示/非表示の切り替えができます。

ざっくりと説明すると、アクティビティバーで選択したものがサイドバーに表示されて、そのサイドバーから開いたファイルがエディタに表示されます。そして、エディタのエラーや出力結果がパネルに表示されます。ステータスバーには、エディタの情報や言語モード、エラーの通知が表示されます。

ステータスバーから、言語モードを「HTML」にすると、HTMLに適した表示になります。文字化けしている場合は、エンコードを変更して解消することもできます。あんまり最近は激しい文字化けを見なくなりましたが、ちょっと古いファイルで「Shift-JIS」を「UTF-8」で開いてしまうと文字化けします。