【最新Visual Studioを解説】Visual Studio Codeの基本的な使い方
マイクロソフトが提供している高機能なソースエディタ、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を最初に開いたときに表示される画面です。ウェルカムページといわれています。
デフォルトは英語表記になっていますので、まずは日本語表記に変えておきましょう。
※英語表記のままで問題ない、という方は飛ばしてください。
表示言語の変更は以下の手順で行うことができます。
-
- 左下の設定マーク>「Extensions」を選択
※Ctrl+Shift+Xでも可能です。
-
- 検索ボックスでJapaneseと入力し、「Japanese Package for Visual Studio Code」をインストール
-
- 右下に「Restart Now」のポップアップが表示されるため、クリックしVisual Studio Codeを再起動
これで、日本語表記に変更することができました。
次にウェルカムページの「新しいファイル」を選択し、ソースコードエディタを見ていきたいと思います。
下記がVisual Studio Codeのソースコードエディタです。では、1つずつ画面構成を確認していきましょう。
※筆者はあらかじめテスト用のHTMLファイルを作成しています。
- メニューバー:ファイルの保存やデバッグができるところ
- エディタ:プログラムを書くところ
- サイドバー:ソースファイルの場所(階層)を表示するところ
- アクティビティバー:ここで選択したメニューがサイドバーに表示される
- ステータスバー:ファイルの形式や行数、エラー数などが表示されるところ
以上が、Visual Studio Codeの基本的な画面構成です。
次項では、Visual Studio Codeを利用する上で必ず行う操作を紹介していきます。
Visual Studio Codeの基本的な操作方法
Visual Studio Codeを使用する上でマスターしておきたい基本的な操作は下記の3つです。
- ファイルを開く
- ファイルを保存する
- ファイルを閉じる
もちろんGUIで行うことはできますが、これらはプログラムを書く上で頻繁に使う操作ですのでショートカットキーを覚えておいてください。
-
- ファイルを開く…Ctrl+O(macOS:Cmd+O)
-
- ファイルを保存する…Ctrl+S(macOS:Cmd+O)
- ファイルを閉じる…Ctrl+W(macOS:Cmd+O)
- PG
- どこで何ができるのかがすぐ分かる画面構成ですね。
- PM
- ちなみに、背景色も「ファイル」>「基本設定」>「配色テーマ」で自分好みにカスタマイズすることができますよ。
使い方をマスターし、効率よく開発しよう
今回は、Visual Studio Codeの画面構成や簡単な操作方法を紹介していきました。
Visual Studio Codeは無料で使える高機能エディタですが、「お金を払ってでも使いたい」と思うユーザーも多くいます。ぜひ使い方をマスターし、効率よく開発を進めてみてはいかがでしょうか。