VSCodeの導入

事前準備

下記ファイルをダウンロードして、PC内の好きなところに保存してください。

画面構成

VSCodeの画面は大きく分けて以下のような構成になっています。

①メニューバー

一番左にある、ファイルや虫眼鏡などのアイコンが表示されているバーです。ファイルの新規作成や拡張機能のインストール、インストールされた拡張機能の操作をする際に使用します。

②（プライマリ）サイドバー

アクティビティバーの横にあるのが(プライマリ)サイドバーです。主に作業中のプロジェクトファイルの一覧を表示します。

③エディター

エディターは、実際にコードを書く場所です。エディターはタブで切り替えることができ、複数のファイルを同時に開くことができます。

④パネル

パネルは、ターミナルやデバッグコンソール、出力などの情報を表示する場所です。ターミナルはコマンドラインを使用するための場所で、デバッグコンソールはデバッグ中の情報を表示します。

フォルダーを開く

エクスプローラーに移動し、フォルダを開くより任意のフォルダを開きます。

ファイルを作成する

新しいファイルを選択し、ファイル名と拡張子を入力します。

ファイルの保存

変更が完了し、ファイルを保存する場合は「ファイル」から「ファイルの保存」を選択するか下記操作で保存できます。

【Mac】: ⌘(command) + S
【Win】: Ctrl + S
(※SaveのS)

プレビュー

作成したコードを以下の方法でプレビューできます。

1. プレビューしたいファイルを開きます。
2. 画面右上の【Live Previewボタン】を押します。
   
3. 右側にプレビュー表示されます。表示だけでなく動作も確認できます。
   

コードを整形する

Prettierをインストールした場合、コードを整形することができます。下記操作で整形を実行できます。

【Mac】: shift + option + F
【Win】: Shift + Alt + F
(※FormatのF)

▼整形前 ▼整形後