[Visual Studio Code][Windows] C言語をビルド(コンパイル)&ステップ実行する

vscode_catch
 

こんにちは。kei(@boot_kt)です。

今回はVisual Studio Codeを使い、手っ取り早くC言語を動かす方法です。
細かい内容は気にしないでください。

あくまでも、手っ取り早く です。

基本的にこのブログではややこしい事は書きません。
『手っ取り早く』ってのをテーマの一つにしています。

 

この記事の概要

  • エディタ:Visual Studio Code Ver.1.5.3
  • 拡張機能:C/C++、Runner
  • OS:Windows7
  • コンパイラ;gcc(MinGW) or cl(Visual Studio 2015)
本記事での用語について
エディタであるVisual Studio Codeを『VS Code』、統合開発環境であるVisual Studio(2012, 2013, Community, Professional, for Desktop, Express等バージョンは不問)を『Visual Studio 2015』と表記します。
コンパイラのみインストールの場合
Visual Studio Codeなんて要らない!!
コンパイラだけインストールしてC言語使えればええねん!!

とおっしゃる方はコチラの記事をご覧ください。
>> [Win/Mac][超初心者向け]C言語の開発環境の初歩の初歩、シンプルな開発環境を作って使う


 




VS Codeを使ってC言語を手っ取り早く動かす手順(概要)

  1. コンパイラのインストール
  2. VS Codeのインストール
  3. VS Codeの拡張機能のインストール
  4. VS Codeの設定ファイルの書き込み
  5. コンパイル用のbatファイルを作る
  6. プログラムを書いてみよう
  7. プログラムを動かしてみよう
  8. ステップ実行をできるようにするための設定手順

上記手順を次項から説明します。

 

コンパイラのインストール

C言語を実行するためには、C言語で書かれたプログラムを実行ファイル(EXEファイル)に変換する必要があります。
EXEに変換する作業をコンパイル/ビルドと言います。

さすがにVS Code単体ではビルドはできません。

別途コンパイルをしてくれるソフト(コンパイラと呼びます)のインストールが必要になります。

で、コンパイラは二種類あります。
いや、他にもっとありますけど、代表的なのが二種類ってことで。

  • gcc
    言わずと知れたgcc。
    コンパイラと言えばgcc。
    LinuxやMacなら普通に使えるんですけど、Windowsの場合はMinGWというソフトをインストールすることでgccが使えます。
  • Visual Studio 2015
    こちらもご存知、Visual Studio 2015です。
    Visual Studio 2015は統合開発環境ですがコンパイラもインストールされます。ま、当然ですけど。
    cl.exeってのがコンパイラで、gccみたいなもんです。

    『VS Codeを使わなくてもVisual Studio 2015を使えばいいじゃん』と思う人もいるでしょうけど、ちょっとプログラムを書く程度ならVS Codeの方が軽いので使い勝手がよいでしょう。Visual Studio 2015は重いからね。

gccとVisual Studio 2015とどっちを使えばいいの?
どっちでもいいです。
お好きな方を使ってください。

Windowsのアプリケーションを作るならVisual Studio 2015を使うでしょうし、単にC言語の勉強するだけならgccでいいでしょう。
gccはMacでもLinuxでも使えるので、Windows以外を使うことがあるのならgccに慣れ親しめばいいでしょう。

 

・・・と言いたいところですが、gcc(MinGW)をオススメします。
 

VS Codeでステップ実行をする手順を本記事の後半に書いていますが、これはgccでやっています。

Visual Studio 2015の場合でもcdb.exe(Debugging Tools for Windows)を入れればVS Codeでステップ実行できるはずですが、「Visual Studio 2015インストール」→「VS Codeインストール」→「Debugging Tools for Windowsインストール」という手順を踏みます。
Visual Studio 2015という統合開発環境を入れて、VS Codeでステップ実行するのはメリットあるのかなぁ?という風に思っています。

まぁ、そんなの言い出したら、Visual Studio 2015あるのにWindowsでgccとかVS Code使ってC言語の開発環境作るのにメリットあるんかい!?ってなりますけど・・・・(笑)

VS Codeでステップ実行なんて不要だしぃ~
Visual Studio 2015とかインストールするしぃ~
gccなんか使う気無いしぃ~
VS CodeでサクッとEXE作れて即実行できればいいしぃ~

・・・と、思う方はVisual Studio 2015 + VS Codeでこの記事を読み進めてください。

 

gccのインストール

gccのインストールは以下の記事の MinGW の部分を参照してください。
>> WindowsでのC言語の開発環境(Eclipse)

Visual Studio 2015のインストール

Visual Studio 2015のインストールは以下の記事を参照してください。
>> WindowsでのC言語の開発環境(Visual Studio Express)

VS Codeのインストール

  1. VS Codeはここからダウンロードしてください。
     

    vscode_00000

  2. ダウンロードしたらこんなファイルができます。
    vscode_00001
  3. これをダブルクリックして起動します。
    特に何も考えること無くインストール可能です。

    vscode_00002

    vscode_00004 vscode_00005 vscode_00006 vscode_00007 vscode_00008 vscode_00009 vscode_00010 vscode_00011

    vscode_00012

  4. インストールが終了したらGetting Startedのページが開きますが、別に何かするわけじゃないので閉じてもらってOKです。
    vscode_00013

VS Codeの拡張機能のインストール

拡張機能は以下の2つをインストールします。

  • C/C++
    デバッグ情報付きコンパイル+ステップ実行に使います
  • Runner
    即実行するのに使います。(コンパイルもしますが、EXEファイルは即削除します)

C/C++のインストール手順

  1. 以下のいずれかの操作で拡張機能のパネルを出してください
    • メニュー表示(V)拡張機能(X)
    • Ctrl + Shift + X
    • 拡張機能のボタン

    vscode_00016

  2. そしたらこんな画面が出ます
    拡張機能が何も表示されていなければ『C/C++』で検索してください。
    vscode_00017
  3. C/C++のインストールをクリック
  4. こんな感じになるので有効をクリック
    vscode_00018
  5. OKをクリックしてVS Codeを再起動
    vscode_00019
  6. で、こんな画面になります
    vscode_00021

Runnerのインストール手順

  1. 拡張機能のパネルを出します
    ※手順は省略
  2. 『Runner』を検索
  3. Runnerのインストール&有効をクリック
  4. 再起動を促すダイアログが出るのでOKをクリックしてVS Codeを再起動

VS Codeの設定ファイルの書き込み

Runnerを導入したらVS Codeの設定ファイルに『runner.languageMap』の設定値が必要になります。

Runner用の設定

  1. 設定画面を出します。
    ファイル(F)基本設定(P)ユーザー設定(U)

    vscode_00022

  2. settings.json が開きます。
    vscode_00023
    参考情報
    settings.jsonはここにあります↓
    C:\Users\(ユーザー名)\AppData\Roaming\Code\User\settings.json
  3. 左側はデフォルト設定です。必要に応じて参考程度に見てください。
  4. 右側にRunner用の設定を書き込みます。
     
    before

      

    after

    参考情報

    • crun_gcc.bat/crun_vst.batは次項で作ります
    • C:/VisualCodeRunner としていますが、場所はどこでもいいです
    • batのファイル名もお好きに変えてOKです
    • ちなみにパスの記述に (円マーク)は使えません
      /(バックスラッシュ)を使います

JavaとかRubyとかにも対応したい場合

以下を追加してください。

但し、各batファイルを作る必要があります。
本記事ではC言語以外のbatの作り方は説明していませんので、下記の記事を参照してください。

 

コンパイル用のbatファイルを作る

C:/VisualCodeRunner もしくはお好みの場所にフォルダを作ってください。
その中に以下のバッチファイルを作ってください。

ファイル名はお好みで変更してもOKです。

ファイル名やパスを変更したらsettings.jsonに反映してくださいね。

注意:batファイルについて

  • 文字コード:Shift-JIS
  • 改行コード:CR + LF

で作ってください。

コンパイラとしてgccを使う場合

crun_gcc.bat

コンパイラとしてVisual Studio 2015(cl.exe)を使う場合

crun_vst.bat

Visual Studio 2015とか2013とかをインストールすると開発者コマンド プロンプト for VS2015があると思います。

スタートメニューすべてのプログラムVisual Studio 2015Visual Studio Tools開発者コマンド プロンプト for VS2015

vscode_00024

そのプロパティを見てください。
vscode_00025
↓こんな感じになっていると思います。

%comspec% /k “”C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\Tools\VsDevCmd.bat””

%comspec% /k の部分は不要なので、フルパスの部分をコピってください。

このフルパスが上記crun_vst.batで書いているパスと違っていれば、crun_vst.batを書き直してください。

 




 

プログラムを書いてみよう

で、早速プログラムを書いてみましょう。
以下をコピペでいいですよ。

プログラムを動かしてみよう

Ctrl + Shift + R

↑このショートカットで動きます。

コンパイラにgccを使っている場合

vscode_00027

コンパイラにVisual Studo 2015(cl.exe)を使っている場合

vscode_00026
ここまでのまとめ

  • 拡張機能を入れましたが、Runnerの機能だけを使って実行しました
  • Ctrl + Shift + R はRunnerのショートカットキーです
  • C/C++の拡張機能はまだ使っていません

ステップ実行をできるようにするための設定手順

さてここまでの手順を行うと、おそらく #include <stdio.h> の部分に緑の波線が引かれてあると思います。
カーソルをその中に移動すれば電球マークが出るでしょう。
vscode_20001

マウスその上に持っていけば Include file not found in include directory と表示されるでしょう。
vscode_20002

これは拡張機能のC/C++が出しています。
しかしC/C++の機能はまだ使っていませんので問題にはなりませんし、(Runnerによる)実行は可能です。

ここからはC言語のプログラムを一行ずつ実行するステップ実行をできるようにします。
そのためにC/C++の設定を行います。

ここからは以下のプログラムを使います。

C/C++用の設定(インクルードパス/c_cpp_properties.json)

  1. 上記のプログラムをどこかに保存
    まだVS Codeで開かなくていい。むしろVS Codeはまだ何も開かないで。

  2. ファイル(F)フォルダーを開く(F)... で上記ソースコード(step.c)を保存したフォルダを開く vscode_20003
  3. エクスプローラーが表示されるので、step.cをダブルクリックして開く
    今回はSTEP01というフォルダにstep.cを保存している

    vscode_20004
  4. step.cを開くと前述した通り #include のところに緑の波線が出ているので、いずれかの操作をする(どっちでもいいです) vscode_20005
    • 電球アイコンをクリック
      Add include path to settings をクリック

      vscode_20006
    • Ctrl + P
      C/Cpp: Edit Configurations を選択

      vscode_20007
  5. c_cpp_properties.jsonが開くと同時に、step.cの保存フォルダの中に『.vscode』フォルダが自動作成されます。
    .vscodeフォルダの中にc_cpp_properties.jsonが保存されています。

  6. "Win32" のところの "includePath" を確認及び変更します。
    • gcc(MinGW)を使用している場合:
      "includePath": ["C:/MinGW/include"],
    • Visual Studio 2015を使用している場合:
      "includePath": ["C:/Program Files (x86)/Windows Kits/10/Include/10.0.10586.0/ucrt", "c:/Program Files (x86)/Microsoft Visual Studio 14.0/VC/include"],
  7. これでstep.cを確認すると緑の波線は取れているはず

C/C++用の設定(タスクランナー/tasks.json)

Ctrl + Shift + B を押してみてください。
『タスクランナーが構成されていません。』というエラー情報が出るはずです。
以下の手順でtasks.jsonを作ってください。

  1. Ctrl + Shift + P
  2. Tasks: Configure Task Runner (or タスクランナーの構成)を入力or選択
  3. Others(or 任意の外部コマンドを実行する例)を入力or選択
  4. tasks.jsonが開くと同時に、.vscodeフォルダの中にtasks.jsonが保存されています。
  5. tasks.jsonを書き換えます。
    • gccの場合
      "args" に注目してください。
      -g :デバッグ情報を付加してコンパイル(ステップ実行するためにはデバッグ情報をEXEファイルに入れておく必要がある)
      -O0:最適化無しでコンパイル(最適化の意味が分からない方は気にしないでください)

      あと、exeファイル名とcファイル名は必要なものに書き換えてください。

    • Visual Studio 2015の場合
      記事の冒頭にも書きました通り、Visual Studio 2015の場合はメリットが無いと考えていますので省略します
      どうしても実現したい方は以下のサイトが参考になるかと思います。

 

tasks.jsonができたら、Ctrl + Shift + B を押してみてください。
今度はEXEファイルが生成されるはずです。されない場合は、プログラムソースかtasks.jsonのどちらかが間違っているので見直してください。

C/C++用の設定(タスクランナー/launch.json)

画面左の4番目のアイコン(虫みたいなマーク)をクリックするとデバッグのウィンドウが表示されます
vscode_20008

ソースコードの行番号の左側をクリックするか、F9 キーを押すかすればブレイクポイントを付けたり外したりできます。

画面上の緑の▶マーク(再生ボタンみたいなやつ)をクリック

launch.jsonが無いため、このような画面がでます。
vscode_20009

『C++ (GDB/LLDB)』を選択

launch.jsonが開くと同時に、.vscodeフォルダの中にlaunch.jsonが保存されています。

"program" が2箇所あります。
ここは緑の波線が付いているので、書き換えます。

あと、これを追記してください。
「”name”: “C++ Launch”,」のグループに追加すれば良いです。
どこでもいいですが "externalConsole" の次にでも追記してください。

「”name”: “C++ Attach”,」には追記不要です。

ステップ実行する

  1. launch.json への追記が終わったら、step.cに戻って、緑の再生ボタン(デバッグ開始の▶ボタン/F5 キー)をクリック
  2. EXEが実行されて、ブレイクポイントで止まっているはずです。
    vscode_20010

  3. あとは思う存分ステップ実行してください。
    裏にコマンドプロンプトが立ち上がっていると思います。
    Visual Studio Codeの裏に隠れているかも知れませんので注意してください。
    printfなんかはコマンドプロンプトに表示されます。

 




 

参考URL(この記事の元ネタ)

本記事の元ネタは以下のサイトから参照させて頂きました。
有益な情報をありがとうございます。

オマケの情報

VS Codeの拡張機能は以下にインストールされます。

C:\Users\(ユーザー名)\.vscode\extensions

参考書籍

まとめ

VS Codeを使ってC言語やRubyやPythonを動かしたいと思いましたが、セットアップ手順を分かり易くまとめた記事を見つけられず、結構苦労しました。
って言うか、僕が小難しいことは嫌いで理解力も遅いため、順番に手順を書いていないとよく分からないのです。
そのため自分用にこの記事を書きました。

 

最近はAtomを使う事が多くなってきました。
しかしMac版はそこそこ安定していると思うんですけど、Windows版のAtomは不安定な感じがしています。

そこでAtomに代わるものを考えたときに、以前から気になっていたVS Codeに注目しました。
やっぱりなんやかんや言ってもMicrosoft社は技術力高いですし、VS Codeにも期待できると考えたのです。

使い始めてみると動作は軽いですし、見た目とか使い心地とかが結構しっくりきます。
Atomと比べて優れているとかいないとかではなく、感覚的に自分好みというだけですけど。

僕は割りとMicrosoft製品が好きなのでしっくり来るのかも知れません。
 

Windowsで本格的な開発をするのであればVisual Studio 2015を使うといいと思いますが、簡易的な開発環境や日常使いのエディタとしてVS Codeで開発環境を作るのはオススメです。
最初の環境構築の手順が面倒ではありますけど・・・・(笑)

 

・・・・統合開発環境のVisual Studioと名前がカブってややこしいので、VS Codeを正式名称にしてほしかった。この記事でも使い分けにちょっと苦労した(笑)


 

広告
広告

プログラミングを楽しもう!

初心者向けのプログラミング教室やってます!
Skype or 対面で対応致します。
C言語、ExcelVBA、Scratch、Linux初歩の初歩といろいろなコースがあります。
※Rubyコース準備中!

小学生のお子さまにはScrachでプログラミングを楽しんで頂けます。

無料体験がありますので、是非お気軽にレッスンを受けてみてください。
プログラミングは楽しいですよ!

9 件のコメント

  • とてもわかりやすい記事をありがとうございます。
    gccを選択し、この手順通り進めていったのですが、いざrunnerでビルドしてみると出力が

    ‘gcc’ �́A�����R�}���h�܂��͊O���R�}���h�A
    �����”\�ȃv���O�����܂��̓o�b� �t�@�C���Ƃ��ĔF�������Ă��܂����B
    '11110411726.exe' �́A�����R�}���h�܂��͊O���R�}���h�A
    �����”\�ȃv���O�����܂��̓o�b�
    �t�@�C���Ƃ��ĔF�������Ă��܂����B
    C:\Program Files (x86)\Microsoft VS Code\11110411726.exe �����‚����܂����ł����B

    のように文字化けしてしまったり、量が以上に多かったりしてしまいます。
    どうすればよいのでしょうか?

    • batファイルの文字コードはshift-jisになっていますか?
      utf8になっていませんか?
      Shift-jisになってるのにおかしいのであればまたコメントください。

  • 記事を拝見させてい頂きました。
    大変、丁寧に説明されており、設定することが出来ました。

    他の方も、コメントで投稿しておられるのですが、
    出力結果が文字化けしてしまっています。
    コンパイラはGCCを使っています。

    文字コードをShift-JISに変更した上で、実行しても同様の状況となっております。

    • ありがとうございます。

      Shift-JISにされているのはbatでしょうか?

      batとソースコードの文字コードと改行コードを教えて頂けますでしょうか?

      出力結果は、日本語を表示しようとしていますか?

  • 非常にわかりやすい記事をありがとうございます。
    実は当方もgccをコンパイラとして設定し、Runnerで出力したみたのですが、
    文字化けを含んだエラーコードのようなものが出力されました。
    crun_gcc.batの文字コードもShift-JISで保存しましたし、setting.jsonのパスもcrun_gcc.batの場所に変更しました。
    問題のエラーコードは以下の通りです。

    c:/mingw/bin/../lib/gcc/mingw32/5.3.0/../../../../mingw32/bin/ld.exe: cannot open output file 031417182197.exe: Permission denied
    collect2.exe: error: ld returned 1 exit status
    ‘031417182197.exe’ �́A�����R�}���h�܂��͊O���R�}���h�A
    �����”\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF�������Ă��܂����B
    C:\Program Files (x86)\Microsoft VS Code\031417182197.exe �����‚����܂����ł����B

    何が原因なのでしょうか?

    • コメントありがとうございます。

      「C:\Program Files (x86)\Microsoft VS Code」にexeが生成されていると思います。
      おそらくですが、「C:\Program Files (x86)\Microsoft VS Code」にあるexeをVSCodeが実行権限を持っていないように思います。

      ◆ポイント
      crun_gcc.batはどこに置いていますか?
      「C:\Program Files (x86)\Microsoft VS Code」に置いていますか?
      もしそうなら、crun_gcc.batを「C:\Program Files (x86)\Microsoft VS Code」ではなく別の場所に置いてください。

      crun_gcc.batの場所を変えたらsettings.jsonの記述も変更してください。

      settings.jsonはここにあります↓
      C:\Users\(ユーザー名)\AppData\Roaming\Code\User\settings.json

      ——-

      上記の内容が間違っているようでしたら、またコメントください。
      その際、batとjsonの内容、batとjsonを置いている場所、ソースコード、ソースコードを置いている場所もお書き添えください。

  • 返信ありがとうございます。
    「C:\Program Files (x86)\Microsoft VS Code」にexeがあるか見てみましたが、VS code本体のexeとアンインストールのexeしかありませんでした。

    crun_gcc.batの場所「C:\data\VisualCodeRunner\crun_gcc.bat」
    内容「
    @echo off

    REM ——————————————–
    REM 引数が必要
    REM 引数が相対パスでもフルパスに変換
    REM %~d1 – %1 をドライブ文字だけに展開
    REM %~p1 – %1 をパスだけに展開
    REM %~n1 – %1 をファイル名だけに展開
    REM %~x1 – %1 をファイル拡張子だけに展開
    REM ——————————————–
    if “%~dpnx1” equ “” goto :eof

    REM ——————————————–
    REM 環境変数のローカル化開始
    REM ——————————————–
    setlocal

    REM ——————————————–
    REM 一時的に使うexeのファイル名を作る
    REM ——————————————–
    REM 日付と時間を使う、dateの前4桁(YYYY)を削除、timeの:を削除
    set tempfile=%date:~4%%time::=%
    REM / を削除
    set tempfile=%tempfile:/=%
    REM . を削除
    set tempfile=%tempfile:.=%
    REM 空白を削除
    set tempfile=%tempfile: =%

    REM ——————————————–
    REM コンパイル実行(gcc)
    REM ——————————————–
    gcc -o %tempfile%.exe “%~dpnx1”

    REM ——————————————–
    REM EXEファイル実行
    REM ——————————————–
    %tempfile%.exe

    REM ——————————————–
    REM EXEファイル削除
    REM ——————————————–
    del %tempfile%.exe

    REM ——————————————–
    REM 環境変数のローカル化終了
    REM ——————————————–
    endlocal

    jsonの場所「C:\Users\(ユーザ名)\AppData\Roaming\Code\User\settings.json」
    内容「
    // 既定の設定を上書きするには、このファイル内に設定を挿入します
    {
    “runner.languageMap”: {
    “c”: “C:/data/VisualCodeRunner/crun_gcc.bat”
    }
    }

    ソースコードの場所「D:\data\c_test\hello.c」
    内容「
    #include

    int main(void)
    {
    printf(“Hello, World \n”);
    return 0;
    }

    • ◆1.Visual Studio Codeで開いているフォルダ
      これは記事中に書いていません(書いておくべきでしたが、書き漏らしています)
      Visual Studio Codeで開いているフォルダはどこでしょうか?
      左側の一番上の書類2枚みたいなアイコンをクリックするとエクスプローラーというエリアが開きます。
      そこで開いている場所にexeファイルを生成しようとします。
      その開いている場所が「C:\Program Files (x86)\Microsoft VS Code\」ではないでしょうか?
      「ファイル(F) → フォルダーを開く(F)…」で、ソースコードのある場所「D:\data\c_test\」を開いてみてください。

      ◆2.ソースコード
      #include にがありませんが、コピペミスでしょうか?

      ◆3.ダブルクォーテーション
      crun_gcc.batとsettings.jsonとソースコードのダブルクォーテーションが全角になっていますが、コメント欄にコピペした際に自動で全角になっただけであればいいですが、お手元のcrun_gcc.batとsettings.jsonとソースコードのダブルクォーテーションは半角になっていますか?

      ◆4.再現確認では再現せず
      私の手元で再現させましたが、正常に動作しました。(「Hello, World」と表示されます)
      ソースコードの場所「D:\data\c_test\hello.c」をCドライブに変更した以外は全て貼り付けられたものをコピーした上で動作させています。

  • 原因がわかりましたのでご報告させていただきます。
    ソースコードを開くときにフォルダーで開かずにそのファイル単体で開いていました。
    ご指摘いただいととおり「ファイル(F) → フォルダーを開く(F)…」で該当のフォルダを開いた上、ソースコードを開いて実行すると正常に動作しました。
    つまり、VS Codeは開いているフォルダがないから「C:\Program Files (x86)\Microsoft VS Code\」で実行しようとしていたのだと思います。

    度々、お答え頂き本当にありがとうございました。
    これからもこちらのサイトを参考にさせていただこうと思います!

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    Windows/Mac/Linuxを使う現役システムエンジニア&プログラマ。オープン系・組み込み系・制御系・Webシステム系と幅広い案件に携わる。C言語やC#やJava等数多くのコンパイラ言語を経験したが、少し飽きてきたので、最近はRubyやPython、WordPressなどのWeb系を修得中。初心者向けのプログラミング教室も運営中。オンライン・対面・出張等でプログラミングをレッスンします。