Windows Subsystem for Linux で Visual Studio Code の使用を開始するGet started using Visual Studio Code with Windows Subsystem for Linux

Visual Studio Code をリモート WSL 拡張機能と共に使用すると、WSL を完全な開発環境として VS Code から直接使用できます。Visual Studio Code, along with the Remote - WSL extension, enables you to use WSL as your full-time development environment directly from VS Code. 次のようにすることができます。You can:

  • Linux ベースの環境での開発develop in a Linux-based environment
  • Linux 固有のツールチェーンとユーティリティを使用するuse Linux-specific toolchains and utilities
  • Outlook や Office などの生産性向上ツールへのアクセスを維持しながら、Windows の快適さを利用して Linux ベースのアプリケーションを実行およびデバッグするrun and debug your Linux-based applications from the comfort of Windows while maintaining access to productivity tools like Outlook and Office
  • VS Code 組み込みターミナルを使用して、選択した Linux ディストリビューションを実行します。use the VS Code built-in terminal to run your Linux distribution of choice
  • Intellisense コード補完 、インライン処理、デバッグサポートコードスニペット単体テストなどの VS Code 機能を活用するtake advantage of VS Code features like Intellisense code completion, linting, debug support, code snippets, and unit testing
  • VS Code の組み込みのGit サポートを使用して、バージョン管理を簡単に管理easily manage your version control with VS Code's built-in Git support
  • WSL プロジェクトでコマンドと拡張機能を直接実行する VS Coderun commands and VS Code extensions directly on your WSL projects
  • パスの問題、バイナリの互換性、またはその他の OS 間の課題を気にせずに、Linux またはマウントされた Windows ファイルシステム (/mnt/c など) のファイルを編集します。edit files in your Linux or mounted Windows filesystem (for example /mnt/c) without worrying about pathing issues, binary compatibility, or other cross-OS challenges

VS Code とリモート WSL 拡張機能をインストールするInstall VS Code and the Remote WSL extension

  • VS Code インストールページにアクセスし、32または64ビットインストーラーを選択します。Visit the VS Code install page and select the 32 or 64 bit installer. (WSL ファイルシステムではなく) Windows に Visual Studio Code をインストールします。Install Visual Studio Code on Windows (not in your WSL file system).

  • インストール中に追加のタスクを選択するように求めるメッセージが表示されたら、[パスの追加] オプションをオンにして、wsl 内のフォルダーをコードコマンドで簡単に開くことができるようにします。When prompted to Select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command.

  • リモート開発拡張機能パックをインストールします。Install the Remote Development extension pack. この拡張パックには、リモート SSH およびリモートコンテナーの拡張機能に加えて、リモートの WSL 拡張機能が含まれており、コンテナー、リモートコンピューター、または WSL で任意のフォルダーを開くことができます。This extension pack includes the Remote - WSL extension, in addition to the Remote - SSH, and Remote - Containers extensions, enabling you to open any folder in a container, on a remote machine, or in WSL.

重要

リモート WSL 拡張機能をインストールするには、VS Code の1.35 リリースバージョン以降が必要になります。In order to install the Remote-WSL extension, you will need the 1.35 May release version or later of VS Code. リモート WSL 拡張機能を使用せずに VS Code で WSL を使用することはお勧めしません。オートコンプリート、デバッグ、インライン処理などのサポートが失われるためです。楽しい事実: この WSL 拡張機能は $HOME/.vscode/extensions にインストールされます (PowerShell でコマンドを入力してください ls $HOME\.vscode\extensions\ )。We do not recommend using WSL in VS Code without the Remote-WSL extension as you will lose support for auto-complete, debugging, linting, etc. Fun fact: this WSL extension is installed in $HOME/.vscode/extensions (enter the command ls $HOME\.vscode\extensions\ in PowerShell).

Linux ディストリビューションを更新するUpdate your Linux distribution

一部の WSL Linux ディストリビューションでは、VS Code サーバーが起動するために必要なライブラリが不足しています。Some WSL Linux distributions are lacking libraries that are required by the VS Code server to start up. パッケージマネージャーを使用して、Linux ディストリビューションに追加のライブラリを追加できます。You can add additional libraries into your Linux distribution by using its package manager.

たとえば、Debian または Ubuntu を更新するには、次のように使用します。For example, to update Debian or Ubuntu, use:

sudo apt-get update

Wget (web サーバーからコンテンツを取得するため) および ca 証明書を追加するには (SSL ベースのアプリケーションが SSL 接続の信頼性を確認できるようにするため)、次のように入力します。To add wget (to retrieve content from web servers) and ca-certificates (to allow SSL-based applications to check for the authenticity of SSL connections), enter:

sudo apt-get install wget ca-certificates

Visual Studio Code で WSL プロジェクトを開くOpen a WSL project in Visual Studio Code

コマンドラインからFrom the command-line

WSL ディストリビューションからプロジェクトを開くには、ディストリビューションのコマンドラインを開き、次のように入力します。code .To open a project from your WSL distribution, open the distribution's command line and enter: code .

VS Code リモートサーバーで WSL プロジェクトを開く

VS Code からFrom VS Code

コマンドパレットを表示するには、ショートカット: VS Code を使用して、VS Code リモートオプションにアクセスすることもできます。 CTRL+SHIFT+PYou can also access more VS Code Remote options by using the shortcut: CTRL+SHIFT+P in VS Code to bring up the command palette. 入力すると、[ VSCODE-REMOTE VS Code のリモートオプションがすべて表示されます。これにより、リモートセッションでフォルダーを再度開き、開く配布を指定することができます。If you then type VSCODE-REMOTE you will see all of the VS Code Remote options available, allowing you to reopen the folder in a remote session, specify which distribution you want to open in, and more.

VS Code のコマンドパレット

VS Code リモート内の拡張機能Extensions inside of VS Code Remote

リモート WSL 拡張機能は、VS Code を "クライアント/サーバー" アーキテクチャに分割します。このアーキテクチャでは、Windows コンピューター上で実行されているクライアント (ユーザーインターフェイス) と、リモートで実行されているサーバー (コード、Git、プラグインなど) が使用されます。The Remote-WSL extension splits VS Code into a “client-server” architecture, with the client (the user interface) running on your Windows machine and the server (your code, Git, plugins, etc) running remotely.

VS Code リモートで実行しているときに、[拡張機能] タブを選択すると、ローカルコンピューターと WSL 分散の間に分割された拡張機能の一覧が表示されます。When running VS Code Remote, selecting the 'Extensions' tab will display a list of extensions split between your local machine and your WSL distribution.

テーマなどのローカル拡張機能のインストールは、1回だけインストールする必要があります。Installing a local extension, like a theme, only needs to be installed once.

Python 拡張機能などの一部の拡張機能や、lint デバッグなどを処理するものは、リモートの wsl ディストリビューションごとに個別にインストールする必要があります。Some extensions, like the Python extension or anything that handles things like linting or debugging, must be installed separately on each remote WSL distributions. WSL リモートにインストールされていない拡張機能がローカルにインストールされている場合は、VS Code によって、警告アイコンと ⚠ 緑色の [wsl にインストール] ボタンが表示されます。VS Code will display a warning icon ⚠, along with a green "Install in WSL" button, if you have an extension locally installed that is not installed on your WSL Remote.

リモート WSL 拡張機能とローカル拡張機能の VS Code

詳細については、VS Code のドキュメントを参照してください。For further information, see the VS Code docs:

  • WSL で VS Code リモートが開始されると、シェルスタートアップスクリプトは実行されません。When VS Code Remote is started in WSL, no shell startup scripts are run. 追加のコマンドを実行する方法、または環境を変更する方法の詳細については、この高度な環境セットアップスクリプトに関する記事を参照してください。See this advanced environment setup script article for more info on how to run additional commands or modify the environment.

  • WSL コマンドラインから VS Code を起動するときに問題が発生する場合は、Having problems launching VS Code from your WSL command line? このトラブルシューティングガイドには、パス変数の変更、依存関係の欠落に関する拡張機能のエラーの解決、Git 行の終了に関する問題の解決、リモートコンピューターへのローカル VSIX のインストール、ブラウザーウィンドウの起動、ブロック localhost ポート、web ソケットの起動、拡張データの格納エラーなどに関するヒントが記載されています。This troubleshooting guide includes tips on changing path variables, resolving extension errors about missing dependencies, resolving Git line ending issues, installing a local VSIX on a remote machine, launching a browser window, blocker localhost port, web sockets not working, errors storing extension data, and more.

Git のインストール (省略可能)Install Git (optional)

共同作業で開発する場合や、(GitHub のような) オープンソース サイトでプロジェクトをホストする場合のために、VS Code では Git によるバージョン管理がサポートされています。If you plan to collaborate with others, or host your project on an open-source site (like GitHub), VS Code supports version control with Git. VS Code の [ソース管理] タブでは、すべての変更が追跡され、一般的な Git コマンド (追加、コミット、プッシュ、プル) が UI に組み込まれています。The Source Control tab in VS Code tracks all of your changes and has common Git commands (add, commit, push, pull) built right into the UI.

Git をインストールするには、「 Windows Subsystem For Linux で動作するように git を設定する」を参照してください。To install Git, see set up Git to work with Windows Subsystem for Linux.

Windows ターミナルをインストールする (省略可能)Install Windows Terminal (optional)

新しい Windows ターミナルでは、複数のタブが有効になり (コマンドプロンプト、PowerShell、または複数の Linux ディストリビューションをすばやく切り替えることができます)、カスタムキーバインド (タブを開いたり閉じたりするための独自のショートカットキーを作成する、コピーと貼り付けなど)、絵文字☺、カスタムテーマ (配色、フォントスタイルとサイズ、背景画像、The new Windows Terminal enables multiple tabs (quickly switch between Command Prompt, PowerShell, or multiple Linux distributions), custom key bindings (create your own shortcut keys for opening or closing tabs, copy+paste, etc.), emojis ☺, and custom themes (color schemes, font styles and sizes, background image/blur/transparency). 詳細については、 Windows ターミナルのドキュメントを参照してください。Learn more in the Windows Terminal docs.

  1. Microsoft Store で Windows ターミナルを取得します: ストアを介してインストールすると、更新プログラムが自動的に処理されます。Get Windows Terminal in the Microsoft Store: By installing via the store, updates are handled automatically.

  2. インストールが完了したら、Windows ターミナルを開き、 [設定] を選択して、profile.json ファイルによってターミナルをカスタマイズします。Once installed, open Windows Terminal and select Settings to customize your terminal using the profile.json file.

その他の情報Additional Resources

他にも検討をお勧めする拡張機能として、次のようなものがあります。A few additional extensions you may want to consider include:

  • 他のエディターからのキーマップ: これらの拡張機能は、別のテキスト エディター (Atom、Sublime、Vim、eMacs、Notepad++ など) から移行する場合に、ご利用の環境を快適に保つのに役立ちます。Keymaps from other editors: These extensions can help your environment feel right at home if you're transitioning from another text editor (like Atom, Sublime, Vim, eMacs, Notepad++, etc).
  • 設定の同期: GitHub を使用して、異なるインストール間で VS Code の設定を同期させることができます。Settings Sync: Enables you to synchronize your VS Code settings across different installations using GitHub. 複数のコンピューターで作業する場合、この機能によってコンピューター間で環境の一貫性を保つことができます。If you work on different machines, this helps keep your environment consistent across them.
  • Chrome のデバッガー: Linux でサーバー側で開発を完了したら、クライアント側を開発してテストする必要があります。Debugger for Chrome: Once you finish developing on the server side with Linux, you'll need to develop and test the client side. この拡張機能により、ご利用の VS Code エディターと Chrome ブラウザーのデバッグ サービスが統合され、効率がより向上します。This extension integrates your VS Code editor with your Chrome browser debugging service, making things a bit more efficient.