Webアプリケーション プログラミング系 WEB開発 環境構築

【環境構築】vscodeとubuntu(wsl)を連携する方法を紹介

こんにちは、TAKです。
今回は、Windowsユーザー向けにWEB開発に必要な環境構築を紹介していきたいと思います。

具体的には、Windows10でLinuxを動かせる環境「wsl(ubuntu)」をテキストエディタ「vscode」上で使えるようにすることを目的とした備忘録兼ねた記事です。

【こんな人に読んで欲しい記事です】

● wsl(ubuntu)をvscode上で使えるようにしたい方

※ ubuntuアカウントやvscodeのインストールが完了している前提

【手順】vscode設定 ⇒ jsonコード反映 ⇒ ターミナルで操作

まずはvscodeを開いて「Setting」していきます。
vscodeの左下あたりに歯車マークがあるので、ここから設定変更が可能です。

vscode上の設定画面

すると、以下のような画面が出てくるかと思います。

「Setting」を押した後の画面

続いて、ウィンドウ画面に「Shell」と入力してください。

「shell」を入力した後の画面

少し下の方にスクロールさせていくと、以下赤枠のような画面があるので、そこにあるリンク先に移動します。これから、リンク先にあるjsonコードを取得して、vscodeに反映させる作業をしていきます。

リンク先のコードを取得して、jsonの設定をする

リンク先の取得すべきコードは、以下画面の赤枠部分となります。

ubunus(wsl)をvscodeで使えるようにするために必要なコード

これをコピーして、「Edit in setting json」に貼り付けします。

「Edit in setting json」の画面
貼り付け後のイメージ

この設定を保存(Ctrl + S)して、「Ctrl + @」でTerminalウィンドウを開きましょう。
すると、以下のようにubuntuと同じような画面がvscode上で表示されるのがわかります。

ターミナルウィンドウに「ubuntu(wsl)」のコードが表示されていることがわかる。

設定自体はこれで完了となります。
やり方さえわかってしまえば一瞬で終わってしまいます。
あとは、このTerminal上で好きなように操作していけばいいだけです。

試しに、pythonのバージョンを確認してみます。

うまく動作していることがわかります。

非常にシンプルですが、上記のように設定しておくことでvscodeから気軽にubuntuを使えるようになります。WEB開発でも効率的にコードを書けるようになるので、是非使えるようにしてみてください。

では今回はこのへんで。