17

前言

最新版 win10 已经内置了 linux 子系统 (WSL) 功能。在使用 win10 WSL 开发一周后,个人感觉已经完全可以取代 macOS 在 web 前端开发中的地位了。linux 环境下终端工具易用性、环境稳定性与 win10 的海量的软件生态相结合,再看看 PC 电脑选择的宽泛性,简直不要太赞。是时候放弃 OSX 而选用 win10 作为 web 前端 开发者主要生产力工具平台了。

总的来说,要使用 WSL 环境作为 web 前端开发环境,我们需要以下步骤:打开 WSL 功能、安装 linux 发行版、切换 linux 源、配置 zsh 终端环境、安装 NodeJs、配置 VSCode 终端环境等。

参考

Dev on Windows with WSL

windows 10 linux子系统oh-my-zsh与Cmder配置-2018

打开 win10 linux 功能

步骤1:快捷键 win+x 点击应用和功能,打开程序和功能

clipboard.png

clipboard.png

clipboard.png

步骤2:勾选开启 linux 功能

clipboard.png

安装 linux 发行版

  1. 单击 win 键,打开 win10 应用商店

    clipboard.png

  2. 搜索 linux 关键字

    clipboard.png

  3. 安装 ubuntu18

    clipboard.png

  4. 打开 ubuntu18 应用图标

    clipboard.png

  5. 第一次安装终端会提示访问网址后操作 powershell 以管理员模式启用功能 (已操作过无法再截图,自行操作)
  6. 等待安装

    clipboard.png

  7. 配置账号密码

    clipboard.png

完成以上步骤后,你就可以在 win10 磁贴菜单点击 ubuntu 图标,或者快捷键 win+r 输入 bash 的方式打开 win 10 ubuntu

clipboard.png

clipboard.png

ubuntu 切换为 Ali 源

\cp -f /etc/apt/sources.list /etc/apt/sources.list_bak_`date +"%Y_%m_%d_%H_%M_%S"`;
echo 'deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse' >/etc/apt/sources.list;

apt-get update

apt-get upgrade

安装 zsh

sudo apt-get install zsh

安装 oh-my-zsh

sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

修改 zsh 主题

vim ~/.zshrc

ZSH_THEME="agnoster"

设置启动 bash 时默认进入 zsh

vim ~/.bashrc

if test -t 1; then
    exec zsh
fi

此时我们再打开 ubuntu 时默认进行 zsh 命令行状态,像在 mac 电脑一样的终端体验 !

clipboard.png

终端字体补全

sudo apt-get install fonts-powerline

安装 Node.js

sudo su
apt update
apt install nodejs
node -v
apt install npm
npm i -g n
n lts

至此 Node.js 环境已经安装完成,但是要怎么用来开发呢?

配置 VSCode

将 VSCode 开发工具的终端环境直接指向 ubuntu 就可以真正体验在 win10 上感受 mac 电脑的开发体验了。

打开 VSCode , 快捷键 ctrl+, 打开 json 配置模式加入以下配置:

{
    "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
    "terminal.external.windowsExec": "C:\\Windows\\sysnative\\bash.exe" 
}

clipboard.png

题外话

期待微软今年底要发布的的 windows terminal 的终端工具。

顺便提一下,Chromium 版 Edge 浏览器太棒了 (终于可以不用翻墙同步收藏夹了),可以卸载 chrome 浏览器了!

Chromium Edge 百度云资源链接:https://pan.baidu.com/s/187uA...
提取码:4w9j

你可能感兴趣的

水木易安 · 5月18日

图挂了

回复

0

图补上了,有道云笔记的 markdown 图片上传功能很好用。

胡大大牛 作者 · 5月19日
0

图重新上传了,现在应该都能看见了

胡大大牛 作者 · 5月19日
xyzinsf · 5月19日

图还是挂了,望修复。

回复

0

啊,我电脑上看的见

胡大大牛 作者 · 5月19日
0

大概和cdn缓存有关。

xyzinsf · 5月19日
橘南枳北 · 5月19日

图gg了

回复

0

再看看,这下应该OK了

胡大大牛 作者 · 5月19日
载入中...