マイクロソフトが提供している高機能なソースエディタ、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. 1. 左下の設定マーク＞「Extensions」を選択

※Ctrl+Shift+Xでも可能です。

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

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

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

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

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

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

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

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

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

1. 1. ファイルを開く…Ctrl+O（macOS：Cmd+O）

1. 1. ファイルを保存する…Ctrl+S（macOS：Cmd+O）
   2. ファイルを閉じる…Ctrl+W（macOS：Cmd+O）

PG

どこで何ができるのかがすぐ分かる画面構成ですね。

PM

ちなみに、背景色も「ファイル」＞「基本設定」＞「配色テーマ」で自分好みにカスタマイズすることができますよ。

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

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