【初心者必見!】Visual Studio Codeの使い方を分かりやすく解説!

侍エンジニア塾ブログTech編集部

今回は、2015年にリリースされたVisual Studio Codeを紹介します!

Visual Studio Codeは、マイクロソフトによって開発されているソースコードエディタです。

この記事は、Visual Studio Codeを試してみたいけれど、設定が面倒そうで後回しにしていたあなたのための記事になっています。

マイクロソフトが開発しているからWindowsでしか動かないと思っていませんか?

ここでは、主にWindowsでの画面を使って説明していますが、Windowsのほかに、Mac OSLinux上でも動作する優れたエディタです。

記事で説明されている手順のとおりに操作すれば、主に以下の事柄を体験しながら理解できます。

「Visual Studio Codeのインストール方法を知りたい」
「Python、PHP、Java、C#の開発環境として使用するための設定方法を知りたい」
「Markdownエディタとして使用するための設定方法を知りたい」

それでは、行ってみましょう!

Visual Studio Codeとは

shutterstock_86954518

Visual Studio Codeは、多くのプログラミング言語に対応しているソースコードエディタです。

以下では、シンタックスハイライト拡張機能だけを紹介していますが、一部の言語では、インテリセンス(自動補完システム)デバッグ機能が用意されています。

シンタックスハイライト

シンタックスハイライトは、ソースコードの構造を視覚的に区別できるようにする表示機能のことで、ソースコードを編集するエディタを名乗るのであれば、当然備えておくべき基本的な機能です。

Visual Studio Codeでは、Pythonも、PHPも、標準でシンタックスハイライトに対応しています。

拡張機能

拡張機能をインストールすることで、標準では用意されていない機能を追加し、さらに便利な開発環境に進化させられます。

実は、標準ではPythonPHPデバッグ機能を利用できません。

しかし、Pythonのデバッグを可能にするための拡張機能「Python(ms-python.python)」や、PHPのデバッグを可能にするための拡張機能「PHP Debug(felixfbecker.php-debug)」をインストールすれば、それぞれデバッグが可能になるのです。

拡張機能のバージョンアップは、Visual Studio Codeとは異なるタイミングで行われているため、拡張機能によっては、どんどん新しい機能が追加されたり、問題が解消されたりしているのも魅力的です。

配色テーマ

Visual Studio Codeは、好みに合わせて背景やテキストの色を変更できます。

配色テーマを変更するには、「ファイル」をクリックし、「基本設定」をクリックして、「配色テーマ」をクリックします。

標準でインストールされている配色テーマでも、以下のようなテーマから選択できます。

Light (Visual Studio)

vsc53

Solarized Light

vsc54

Dark+ (default dark)

vsc55

Red

vsc56

High Contrast

vsc57

配色テーマの代わりに「その他の配色テーマをインストール」をクリックすると、拡張機能として登録されている配色テーマをインストールできます。

vsc58

日本語設定

日本語版OSにVisual Studio Codeをインストールしたときは、初めから日本語表示になっていますので、特別な設定は必要ありません。

一方、たとえば英語版OSにインストールしたときは、初めは英語表示になっています。

そのような場合も、日本語表示に切り替えられます。

(1)Visual Studio Codeを起動し、「View」をクリックして、「Command Palette」をクリックします。

(2)「Configure Language」と入力し、「Configure Language」をクリックします。

(3)「”locale”:”en”」を以下のように書き替えます。

日本語に変更する場合は「ja」ですが、他の言語に変更する場合は、以下のページをご覧ください。

参考:https://code.visualstudio.com/docs/getstarted/locales

(4)「File」をクリックし、「Save」をクリックします。

(5)Visual Studio Codeを再起動します。

文字コード設定

Shift-JISで書かれたファイルを開くと文字化けする場合があります。

vsc59

これを解決するには、2つの方法があります。

1つ目は、ファイルを開くときに文字セット エンコードを推測する設定です。

(1)Visual Studio Codeを起動し、「ファイル」をクリックして、「基本設定」をクリックし、「設定」をクリックします。

(2)「files.autoGuessEncoding」と入力します。

vsc60

(3)「files.autoGuessEncoding」の「vsc61」をクリックし、「true」をクリックします。

vsc62

これで、ファイルの文字コードがShift-JISの場合でも文字化けせずに開けるようになります。

ただ、あくまで推測のため、うまくいかない場合もあります。

そのときは、「files.autoGuessEncoding」の設定を「false」に戻してから、2つ目の設定を変更します。

(1)Visual Studio Codeを起動し、「ファイル」をクリックして、「基本設定」をクリックし、「設定」をクリックします。

(2)「files.encoding」と入力します。

vsc64

(3)「files.encoding」の「vsc61」をクリックし、「”shiftjis”」をクリックします。

vsc65

これで、すべてのファイルの文字コードがShift-JISとして開けるようになります。(逆に、文字コードがUTF-8の場合は文字化けします。)

Visual Studio Codeのインストール

shutterstock_256959766

Windows版

Windowsにインストールする前に、システムの種類が「32bit」か「64bit」のどちらであるかを確認しましょう。

確認するには以下の2つの方法があります。

(1)スタートボタンを右クリックし、「システム」をクリックして、「システムの種類」を確認します。

vsc01

(2)「コントロール パネル」を表示して、「システムとセキュリティ」をクリックし、「システム」をクリックして、「システムの種類」を確認します。

vsc02

今回は、Windows 10(64bit版)のインストール方法を解説します。

(1)以下の公式サイトにアクセスし、「Windows」をクリックします。

vsc03

https://code.visualstudio.com/download

(2)ダウンロードしたインストーラー(VSCodeSetup-x64-1.21.0.exe)をクリックして実行します。

vsc66

(3)「次へ」をクリックします。

vsc05

(4)使用許諾契約書を読み、「同意する」を選択して、「次へ」をクリックします。

vsc06

(5)インストール先を確認し、「次へ」をクリックします。

vsc67

(6)スタートメニューのプログラムグループを確認し、「次へ」をクリックします。

vsc08

(7)追加タスクを選択し、「次へ」をクリックします。

vsc09

(8)「インストール」をクリックします。

vsc10

(9)「完了」をクリックします。

vsc11

Visual Studio Codeのインストールが完了しました。

vsc12

Mac OS版

Mac OS版は、zipファイルをダウンロードしてインストールします。

(1)以下の公式サイトにアクセスし、「Mac」をクリックします。

vsc13

https://code.visualstudio.com/download

(2)ダウンロードしたファイル(VSCode-darwin-stable.zip)をダブルクリックして展開します。

(3)「Visual Studio Code.app」ファイルを、アプリケーションフォルダにドラッグします。

以上でVisual Studio Codeのインストールが完了しました。

Linux版

Linux版も用意されていますが、ディストリビューションごとにインストール方法が異なります。

詳しくは、以下の公式サイトをご覧ください。

https://code.visualstudio.com/docs/setup/linux

Visual Studio Codeの使い方

shutterstock_523613047

基本的な使い方

Visual Studio Codeの画面は、大きく3つのエリアに分かれています。

vsc14

アクティビティーバーは、サイドバーに表示する内容を選択するエリアです。

たとえば、最上部の「vsc15」をクリックすると、上の画面のようにエクスプローラーが表示されます。

エクスプローラーでクリックしたファイルは、エディタに表示され、自由に編集できます。

Pythonの開発環境を構築する方法

Visual Studio Codeは、あくまで高機能なソースコードエディタのため、Pythonの実行環境は含まれていません。

そのため、Visual Studio Codeとは別に、Pythonの実行環境を用意する必要があります。

ここでは、Pythonの実行環境を構築する際によく使われるAnacondaを使用している場合を例に説明します。

Anacondaでは、「py36」という名前のPython 3.6環境を作成済みとします。

Anacondaについては、以下のサイトをご覧ください。

参考:https://qiita.com/t2y/items/2a3eb58103e85d8064b6

では、前置きはこの辺にして、Visual Studio CodeでPythonの開発環境を構築する方法を解説しましょう。

(1)Visual Studio Codeを起動し、「vsc16」をクリックします。

vsc17

(2)「Python」と入力し、「Python」をクリックします。

vsc18

(3)「ms-python.python」と表示されていることを確認し、「インストール」をクリックします。

vsc19

(4)「ファイル」をクリックし、「フォルダーを開く」をクリックします。

(5)ソースコード(あとで説明するhelloworld.py)を保存するフォルダを選択し、「フォルダーの選択」をクリックします。

ここでは、「D:\Visual Studio Code\Python」フォルダを選択しました。

Visual Studio Codeのエクスプローラーに、PYTHONフォルダが表示されます。

vsc20

(6)「ファイル」をクリックして、「基本設定」をクリックし、「設定」をクリックします。

「ユーザー設定」画面が表示されます。

(7)「ワークスペースの設定」をクリックします。

vsc21

(8)「{」の後ろをクリックしてEnterキーを押し、以下の内容を入力します。

「ユーザーフォルダ」は、使用するWindowsアカウントごとに異なりますので、エクスプローラーで「C:\Users」フォルダを表示して、名前を確認してください。

(9)「ファイル」をクリックし、「保存」をクリックします。

(10)「PYTHON」フォルダの「vsc22」をクリックします。

vsc23

(11)「terminal.bat」と入力し、Enterキーを押します。

vsc24

(12)以下の内容を入力します。

(13)「ファイル」をクリックし、「保存」をクリックします。

(14)「表示」をクリックし、「統合ターミナル」をクリックします。

Anacondaで作成したpy36環境が起動します。

vsc25

以上で、Pythonの開発環境が構築できました。

次に、Pythonで「Hello World」を出力してみましょう。

(1)「PYTHON」フォルダの「vsc22」をクリックします。

vsc26

(2)「helloworld.py」と入力し、Enterキーを押します。

vsc27

(3)「print(“Hello World”)」と入力します。

pylintの動作を確認するため、最後に改行を入力しないでください。

vsc28

(4)「ファイル」をクリックし、「保存」をクリックします。

(5)「問題」をクリックします。

vsc29

pylintによるチェック結果が表示されます。

pylintは、Pythonコードのエラーチェックツールです。

vsc30

「C0304:Final newline missing」は、最後の1行に改行文字以外の文字が存在すると表示されます。

「C0111:Missing module docstring」は、モジュール(このファイル)の先頭に説明文がないと表示されます。

(6)helloworld.pyを以下のように書き替え、「ファイル」をクリックして、「保存」をクリックします。

問題が解決したことを確認してください。

vsc31

(6)「デバッグ」をクリックし、「デバッグの開始」をクリックします。

「helloworld.py」の1行目に色が付きます。

(7)「vsc32」をクリックします。

vsc33

2行目に色が移動します。

(8)「vsc32」をクリックします。

vsc34

3行目に色が移動し、「デバッグコンソール」に「Hello World」と表示されます。

(9)「vsc32」をクリックします。

vsc35

以上で、Pythonの開発環境の構築が終了し、デバッグできることが確認できました。

PHPの開発環境を構築する方法

Visual Studio Codeには、PHPの実行環境も含まれていませんので、Visual Studio Codeとは別に、PHPの開発環境も用意する必要があります。

ここでは、Pythonの実行環境を構築する際によく使われるXAMPPを使用している場合を例に説明します。

XAMPPをインストールしてPHPの実行環境を用意する方法については、以下の記事をご覧ください。

XAMPPのインストールが済んだところで、もう一つ準備が必要です。

PHPのデバッグに必要な、xdebugをインストールしておきましょう。

(1)以下の公式サイトにアクセスし、「PHP 7.1 VC14 TS (32 bit)」をクリックします。

vsc36

https://xdebug.org/download.php

(2)ダウンロードしたファイル(php_xdebug-2.5.5-7.1-vc14.dll)を「C:\xampp\php\ext」フォルダにコピーします。

(3)「C:\xampp\php\php.ini」をテキストエディタで開き、ファイルの末尾に以下の内容を追記します。

それでは、Visual Studio CodeでPHPの開発環境を構築する方法を解説しましょう。

(1)Visual Studio Codeを起動し、「vsc16」をクリックします。

vsc17

(2)「PHP Debug」と入力し、「PHP Debug」をクリックします。

vsc37

(3)「felixfbecker.php-debug」と表示されていることを確認し、「インストール」をクリックします。

vsc38

(4)「ファイル」をクリックし、「フォルダーを開く」をクリックします。

(5)XAMPPのドキュメントルートのフォルダ(標準では、C:\xampp\htdocs)を選択し、「フォルダーの選択」をクリックします。

Visual Studio Codeのエクスプローラーに、HTDOCSフォルダが表示されます。

vsc39

(6)「index.php」をクリックします。

vsc40

index.phpが表示されます。PHPの文法にあわせて色が付いていて、とても見やすくなっていますね。

vsc41

次に、PHPで「Hello World」を出力してみましょう。

(1)XAMPP Control Panelを起動し、「Apache」「Start」をクリックします。

vsc42

(2)Visual Studio Code「HTDOCS」フォルダの「vsc22」をクリックします。

vsc43

(3)「helloworld.php」と入力し、Enterキーを押します。

vsc44

(4)以下のコードを入力します。

(5)コードの2行目をクリックし、「デバッグ」をクリックして、「ブレークポイントの切り替え」をクリックします。

1行目の左側に赤丸が表示されます。

vsc45

(6)「デバッグ」をクリックして、「デバッグの開始」をクリックします。

ステータスバーがオレンジ色に変わります。

vsc46

(7)ブラウザ「http://localhost/helloworld.php」にアクセスします。

Visual Stduio Codeで、赤丸を付けた行の色が変わります。

vsc47

また、この時点では、ブラウザには何も表示されていないことも確認してください。

(8)「vsc32」をクリックします。

vsc48

この時点で、ブラウザ「Hello World」が表示されたことを確認します。

以上で、PHPの開発環境の構築が終了し、デバッグできることが確認できました。

Javaの開発環境を構築する方法

Visual Studio CodeにはJavaの開発環境は含まれていません。

そのため、Visual Studio Codeとは別に、Javaの開発環境をインストールする必要があります。

Javaのインストールについては、以下の記事で解説していますので、ぜひご覧ください。

では、Visual Studio CodeでJavaの開発環境を構築する方法を解説しましょう。

(1)Visual Studio Codeを起動し、「vsc16」をクリックします。

vsc17

(2)「Java Extension Pack」と入力し、「Java Extension Pack」をクリックします。

vsc68

(3)「vscjava.vscode-java-pack」と表示されていることを確認し、「インストール」をクリックします。

vsc69

(4)「再読み込み」をクリックします。

vsc70

(5)「ファイル」をクリックし、「基本設定」をクリックして、「設定」をクリックします。

(6)「java.home」と入力します。

vsc71

(7)「java.home」の「vsc61」をクリックし、「設定にコピー」をクリックします。

vsc72

(8)「ユーザー設定」「java.home」「”C:\\Program Files\\Java\\jdk-9.0.4″」と入力します。

vsc73

(9)「ファイル」をクリックし、「保存」をクリックします。

(10)「ファイル」をクリックし、「フォルダーを開く」をクリックします。

(11)ソースコード(あとで説明するHelloWorld.java)を保存するフォルダを選択し、「フォルダーの選択」をクリックします。

ここでは、「D:\Visual Studio Code\Java」フォルダを選択しました。

Visual Studio Codeのエクスプローラーに、JAVAフォルダが表示されます。

vsc74

以上で、Javaの開発環境が構築できました。

次に、Javaで「Hello World!!」を出力してみましょう。

(1)「JAVA」フォルダの「vsc22」をクリックします。

vsc75

(2)「HelloWorld.java」と入力し、Enterキーを押します。

vsc76

(3)以下のコードを入力し、「ファイル」をクリックして、「保存」をクリックします。

(4)「デバッグ」をクリックし、「デバッグの開始」をクリックします。

(5)「Java」と入力し、「Java」をクリックします。

vsc77

launch.jsonが作成されます。

(6)「”mainClass”: “HelloWorld”」と表示されていることを確認して、「デバッグ」をクリックし、「デバッグの開始」をクリックします。

vsc78

「Hello World!!」と表示されます。

vsc79

ブレークポイントも使用できますので、試してみてくださいね。

C#の開発環境を構築する方法

他の言語と同様、Visual Studio CodeにはC#の開発環境は含まれていません。

そのため、Visual Studio Codeとは別に、.NET Core SDKを以下のページからダウンロードしてインストールします。

vsc80

参考:https://www.microsoft.com/net/download/windows

では、Visual Studio CodeでC#の開発環境を構築する方法です。

(1)Visual Studio Codeを起動し、「vsc16」をクリックします。

vsc17

(2)「C#」と入力し、「C#」をクリックします。

vsc81

(3)「ms-vscode.csharp」と表示されていることを確認し、「インストール」をクリックします。

vsc82

(4)「再読み込み」をクリックします。

vsc83

(5)「ファイル」をクリックし、「フォルダーを開く」をクリックします。

(6)ソースコード(あとで説明するProgram.cs)を保存するフォルダを選択し、「フォルダーの選択」をクリックします。

ここでは、「D:\Visual Studio Code\C#」フォルダを選択しました。

Visual Studio Codeのエクスプローラーに、C#フォルダが表示されます。

vsc84

以上で、C#の開発環境が構築できました。

次に、C#で「Hello World!」を出力してみましょう。

(1)「表示」をクリックし、「統合ターミナル」をクリックします。

(2)「dotnet new console」と入力し、Enterキーを押します。

vsc85

Program.csなど必要なファイルが作成されます。

(3)「Program.cs」をクリックします。

vsc86

C#のコードが表示されます。

(4)アプリのビルドとデバッグに必要なアセットの追加を求められたときは、「Yes」をクリックします。

vsc87

(5)「デバッグ」をクリックし、「デバッグの開始」をクリックします。

「Hello World!」と表示されます。

vsc88

C#でもブレークポイントは使用できますね。

Markdownエディタとして使用する方法

Visual Studio Codeの言語モードを「Markdown」に変更すると、リアルタイムでプレビューを見ながら、MarkDownで文章を書けます。

(1)Visual Stduio Codeを起動し、「ファイル」をクリックして、「新規ファイル」をクリックします。

(2)右下の「プレーンテキスト」をクリックし、「Markdown」と入力して、「Markdown」をクリックします。

vsc49

(3)エディタに、以下の内容を入力します。

(4)「vsc50」をクリックします。

vsc51

プレビューが表示されます。

vsc52

左側で文章を編集すると、リアルタイムで右側のプレビューに反映されます。

まとめ

今回は、マイクロソフトが開発しているVisual Studio Codeを紹介しました。

簡単な操作で、以下の開発環境やMarkdownエディタとして活用できることが分かっていただけたと思います。

  • Python
  • PHP
  • Java
  • C#

ここで紹介できなかった機能も豊富で、拡張機能による機能追加もできることから、将来性も文句ありません。

また、些細なことかもしれませんが、Eclipseなどと比べると起動が速いことも魅力的です。

もし、機能に不満があったとしても、インターネットで検索してみると、簡単に解決策が見つかるかもしれませんよ!

自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

侍エンジニア塾ブログTech編集部

侍エンジニア塾ブログTech編集部