VSCode/WSL上の開発環境構築 Basic2
前回 の続きです。

前回は、Windows10のWSL機能を有効化、Ubuntu on WSL を導入しました。
今回は開発環境の構築を始めます。

STEPs

  • Windows Terminal の導入
  • VSCode の導入
  • Windows Terminal の導入

Windows上でミニマルな開発環境を整えるうえで常に問題になってくるのが
コマンドを用いたテキストライン処理環境の貧弱さでした。

Windows Terminalはついに登場したMicrosoft謹製のターミナルソフトウェアで
コマンドプロンプト / PowerShell / Shell on WSL
など主なコマンドラインシェルに対応しています。

未だPreview版ですが十分使えると思うので導入をお勧めします。

Windows Terminal も Microsoft Store から無料で入手が可能です。

Windows Terminal @Microsoft Store

初回起動時は 上のように青い画面のPowerShell がデフォルトで立ち上がるかと思います。
今回は Ubuntuのシェル(bash)を主に利用したいので設定を変更します。

Preview版ではグラフィカルな設定ツールは付属しておらず、設定ファイルを直接
編集する形になります。

Ctrl + , を入力して設定ファイルを開きます。
設定ファイルは大まかに以下の構造をとります。

"profiles" : 
 [
    {
        プロファイル1
    },
    {
        プロファイル2
    }
 ]

設定ファイル中段の profile のセクションに設定を追記できます。
今回の場合、Windows Terminal導入前にUbuntuの設定が完了しているので
自動でUbuntuの設定が以下のように生成されているはずです。
"name" が Ubuntu になっているものがそうです。
"guid" はランダムに生成されますので環境ごとに違う値になります。

        {
            "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
            "hidden": false,
            "name": "Ubuntu",
            "source": "Windows.Terminal.Wsl"
        }

この設定に追記して以下のようにします。
追記する際は 元々の最終行である "source": "Windows.Terminal.Wsl"の
後ろにもカンマが必要であることに注意してください。
このカンマがないだけで設定ファイルの解釈が破綻して設定がすべて無効になります。

        {
            "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
            "hidden": false,
            "name": "Ubuntu",
            "source": "Windows.Terminal.Wsl",
         "useAcrylic" : true,
            "acrylicOpacity" : 0.75,
            "padding" : "5, 0, 0, 0",
            "fontSize" : 11
        }

useAcrylic で半透明効果を有効にします。
acrylicOpacityは半透明効果の透明度の設定です。
paddingは表示域のパディングの設定で 5pxだけウインドウ左端に余裕を設けます。
fontSizeはご自由に設定してください。

最後に guidの値をコピーしておきます。

設定ファイル冒頭部に

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "globals" : 
    {
        "alwaysShowTabs" : true,
        "defaultProfile" : "{2c4de342-38b7-51cf-b940-2309a097f518}",
        "initialCols" : 120,
        "initialRows" : 30

デフォルトプロファイルの設定があるので今コピーした guidで置き換えます。
これでWindows Terminalの起動時にデフォルトでUbuntuのシェル立ち上がるようになります。

設定が終わったらWindows Terminalを再度起動します。
↑のように半透明のきれいなターミナルが起動したら設定成功です。

Visual Studio Codeの導入

Visual Studio Code は様々な環境で動作するソースコードエディタです。
Visual Studioというそっくりな名前のアプリケーションもあるですが、
Visual Studio がソースコードエディタだけでなく大規模な開発環境を丸ごと提供するのに
対して Codeは基本的にソースコードエディタを主機能とします。
ただ、ソースコードディタとしてはかなり多機能で、柔軟な設定で様々なプログラミング言語や
記法をサポートします。

VSCode Linuxでも動作しますが、今回はWSL側にではなくホストのWindows環境に導入します。

Visual Studio Code こちらから最新版のインストーラが入手できるので

インストールを済ませてください。

WSLとの連携

今回VSCodeを採用した最大の理由はWSLとの連携が可能であるという点です。
インストールが終わったら早速VSCodeを起動してください

無事起動できたら、↑赤枠で囲んだ Extension を開きます。
ここでは様々な追加機能をVSCodeに追加できます。

左上検索欄に remote と入力すると

Remote - WSL
というペンギンマークのExtensionがありますのでこれをインストールしてください。

インストールできたら、VSCodeを再起動します。

プラグインが正常に有効になっていれば、VSCodeの下部バーに緑色のボタンが表示
されているはずです。
ここをクリックすると 画面上部にコマンドパレットが自動でひらくので

Remote-WSL: NEW Window
をクリックします。

 

下部の緑ボタンの表示が WSL: Ubuntu に切り替わっていたら設定終了です。

設定によっては右画像のようにセキュリティ警告がでる場合があります。
WindowsとWSL間での通信を行うのでセキュリティ設定によっては
プログラムの通信に許可が必要な場合があるためです。
問題ないので アクセスを許可する を選択します。

これでVSCodeを使って WSL上で開発環境を構築する準備はすべて完了です。
ここからは使用するプログラミング言語や環境ごとの設定を行います。

お疲れさまでした。

コメントを追加する