用vscode remote + wsl在windows上搭建linux开发环境

本文不是安利文章,所以不会介绍任何有关wsl的优点(但是不得不承认,用起来真的很爽),这仅仅是一篇没有感情的操作教程。

简单介绍

vscode remote

微软在 PyCon 2019 大会上发布了 VS Code Remote,通过安装Remote Development扩展包,可以在很多情况下代替vim直接远程修改与调试服务器上的代码,同时具备代码高亮与补全功能,就和在本地使用VScode一样。从此告别了 SSH + vim。

wsl

Windows Subsystem for Linux(简称WSL)是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式)的兼容层。它是由微软与Canonical公司合作开发,其目标是使纯正的Ubuntu 14.04 “Trusty Tahr”映像能下载和解压到用户的本地计算机,并且映像内的工具和实用工具能在此子系统上原生运行。

简单的说,就是在Windows 10 运行完整的 Linux 系统。

安装wsl

  1. 打开控制面板,将查看方式改为类别,点击卸载程序
    打开控制面板
  2. 点击启用或关闭 Windows 功能,在弹窗中勾选 适用于 Linux 的 Windows 子系统,点击确定等待安装
    启用windows功能,勾选wsl
  3. 安装完成后重启操作系统
    安装重启
  4. 打开Microsoft store,搜索 ubuntu
    搜索ubuntu
  5. 可以选择其他的Linux发行版本,也可以直接选择Ubuntu安装,这里选择是Ubuntu
    其他linux
  6. 安装完成后,会在开始菜单中多出Ubuntu的图标,点击启动,初次进入需要等待安装必要的文件
    初次启动等待安装
  7. 文件安装完成后设置username和password即可进入Ubuntu子系统
    设置name和pwd
    进入系统

配置Ubuntu

Ubuntu安装完成后,为了更好的使用,做一些简单的配置

更新镜像地址,以获取更快的下载速度

  1. 备份源配置文件

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup
  2. 修改源配置为清华大学开源镜像地址:https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/
    如果对vim操作不是很熟悉,可以打开 C:\Users\你的用户名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs\etc\apt 通过 Windows 的文本编辑器或其他文件编辑工具来修改。
    修改源地址

  3. 更新仓库列表

    sudo apt-get update

更新仓库地址

安装 zsh 和 oh-my-zsh

该步骤不是必须的,只是个人偏爱zsh,而且zsh相较于Ubuntu自带bash要好用很多

  1. 安装zshcurlgit

    sudo apt-get install zsh curl git
  2. 从 github 下载安装 oh-my-zsh

    sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装oh-my-zsh
下载完成后,根据提示进行操作完成后,默认的 shell 会从 bash 修改为 zsh,如果下次启动 Ubuntu 后,默认 shell 还是 bash 可以通过以下命令手动修改默认 shell

cat /etc/shells #查看所有shell
chsh -s /bin/zsh #设置zsh为默认shell

安装openssh-server

需要通过 shh 连接到 Ubuntu,所以这里要安装一下 openssh-server

sudo apt-get install openssh-server

至此,wsl的安装就结束了,这样你就在你的Windows 10 上面拥有了一个完成的 Ubuntu 系统,你也可以根据的需求,配置不同的开发环境了。

安装Remote Development并连接 WSL

  1. 安装 Visual studio Code (这不是废话吗)
  2. 在插件市场中搜索 remote , 会出现几个相似的图标和名称,只需要选择 Remote Development 这个插件安装即可,剩下的几个会自动帮我们安装好
    安装remote扩展
    安装完成后,侧边活动栏会多出一个远程桌面的图标,左下角也会多出一个代码的小图标
    安装remote完成
  3. 在 wsl 上安装 vscode-server,点击左下角的小图标,在弹出命令下拉菜单中选择 Remote-WSL: New Window
    安装vscode-server
    此时会打开新的vscode窗口,并且在右下角会显示当前的安装状态,耐心等待完成完成
    等待vscode-server安装
  4. 同步本机上的插件到 vscode-server 上面。如果你是一个 vscode 老用户,那你肯定积累很多自己常用的插件。但是本机上的 vscode 插件和 Ubuntu 上面的 vscode 插件时完全独立的,所有需要你单独再安装一次,不过安装过程很简单,在连接上 WSL 后,选择侧边活动的插件市场按钮,会列出本地 vscode 上已经安装的插件,你只需要点击安装按钮,就可以将对应的插件安装到 vscode-server 上面了
    为vscode-server安装插件
  5. 在完成以上的操作之后,你就已经完成了所有的配置,下面就可以开始你的开(折)发(腾)之旅了。

连接到远程服务器

对于有自己服务器的小伙伴,你也可以通过 vscode remote 远程连接到自己的服务,由于我家境贫寒,买不起自己的服务器,所以没法给你们演示如何连接远程服务器的操作了。不过没关系,我可以把虚拟机中 Ubuntu 当做 远程成服务器来操作演示。
这里演示是用 SSH keys 的方式连接的,你也可以用账号密码的方式连接,选择自己喜好的即可。

  1. 生成 SSH keys
    ssh-keygen -t rsa
  2. 将生成的 key (存放在id_rsa.pub文件中) 添加到远程服务器的 /home/用户名/.ssh/authorized_keys 文件中
  3. 打开 vscode ,选择侧边活动的 remote 图标,配置服务器信息
    配置服务器信息
    服务器具体信息
    Host:服务器名称,可以随便填
    HostName:服务器地址,我的虚拟机地址是192.168.106.128
    User:用户名
    其他详细信可以点击这里查看:https://linux.die.net/man/5/ssh_config
  4. 配置成功后,点击加号按钮连接。如果是第一连接,也需要安装 vscode-server ,不过都是全自动的,只要耐心等待即可;如果你是通过用户名+密码的方式连接的话,途中需要打开 vscode 的终端,手动输入密码
    配置完成
  5. 连接成功后就可以愉快的记性远程调试啦
    连接服务器成功
请我喝杯咖啡
请我喝杯咖啡