wsl+tmux+ohmyzsh+vscode 打造前端高效工作流

最新推荐文章于 2024-04-20 00:13:03 发布

ZHgogogoha

最新推荐文章于 2024-04-20 00:13:03 发布

阅读量2.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/ZHgogogoha/article/details/117998852

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最强终端

Windows Subsystem for Linux (WSL)，具体百度，总的来说就是弥补了windows terminal太过于鸡肋的问题。

为啥要写这篇文章

电脑坏了，重装了系统，当时忘记备份了。
使用WSL还是有很多坑的，比如更换主题、字体等等。

还涉及到哪些黑科技

tmux
ohmyzsh
- z插件等等
- alias

经过作者将近一年的实践经验，最后将这些移植到vscode上，效率简直起飞！

wsl的安装

官方安装指南
❗❗❗强烈建议安装wsl1,wsl2真是慢的离谱，作者在这踩过坑。
按照官方文档：
在这里插入图片描述
输入第一个指令会显示机器名：

用第二个指令把2改成1即可。

步骤六作者装的是18.04这个版本：
在这里插入图片描述
启动后设置用户名密码即可：
接下来强烈建议安装windows终端：

安装后按Win+Q 输入windows terminal：
在这里插入图片描述
默认应该是windows powershell，如果需要默认为Ubuntu:

使用记事本打开JSON文件，找到Ubuntu的guid：

在文件最上面找到defaultProfile,更换guid:

重启就修改了默认终端。

ohmyzsh

ohmyzsh安装如果安装github上在国内一般都会有问题，尤其是curl，反正我用curl经常失败，这里推荐一个国内安装方案
安装好以后会有ohmyzsh的图案提示。

❗❗❗ 如果刚安装ohmyzsh，却不会使用vim的话，强烈建议先配置vim

vim ~/.vimrc

然后复制这段代码：

nmap Q :wq<CR>
nmap S :w<CR>
noremap R :source $MYVIMRC<CR>

"Mode Settings

let &t_SI.="\e[5 q" "SI = INSERT mode
let &t_SR.="\e[4 q" "SR = REPLACE mode
let &t_EI.="\e[1 q" "EI = NORMAL mode (ELSE)

"Cursor settings:

"  1 -> blinking block
"  2 -> solid block
"  3 -> blinking underscore
"  4 -> solid underscore
"  5 -> blinking vertical bar
"  6 -> solid vertical bar



"let &t_SI = "\<Esc>]50;CursorShape=1\x7"

复制后

:w 回车
:source $MYVIMRC 回车

之后如果需要保存如何文件，normal模式下直接按S，保存并退出按Q;

光标normal模式下是无法输入的，需要按a
在这里插入图片描述
变成细线就可以输入了，按退出：

至于移动就用方向键吧。

用最简单的方式排除了VIM带来的障碍。

ohmyzsh必备插件

1.zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

进入.zshrc，添加plugins
在这里插入图片描述

alias配置

每次都要重启才奏效，很麻烦，在.zshrc中添加

alias sourcezsh="source ~/.zshrc"
alias zshrc="vim ~/.zshrc"

❗❗❗ 等号前后千万不要加空格，代码格式化习惯了，总是手欠加个空格，加了就失效，作者在这里踩了大坑，哎。

2.zsh-autosuggestions

安装

3. z

z插件也是我非常喜欢的插件，输入z加上文件名，就能根据之前访问记录进行匹配，非常方便，而且不需要安装。
在这里插入图片描述
z插件与auto-suggestions配合，既有提示又能智能跳转，按下tab之后，自动匹配相应路径：

4.zsh-history-substring-search

这个也需要安装：https://github.com/zsh-users/zsh-history-substring-search

也是通过输入然后按tab不断匹配相应历史访问路径。

插件必备就这四个学会使用tab即可。
其他插件类似sudo,vi-mode就不多介绍了，可以自行百度。

更换一个好看的皮肤

oh-my-zsh算是配置完成，但是原始皮肤实在是太丑了…
这里作者推荐AgnosterZak,当然还有其它好看的皮肤可以自行百度。

1.安装字体

不安装合适字体，即使更换主题也很难看,这里不建议按照官方推荐的字体，因为还需要安装icon包，很麻烦，而且亲测官方字体有些还不是特别支持,真的很恶心，恶心吐了。
这里建议直接装nerd font，一劳永逸，windows安装有坑，建议参考这篇文章安装，所有的坑我都踩过了。

我个人选择的是nerd font的这款字体，按照这个目录找就行，千万不要整个仓库克隆：
在这里插入图片描述

2.安装主题

在这里插入图片描述
直接按照官方找到自己的 themes文件目录:

vim agnosterzak.zsh-theme

然后拷贝进去就好了

总的来说就是，字体安装+主题文件+zshrc配置：
跟之前丑陋的皮肤做个对比
在这里插入图片描述

在这里插入图片描述
舒服~

tmux

npm start
npm run test
npm run ...
git push

如果需要在终端上同时操作这些指令，又不中断进程的情况下，需要开启多个终端处理，非常麻烦，tmux就是为了解决这个问题。

安装

apt install tmux

配置tmux

安装很简单，配置就相对繁琐一点，个人强推这篇文章，教程到配置一应俱全，tmux的使用方法和个性化配置。

个人喜好配置：

#设置前缀为Ctrl + x
set -g prefix C-x

#left
bind-key j select-pane -L
#right
bind-key l select-pane -R

# rename window
bind r command-prompt -I "#W" "rename-window '%%'"

#将R 设置为加载配置文件，并显示"reloaded! 信息
bind R source-file ~/.tmux.conf \; display "Reloaded!"

多了也记不住，总之前缀+c创建新窗口，然后前缀+c + 数字找到对应的窗口，执行npm…，这样运行服务器也不需要终止了。

ok，到这一步基本上就完成一大半了。
在这里插入图片描述

移植到vscode

这一步可做可不做，但是我一般在vscode上写代码，直接ctrl+`打开terminal非常方便。
vscode搜索WSL这个插件：
在这里插入图片描述
安装后，点击右下角绿色logo，第一次可能会比较久：

正常打开以后应该是这样：

tmux没有问题，乱码的话是因为字体设置的问题：
只需要将之前在terminal上配置的字体文件设置到settings中的terminal font-family即可：
在这里插入图片描述
搞定，在WSL的配置和插件都能正常使用！