【Visual Studio Code】画面の見方と基本的な使い方！-キタテン

多機能かつフリーで使いやすいエディターである【Visual Studio Code】

その基本的な使い方について解説していきます。

今回はフォルダの展開の仕方、新規ファイルの作成などを実際にしてみましょう。

少しずつ慣れていきましょう！

Visual Studio Codeの画面の見かた

A：アクティビティバー

画面左の縦に長い部分です。

上部の5つのアイコン

下部の２つのアイコン

B：サイドバー

アクティビティバーの右の縦長の窓。こちらにアクティビティバーの情報が表示されます。

C：エディター

こちらに今書いているコードやプログラムが表示されます。

D：パネル

デバッグやエディターに関する情報が表示される部分です。

Visual Studio Codeではフォルダをそのまま取り込んで内部の個別のファイルを編集することができます。上の画像のようにアクティビティバーをクリックし「フォルダーを開く」をクリックするか、トップ画面に表示されている「フォルダーを開く」をクリックします。

するとエクスプローラーウインドウが表示され参照したいフォルダを選択できます。

新規にファイルを作って書いていく場合は

アクティビティバーの一番上、エクスプローラーのアイコンをクリックし「無題の新規ファイル」をクリックすると右のエデイターに新しい画面が表示されます。言語の選択をし実際の入力に進んでいきます。

途中に表示されますが、使用言語の選択はショートカットキー＜Ctrl+KそしてM＞で可能です。このショートカットキーですが、さいごのMはほかのキーを指からはなして単独で入力してください。Ctrlを押したままだと動作しません！

作成した文書のセーブはショートカットキーの＜Ctrl+S＞でします。

保存していないと下の画像のように、ファイル名の横に●が表示されます。

セーブが済んでいると×に変わります。セーブを忘れて変更がブラウザで反映されないというミスも多いので、ここをチェックすることを忘れないようにしましょう。

ではファイルがセーブされたら変更をブラウザで確認をしてみましょう。

左のアクティビティーバーの矢印マーク「実行とデバッグ」をクリックし、サイドバーに青ボタンで表示された「実行とデバッグ」をクリックします。するとブラウザが開きエディターで編集中の内容が表示されます。

ちなみにデバッグとは、プログラムの不具合を見つけることです。

よく「バグがある」という言葉を使うと思いますが、そのバグを見つけて修正することを指します。デバッグ機能はHTMLによるコーディングではそんなに使いません。またの機会に使えるように設定してみましょう。

ということで今回は実際にフォルダを入れたり、新規ファイルを作ったり、セーブをして書いたコードをブラウザで確認したりなど基本的な使い方を解説しました。

次回は基本的な設定についてさらに詳しく見ていきましょう。