talosのプログラミング教室

WSLとVSCodeで快適な開発環境をつくる

スポンサーリンク

はじめに

こんにちは。talosです。

今回はVSCodeを使ってWSLをもっと使いやすくしようと思います。

ちなみにWSLの環境があることを前提にしていますので、まだの方はこちらからWSLの準備をしてください。

talosta.hatenablog.com

VSCodeとは

VSCodeはVsual Studio Codeの略です。(Wikipediaによると少し語弊があるようですが)

Microsoftが開発した高機能テキストエディタで、統合開発環境IDE)ではありません

つまりコンパイラなどが入っていないので、コンパイルや実行をするためには別の環境が必要になります。

似た名前のVisual Studioというものがありますが、こちらはIDEなのでコンパイルや実行もできます。

「じゃあそっちを使えばいいじゃん」って思うかもしれませんが、IDEはいろいろ入っているので動作が重かったりします。

どちらを使うかは好みですね。


私の記事を見てWSLの環境を構築した方はemacsを使っていると思います。

emacsは慣れている人はかなり使いやすいですが、初心者からすると機能を十分に生かせないと思います。


そこで、GUIで操作できるVSCodeをインストールしていきたいと思います。

スポンサーリンク



VSCodeをインストール

まずはVSCodeをダウンロードします。

こちらのサイトのDownload for Windowsというボタンを押してください。
Visual Studio Code - Code Editing. Redefined

f:id:talosta:20190603174803p:plain

ダウンロードが終わったら、exeファイルをダブルクリックして実行してください。(基本的にはダウンロードフォルダにあると思います)

すると、このような画面が開くので、「次へ」を押してください。

f:id:talosta:20190603175113p:plain


使用許諾契約書の同意

「同意する」にチェックして、「次へ」を押してください。

f:id:talosta:20190603175231p:plain


インストール先の指定

インストール先のフォルダを指定して、「次へ」を押してください。(そのままでも大丈夫です)

f:id:talosta:20190603175343p:plain


プログラムグループの指定

特に変更する必要はないので、「次へ」を押してください。

f:id:talosta:20190603175628p:plain


追加タスクの選択

こちらも基本的にはそのままで大丈夫です。

もしデスクトップに置きたい場合は、「デスクトップ上にアイコンを作成する」にチェックして、「次へ」を押してください。

f:id:talosta:20190603180115p:plain


インストール準備完了

間違いがなければ「インストール」を押してください。

f:id:talosta:20190603180530p:plain


インストールが終わると下のような画面が出るので、「完了」を押してください。

f:id:talosta:20190603180456p:plain


すると、VSCodeが開いたと思います。

皆さんお気づきですか?

そう、英語です。

英語でもよい方は次の章を飛ばしてください。

VSCodeを日本語にする

① 左側にある上から5番目の四角いアイコンを押してください。

② 検索窓が出てくるので、そこに「japan」と入力してください。

③ 「Japanese Language Pack for Visual Studio Code」のところにある緑色の「Install」を押してください。

f:id:talosta:20190603181810p:plain


インストールが終わると右下にポップアップが出るので、「Restart Now」を押してください。

f:id:talosta:20190604133131p:plain


日本語になりました。

f:id:talosta:20190603182043p:plain

VSCodeのターミナルにWSLを設定する

まず、Ctrl+@を押してください。

すると、ターミナルが開きます。

しかし、「Window PowerShell」と書いてありますね。

f:id:talosta:20190604133212p:plain


WSLを使えるようにしましょう。

Ctrl+Shift+pを押すと検索窓が出てきます。

そこに「shell」と打ち込んでください。

そうすると下に候補がいくつか出てくるので、その中から「既定のシェルの選択」を選択してください。

f:id:talosta:20190604132925p:plain


押すとまた候補がいくつか出てくるので、その中から「WSL Bash」を選択してください。

f:id:talosta:20190604133315p:plain


終わったら再起動します。

ターミナルを開くとWSLになりました。

f:id:talosta:20190604133358p:plain

使ってみる

早速使ってみましょう。

以前私の記事を見てWSLをインストールした方はGCCが入っていると思うので、今回もC言語を使います。

日本語にしたときと同様に拡張機能のアイコン(四角いアイコン)をクリックし、検索窓に「C」と入力してください。

すると一番上に「C/C++」というのが出てくるので、それをインストールします。

このようにVSCodeでは言語ごとに拡張機能をインストールする必要があります。


ここで一つ残念なお知らせがあります。

WindowsからインストールしたVSCodeではWSL上のファイルを開いたり、WSL上に保存したりできませんでした。(できるかもしれないけど手間がかかる)

なのでデスクトップなどにコードを保存するフォルダを作成し、そこで開発することをおすすめします。


気を取り直してやっていきましょう。

まず、デスクトップなどにコードを保存するフォルダを作成し、VSCodeのターミナルでそこに移動してください。(cdコマンドを使う)

そうしたら、下のコマンドを実行してください。(ファイル名はなんでもいいです)

code sample.c

これで、sample.cというファイルがVSCodeで開けます。

それでは好きなようにコードを書いてください。

書いたらCtrl+sで保存しましょう。

念のため先ほど作成したフォルダの中に、sample.cがあるか確認してください。

あったらターミナルでコンパイルをしてください。

gcc -o sample sample.c

できたら実行します。

./sample

動きましたか?

動いたら動作の確認は終了です。


おわりに

今日はVSCodeをインストールし、WSLのシェルを使えるようにしました。

WSLからVSCodeをインストールしてもよかったのですが、そうするとX serverなどが必要になり、遅延が生じたりするかもしれないのでWindowsからインストールする方法をとりました。

それが思わぬ弊害を生んでしまいましたが。。。

今回紹介したことは最低限のことなので、いろいろな拡張機能を使ってより快適な環境開発を作ってみましょう。