この記事でわかること
WSL (Windows Subsystem for Linux) とVSCodeを組み合わせることで、Linux環境かつVSCodeによるGUIでの開発を可能とする開発環境構築手順を解説します。
本記事を前提として、次回記事でTypeScriptの開発環境構築手順を解説予定なので、よかったらぜひ試してみてください。
投稿しました：[TypeScript環境構築] VSCodeとWSLを活用した効率的な開発環境の構築
この記事の対象読者
・JavaScriptやTypeScript、Python等でとりあえず開発をやってみたいが、どう環境構築すればわからない方
・windows環境をできるだけ汚さず、なるべく仮想環境で開発を完結させたい方
・将来的にdockerやdocker compose等の拡張を予定している方
・効率の良い開発環境を模索している方
この記事の環境の利点
-
VSCodeから直接Linuxコマンドを実行可能
開発環境をWSLに構築し、VSCodeでアクセスすることで、VSCodeのターミナルから直接Linuxコマンドを実行できます。
タブ補完も当然機能するため、特にTypeScriptのスクリプトを実行する際のファイルパス指定等が非常に楽になります。 -
拡張性の高さと効率
開発環境がLinuxベースとなるため、テスト環境や本番環境により近い環境での開発が可能となるほか、dockerやdocker composeといった拡張も容易となります。
本記事の趣旨はWSLとVSCodeでの開発環境構築であるためdocker等は取り扱いませんが、今後別記事で取り扱う予定です。
目次
- WSLのインストール
- VSCodeのインストールとWSL拡張機能のセットアップ
- WSLとVSCodeの連携方法
- プロジェクトディレクトリの作成と操作
1. WSLのインストール
WSLをインストールし、起動します。
WSLは開発環境を構築する場所であり、VSCodeから接続する相手でもあります。
今回はLinuxディストリビューションとしてUbuntuを選択しましたが、もちろんほかのディストリビューションでも問題ありません。
手順
-
Microsoft StoreでUbuntuを検索
Ubuntu (筆者は22.04.5を選択) をインストールします。 -
ターミナルでWSLを起動
ターミナルを開き、wslと入力して起動します。初回起動時にはユーザー設定が求められるので、必要な情報を入力してください。
2. VSCodeのインストールとWSL拡張機能のセットアップ
VSCodeのインストールと、VSCodeからWSLへ直接接続するための拡張機能をインストールします。
開発環境はWSLに構築しますが、それだけだとコマンドラインベースで開発がしんどいです。
VSCodeにWSLへ接続する拡張機能を導入することで、開発環境をWSLに置きつつVSCodeで開発を行なうことができます。
手順
-
VSCodeのインストール
Microsoft StoreからVSCodeを検索してインストールします。 -
WSL拡張機能のインストール
VSCodeの拡張機能タブで「Remote - WSL」を検索し、インストールします。
3. WSLとVSCodeの連携方法
VSCodeからWSLへ接続し、VSCodeからWSLのターミナルを開きます。
これにより、WSLの開発環境をVSCodeで直接操作可能になり、さらにWSLへのLinuxコマンドもVSCodeから実行できるようになります。
手順
-
リモートエクスプローラーの使用
VSCodeを再起動すると「リモートエクスプローラー」が表示されます。
リモートエクスプローラーにインストールしたWSL（今回はUbuntu 22.04.5）が表示されているので、名前の横の→をクリックして接続します。 -
WSLのターミナル操作
VSCodeの右上にある「パネル切り替え」ボタンでターミナルを表示します。
ターミナルでは、VSCode上でWSLに対するLinuxコマンドを実行可能です。
4. プロジェクトディレクトリの作成と操作
開発環境を構築するためのプロジェクトディレクトリを作成し、VSCodeからディレクトリを開きます。
コマンドはVSCodeのターミナルから実行可能です。
-
ディレクトリの作成
mkdir -p ~/projects/<プロジェクト名>補足：-pは中間ディレクトリ（今回はprojects）を一括作成するオプションです。
これをつけないとprojectsが存在しませんというエラーになります。 -
ディレクトリをVSCodeで開く
左上の「ファイル」→「フォルダーを開く」からディレクトリを指定します。
これで、作成したプロジェクトディレクトリをVSCodeで開くことができます。
次の記事
次回はTypeScriptの環境構築手順を解説します。現在執筆中のため、完成次第リンクを追加しますのでお楽しみに！
投稿しました：[TypeScript環境構築] VSCodeとWSLを活用した効率的な開発環境の構築