.net column

.NET開発者のためのブログメディア

【最新Visual Studioを解説】Visual Studio Codeの基本的な使い方

2020年04月13日

マイクロソフトが提供している高機能なソースエディタ、Visual Studio Code。ここでは、Visual Studio Codeの基本的な使い方について解説していきます。少しでも参考にしていただければ幸いです。

PG
Visual Studio Codeは人気のエディタですよね。まわりのみんなも使っていますし。どんな機能があるんですか?
PM
この記事で基礎から機能を説明しますね。また、Visual Studio Codeのインストール方法について知りたい方は、下記の記事を参考にしてみてください。

【無料で利用可能】Visual Studio Codeをインストールする方法

Visual Studio Codeの画面構成

ここからは、インストールが済んでいるという前提で進めていきたいと思います。
はじめに、Visual Studio Codeの画面構成について簡単に把握しておきましょう。
下記画面をご覧ください。
最初の画面

こちらが、Visual Studio Codeを最初に開いたときに表示される画面です。ウェルカムページといわれています。
デフォルトは英語表記になっていますので、まずは日本語表記に変えておきましょう。
※英語表記のままで問題ない、という方は飛ばしてください。

表示言語の変更は以下の手順で行うことができます。

    1. 左下の設定マーク>「Extensions」を選択

設定マーク選択
※Ctrl+Shift+Xでも可能です。

    1. 検索ボックスでJapaneseと入力し、「Japanese Package for Visual Studio Code」をインストール

Japanese Package for Visual Studio Codeをインストール

    1. 右下に「Restart Now」のポップアップが表示されるため、クリックしVisual Studio Codeを再起動

再起動
これで、日本語表記に変更することができました。

次にウェルカムページの「新しいファイル」を選択し、ソースコードエディタを見ていきたいと思います。
新しいファイルを選択

下記がVisual Studio Codeのソースコードエディタです。では、1つずつ画面構成を確認していきましょう。
※筆者はあらかじめテスト用のHTMLファイルを作成しています。

画面構成

  • メニューバー:ファイルの保存やデバッグができるところ
  • エディタ:プログラムを書くところ
  • サイドバー:ソースファイルの場所(階層)を表示するところ
  • アクティビティバー:ここで選択したメニューがサイドバーに表示される
  • ステータスバー:ファイルの形式や行数、エラー数などが表示されるところ

以上が、Visual Studio Codeの基本的な画面構成です。
次項では、Visual Studio Codeを利用する上で必ず行う操作を紹介していきます。

Visual Studio Codeの基本的な操作方法

Visual Studio Codeを使用する上でマスターしておきたい基本的な操作は下記の3つです。

  1. ファイルを開く
  2. ファイルを保存する
  3. ファイルを閉じる

もちろんGUIで行うことはできますが、これらはプログラムを書く上で頻繁に使う操作ですのでショートカットキーを覚えておいてください。

    1. ファイルを開く…Ctrl+O(macOS:Cmd+O)

ファイルを開く

    1. ファイルを保存する…Ctrl+S(macOS:Cmd+O)
    2. ファイルを閉じる…Ctrl+W(macOS:Cmd+O)

ファイルを閉じる

PG
どこで何ができるのかがすぐ分かる画面構成ですね。
PM
ちなみに、背景色も「ファイル」>「基本設定」>「配色テーマ」で自分好みにカスタマイズすることができますよ。

使い方をマスターし、効率よく開発しよう

今回は、Visual Studio Codeの画面構成や簡単な操作方法を紹介していきました。
Visual Studio Codeは無料で使える高機能エディタですが、「お金を払ってでも使いたい」と思うユーザーも多くいます。ぜひ使い方をマスターし、効率よく開発を進めてみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)