WSL + VS Code Remote真香

10,355 阅读3分钟

众所周知,windows下命令行很难用,Linux下桌面应用体验很糟糕,MacBook成为最大赢家。使用了一年的MacBook后,受不了它的低配和封闭,决定重新开启windows。考虑到本身工作常用命令并不多,在windows下又可以找到替代的工具,所以毅然决然的投向了windows的怀抱。但是今天去公司配置开发环境,诸多不顺利,例如libpng-dev不支持等。原本想等到WSL2出来了再体验(因为之前体验过WSL,印象不好),但是明天要正式工作了,所以决定再给WSL一个机会。就目前结果来看,真香!以下是配置过程:

HERE-->>大佬可以直接看官方文档

1. 启用WSL、安装Ubuntu和安装VS Code

这三个步网上太多教程了,就不写了。不会的记着百度啊。 启用子系统

启用子系统
安装Ubuntu(大佬可以随意选择,新手建议选择Ubuntu)
安装子系统
安装VS Code
下载VS Code
重点:(忘记添加的自己百度如何将应用程序添加到环境变量,基础知识点!)
勾选添加到PATH

2. 配置Ubuntu

2.1 替换软件源

为什么要替换软件源呢? 因为Ubuntu默认的软件源在国外,国内访问速度较慢,如果不介意,可以不替换。

# 备份原来的软件源
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
# 替换软件源
sudo sed -i 's/security.ubuntu/mirrors.aliyun/g' /etc/apt/sources.list
sudo sed -i 's/archive.ubuntu/mirrors.aliyun/g' /etc/apt/sources.list
# 更新软件源数据库
sudo apt update
# 更新系统(这个视网络情况而定)
sudo apt upgrade

Ubuntu中管理软件常用的命令

apt install <package name> # 安装某软件
apt search <package name> # 搜索某软件
apt show <package name> # 显示软件信息
apt --help

2.2 安装编译工具

建议步骤(把常用的编译工具都安装上)

sudo apt install build-essential autoconf libpng-dev # 包含了gcc、g++、make等工具

2.3 安装zsh、oh-my-zsh

因为的确比bash用的舒服一些。

zsh: github.com/zsh-users/z…
oh-my-zsh: ohmyz.sh/

sudo apt install zsh # 安装zsh
# 安装oh-my-zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 

之前有一篇文章介绍过:juejin.cn/post/684490…

2.4 安装node

安装nvm。nvm是nodejs的一个版本管理工具,类似的还有n,大家看个人喜好。我喜欢nvm。

nvm: github.com/nvm-sh/nvm
n: 自己百度吧,我不喜欢用。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

或者(上面或者下面这个,随便执行一个就行了)

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

安装完成后,安装node(如果nvm不好用,新手可以重新打开一下终端,大佬随意)

nvm install 10.17.0 # 为啥是这个版本,因为我们公司项目最高支持这个版本,你们随意
# 检查安装是否成功
node -v

2.5 git配置

如果之前在windows上安装过git,建议执行下面的命令,因为windows和Linux文件的换行符不一样。

git config --global core.autocrlf false

3 随便新建一个项目

为了方便理解,随便新建一个项目。下面是新建vue项目的命令:

npm install -g @vue/cli # 安装vue-cli
cd ~ # 进入家目录,如果你有其他准备好放代码的目录,就进那个目录
vue create vuetest # 创建项目

4 VS Code配置

4.1 打开VS Code,安装Remote - WSL

点击桌面图标或者开始菜单中的VS Code,安装Remote - WSL

安装Remote - WSL

4.2 在Ubuntu命令行中,进入刚才创建的项目

进入项目目录,并且通过code打开

cd ~/vuetest # 进入项目目录
code . # 使用VS Code打开这个项目

如果执行code .没有反应,回到第一步安装VS Code那里,考虑是否将VS Code添加到PATH了。或者看这里code.visualstudio.com/docs/remote…

执行code没反应

如果正常打开了,看一下神奇的左下角

WSL标识

点击这个标识,有更多操作哦。超舒服,就像在打开本地文件夹一样哦。

开源节流,抛弃Macbook,更加期待WSL2 和 windows terminal了。


新手建议阅读:
Linux权限:linux.cn/article-110…
Linux文件系统:linux.cn/article-979…
Linux超基础命令:www.runoob.com/linux/linux…
Linux命令查询:man.linuxde.net/
vim基础:www.runoob.com/linux/linux…

vimtutor # 这个是自带的教程哦

我的工作截屏