WSL2 前端开发环境搭建

安装WSL2(Ubuntu为例)

直接参照微软官方文档安装,本文以Ubuntu为例
https://docs.microsoft.com/zh-cn/windows/wsl/install-win10

装好之后吗,如果你确实需要删除某个子系统,可以通过下面的命令删除

$ wslconfig /l #显示出你安装的子系统
$ wslconfig /u name # name为你子系统的名字
删除子系统

安装node

~路径下,下载node压缩包

$ cd ~
$ wget -c https://npm.taobao.org/mirrors/node/v12.18.0/node-v12.18.0-linux-x64.tar.xz

随后解压,并且重命名成nodejs

$ tar -xvf node-v12.18.0-linux-x64.tar.xz
$ mv node-v12.18.0-linux-x64 nodejs

接下来要考虑把它放在哪

/bin
This directory contains executable programs which are needed in single user mode and to bring the system up or repair it.
/sbin Like /bin, this directory holds commands needed to boot the system, but which are usually not executed by normal users
/usr/bin
This is the primary directory for executable programs. Most programs executed by normal users which are not needed for booting or for repairing the system and which are not installed locally should be placed in this directory
/usr/sbin
This directory contains program binaries for system administration which are not essential for the boot process, for mounting /usr, or for system repair
/usr/local/bin
Binaries for programs local to the site
/usr/local/sbin
Locally installed programs for system administration

这边打算把它放在/usr/sbin

mv ~/nodejs/  /usr/sbin/

做个软连接

ln -s  /usr/sbin/nodejs/bin/node    /usr/local/bin/
ln -s  /usr/sbin/nodejs/bin/npm    /usr/local/bin/

安装一些原生依赖

例如node-gyp等包可能需要编译一些原生C++模块,你可能需要安装make gcc g++

apt-get install make gcc g++

当然还有python,例如比较新的Ubuntu已经自带了python3,我们也做个软连接就好了

ln -s /usr/bin/python /usr/local/bin/

其他设置

如果环境搭建好了,项目存放在子系统里,但是启动项目时候报错了,如下关键字。

Error: spawn cmd.exe ENOENT

或者

Error: spawn powershell.exe ENOENT

这里有解决方案,我就不搬运了

当然,在issue里搜有很多一样的问题和多种解决方案

安装vscode插件

下载Remote – WSL,或者在vscode插件面板里搜索WSL。

安装之后,就可以在子系统里使用code命令了,见下方官方gif。macos里也有这样的命令

Gif opening VS Code from terminal to connect to WSL

好了,WSL2前端环境搭建好了,不过嘛,这东西挺耗内存的。

yarn start编译时

给Linux子系统安装zsh(推荐)

如果之前一直使用macos作为主力开发机器的话,zsh你应该用过或遇见过。

官方安装文档可以参考这里。其实很简单,首先安装

$ sudo apt-get install zsh

如果以下命令有输出,那么就安装成功了

$ zsh --version # => zsh 5.8 (x86_64-ubuntu-linux-gnu)

设置成默认的命令行工具

chsh -s /usr/bin/zsh 

默认的ys主题已经比bash好看很多了。下图中全绿的那行是默认的bash

zsh

当然也可以随时在bashzsh之间切换

$ zsh # 切换到zsh
$ bash # 切换到bash

安装oh-my-zsh

可以参考这里,可能对网络有要求。

安装oh-my-zsh插件

安装完毕之后,推荐一些插件,具体效果可以到github中查看

zsh-syntax-highlighting
zsh-autosuggestions
zsh-completions

zsh-autosuggestions

oh-my-zsh的自带插件存放在~/.oh-my-zsh/plugins目录中,已经自带了很多,比如git

oh-my-zsh插件

我们新加的插件放在~/.oh-my-zsh/custom/plugins中。

custom-gplugins

那么运行命令clone项目

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting ~/.oh-my-zsh/custom/plugins/zsh-syntax-highlighting
$ git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions
$ git clone https://github.com/zsh-users/zsh-completions ~/.oh-my-zsh/custom/plugins/zsh-completions

编辑~/.zshrc

$ vim ~/.zshrc

找到plugins这行,把几个插件加上

plugins=(git zsh-completions zsh-autosuggestions zsh-syntax-highlighting)

之后

$ source ~/.zshrc

有这么多的自带插件,有兴趣可以去研究研究。

oh-my-zsh主题

命令行配色不好看?不喜欢?这里总有一款你喜欢的主题

挑选好之后,编辑~/.zshrc

$ vim ~/.zshrc

找到ZSH_THEME这行,把ys替换成你喜欢的

ZSH_THEME="ys"

之后

$ source ~/.zshrc

git插件

是个zsh自带的插件,是git命令的缩写简化,我相信你一定见过有人使用过它。

git plugin

其他插件

这里也插播一个插件incr,下面是官方介绍图

incr

下载它

$ mkdir ~/.oh-my-zsh/plugins/incr
$ wget -P ~/.oh-my-zsh/plugins/incr  http://mimosa-pudica.net/src/incr-0.2.zsh

随后把这句加到~/.zshrc

source ~/.oh-my-zsh/plugins/incr/incr*.zsh # 加在.zshrc里
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容