美文网首页
WSL2 前端开发环境搭建

WSL2 前端开发环境搭建

作者: 黑甲凶灵 | 来源:发表于2020-11-15 13:11 被阅读0次

    安装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里
    

    相关文章

      网友评论

          本文标题:WSL2 前端开发环境搭建

          本文链接:https://www.haomeiwen.com/subject/skjgbktx.html