スライドショー

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

Visual Studio Codeの使い方を分かりやすく解説!

今回は、2015年にリリースされたVisual Studio Codeを紹介します! Visual Studio Codeは、マイクロソフトによって開発されているソースコードエディタです。

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

マイクロソフトが開発しているからWindowsでしか動かないと思っていませんか? ここでは、主にWindowsでの画面を使って説明していますが、Windowsのほかに、Mac OS、Linux上でも動作する優れたエディタです。

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

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

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

Visual Studio Codeとは

shutterstock_86954518

画像:shutterstock

Visual Studio Codeは、多くのプログラミング言語に対応しているソースコードエディタです。以下では、シンタックスハイライトと拡張機能だけを紹介していますが、一部の言語では、インテリセンス(自動補完システム)やデバッグ機能が用意されています。

シンタックスハイライト

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

拡張機能

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

しかし、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"」を以下のように書き替えます。

"locale":"ja"

日本語に変更する場合は「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

画像:shutterstock

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キーを押し、以下の内容を入力します。

    "python.pythonPath": "C:\\Users\\(ユーザーフォルダ)\\Anaconda3\\envs\\py36\\python.exe",
    "terminal.integrated.shell.windows": "D:\\Visual Studio Code\\Python\\terminal.bat"

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

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

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

vsc23

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

vsc24

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

%windir%\system32\cmd.exe "/K" %USERPROFILE%\Anaconda3\Scripts\activate.bat %USERPROFILE%\Anaconda3\envs\py36

(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を以下のように書き替え、「ファイル」をクリックして、「保存」をクリックします。

“””Hello World”””
print(“Hello World”)
(改行を入力してください)

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

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の実行環境を用意する方法については、以下の記事をご覧ください。

【初心者必見!】PHPをインストールする方法
更新日 : 2019年8月20日

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」をテキストエディタで開き、ファイルの末尾に以下の内容を追記します。

[XDebug]
zend_extension = "C:\xampp\php\ext\php_xdebug-2.5.5-7.1-vc14.dll"
xdebug.remote_host = "localhost"
xdebug.remote_port = 9000
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

それでは、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)以下のコードを入力します。

<?php
    echo("Hello World");
?>

(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のインストールについては、以下の記事で解説していますので、ぜひご覧ください。

Javaインストールで初心者がつまずかないための完全攻略ガイド
更新日 : 2019年6月13日

では、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)以下のコードを入力し、「ファイル」をクリックして、「保存」をクリックします。

public class HelloWorld{
    public static void main(String[] args){
        System.out.println("Hello World!!");
    }
}

(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

では、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)エディタに、以下の内容を入力します。

# 見出し

- リスト1
    - リスト2
        - リスト3

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

>お疲れさまです。
>○月×日でお願いします。
>>こちらこそよろしくお願いします。
>>次回は何日がよろしいでしょうか?
>>>お疲れさまです。
>>>今日はありがとうございました。
>>>またよろしくお願いします。

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

vsc51

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

vsc52

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

まとめ

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

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

  • Python
  • PHP
  • Java
  • C#

ここで紹介できなかった機能も豊富で、拡張機能による機能追加もできることから、将来性も文句ありませんまた、些細なことかもしれませんが、Eclipseなどと比べると起動が速いことも魅力的です。

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

侍テック編集部

侍テック編集部

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説