手把手教你配置vscode+wsl开发环境

The Visual Studio Code WSL extension lets you use the Windows Subsystem for Linux (WSL) as your full-time development environment right from VS Code. You can develop in a Linux-based environment, use Linux-specific toolchains and utilities, and run and debug your Linux-based applications all from the comfort of Windows.

The extension runs commands and other extensions directly in WSL so you can edit files located in WSL or the mounted Windows filesystem (for example /mnt/c) without worrying about pathing issues, binary compatibility, or other cross-OS challenges.

WSL Architecture

This lets VS Code provide a local-quality development experience — including full IntelliSense (completions), code navigation, and debugging — regardless of where your code is hosted.

Getting started

Note: After reviewing this topic, you can get started with the introductory WSL tutorial.

Installation

To get started, you need to:

1. Install the Windows Subsystem for Linux along with your preferred Linux distribution.

Note: WSL 1 does have some known limitations for certain types of development. Also, extensions installed in Alpine Linux may not work due to glibc dependencies in native source code inside the extension. See the Remote Development and Linux article for details.

2. Install Visual Studio Code on the Windows side (not in WSL).

Note: 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.

3. Install the Remote Development extension pack.

Open a remote folder or workspace

FROM THE WSL TERMINAL

1. Opening a folder inside the Windows Subsystem for Linux in VS Code is very similar to opening up a Windows folder from the command prompt or PowerShell.

2. Open a WSL terminal window (using the start menu item or by typing wsl from a command prompt / PowerShell).

Navigate to a folder you’d like to open in VS Code (including, but not limited to, Windows filesystem mounts like /mnt/c)

3. Type code . in the terminal. When doing this for the first time, you should see VS Code fetching components needed to run in WSL. This should only take a short while, and is only needed once.

这一步会安装vscode server，并且生成.vscode文件夹

Note: If this command does not work, you may need to restart your terminal or you may not have added VS Code to your path when it was installed.

4. After a moment, a new VS Code window will appear, and you’ll see a notification that VS Code is opening the folder in WSL.
   
   VS Code will now continue to configure itself in WSL and keep you up to date as it makes progress.

5. Once finished, you now see a WSL indicator in the bottom left corner, and you’ll be able to use VS Code as you would normally!
   
   That’s it! Any VS Code operations you perform in this window will be executed in the WSL environment, everything from editing and file operations, to debugging, using terminals, and more.

FROM VS CODE

Alternatively, you can open a WSL window directly from VS Code:

1. Start VS Code.
2. Press F1, select WSL: New WSL Window for the default distro or WSL: New WSL Window using Distro for a specific distro.
3. Use the File menu to open your folder.

If you already have a folder open, you can also use the WSL: Reopen Folder in WSL command. You will be prompted which distro to use.

If you are in a WSL window and want to open the current input in a local window, use WSL: Reopen in Windows.

FROM THE WINDOWS COMMAND PROMPT

1. To open a WSL window directly from a Windows prompt use the --remote command line parameter:

code --remote wsl+

for example: code --remote wsl+Ubuntu /home/jim/projects/c

2. We need to do some guessing on whether the input path is a file or a folder. If it has a file extension, it is considered a file.

To force that a folder is opened, add slash to the path or use:

code --folder-uri vscode-remote://wsl+Ubuntu/home/ubuntu/folder.with.dot

To force that a file is opened add --goto or use:

code --file-uri vscode-remote://wsl+Ubuntu/home/ubuntu/fileWithoutExtension

#如果是C++开发人员，打开wsl上的folder之后，创建.cpp文件，然后根据vscode的提示配置task.json和launch.json即可（不用担心，vscode已经提供了非常方便的配置模板，没有必要从别人的博客去copy）,这些文件都存在于当前目录下的.vscode目录：
我的如下：
launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(gdb) Launch",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/main", #只有这一行是自己编辑过的，其他的全是默认，方便吧？
            "args": [],
            "stopAtEntry": false,
            "cwd": "${fileDirname}",
            "environment": [],
            "externalConsole": false,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                },
                {
                    "description":  "Set Disassembly Flavor to Intel",
                    "text": "-gdb-set disassembly-flavor intel",
                    "ignoreFailures": true
                }
            ]
        }

    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

task.json

{
    "tasks": [
        {
            "type": "cppbuild",
            "label": "C/C++: g++-11 build active file",
            "command": "/usr/bin/g++-11",
            "args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/${fileBasenameNoExtension}"
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "Task generated by Debugger."
        }
    ],
    "version": "2.0.0"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28