我在前端开发中最常用的三个工具vscode、iterms、vim,本文记录下我的个性化配置过程(可复用)
微信核心500人群:群内不定期会有赞助商送书活动,同时与腾讯云+社区合作(过节福利相送),BAT大厂资深大牛定期推送面经与源码分析,各平台大牛优秀文章推荐,更有内推跳槽咨询、视频资源共享、学习资料文章pdf面经网盘资源等等福利。加入我们一起进步。
为了解决知乎活码识别问题,下方的二维码做了持久化处理。同时群内人数过多,扫描二维码添加客服小柠,备注「加群」即可加入我们。
公众号:中台架构之家
每日一题:题目传送门
前端电子书大全:电子书
Iterms个性化配置
使用iterms比mac自带的Terminal方便很多。
1、安装zsh
zsh提供各种插件接口,有很多主题类型
brew install zsh
参考此网站有zsh的具体介绍
2、安装on-my-zsh
安装方法(复制粘贴回车)
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
3、为oh-my-zsh安装powerlevel9k主题
在命令行窗口运行这一行代码:
bash git clone https://github.com/bhilburn/powerlevel9k.git ~/.oh-my-zsh/custom/themes/powerlevel9k
4、安装字体(详细步骤)
在 Nerd Font 网站找到 Meslo 这个字体,下载解压。
打开「字体册」这个 App,将解压好的字体全部拖进去,Mac 会自动为你安装好所有的字体。
打开 iTerm2,打开 Preference,选择 Profile,选一个你自己的 Profile(默认是 Default),选择 Text 栏,在 Font 中选择刚刚安装的 Meslo 字体(注意这里应该是 Nerd Font Complete),调整适合自己的字体大小。选号字体之后,勾选「Use a different font for non-ASCII text」和「Anti-aliased」,之后会出现「Non-ASCII Font」这个选项,点击选择 Melso 字体,同样勾选「Anti-aliased」。5、为iTerm安装Material Design Theme
下载安装Material Design Theme
6、为 zsh 安装两个额外的插件
语法高亮:
bash git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting
自动建议:
bash git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions
7、替换.zshrc文件
去 此链接下载 .zshrc 文件,复制第 89 行(包含)之后的内容,粘贴到你的 .zshrc 中去
找不到.zshrc文件解决办法
未安装zsh的情况下,Mac OS X中默认不存在~/.zshrc
,因此您需要创建它。 ~/
转换为用户的主目录,.zshrc
是ZSH配置文件本身。
已安装zsh的同学,.zshrc文件就保存在~目录下。
8、为iterms添加tmux(与zsh可兼容)
# Mac
$ brew install tmux
9、tmux常用命令
# 查看有所有tmux会话
指 令:tmux ls 快捷键:Ctrl+b s
# 新建tmux窗口 指 令:tmux new -s <session-name>
# 重命名会话 指 令:tmux rename-session -t 0 <new-name> 快捷键:Ctrl+b $
# 分离会话 指 令:tmux detach 或者使用 exit 快捷键:Ctrl+b d
# 重新连接会话 指 令:tmux attach -t <session-name> 或者使用 tmux at -t <session-name>
#平铺当前窗格(个人很喜欢的快捷键,注意:平铺的是当前选中的窗格) 快捷键:Ctrl+b z (再次 Ctrl+b z 则恢复)
# 杀死会话 指 令:tmux kill-session -t <session-name>
# 切换会话 指 令:tmux switch -t <session-name>
# 划分上下两个窗格 指 令:tmux split 快捷键:Ctrl+b “
# 划分左右两个窗格 指 令:tmux split -h 快捷键:Ctrl+b %
# 光标切换到上方窗格 指 令:tmux select-pane -U 快捷键:Ctrl+b 方向键上
# 光标切换到下方窗格 指 令:tmux select-pane -D 快捷键:Ctrl+b 方向键下
# 光标切换到左边窗格 指 令:tmux select-pane -L 快捷键:Ctrl+b 方向键左
# 光标切换到右边窗格 指 令:tmux select-pane -R 快捷键:Ctrl+b 方向键右
系统操作
? 列出所有快捷键;按q返回
d 脱离当前会话;这样可以暂时返回Shell界面,输入tmux attach能够重新进入之前的会话
D 选择要脱离的会话;在同时开启了多个会话时使用 Ctrl+z 挂起当前会话
r 强制重绘未脱离的会话
s 选择并切换会话;在同时开启了多个会话时使用
: 进入命令行模式;此时可以输入支持的命令,例如kill-server可以关闭服务器
[ 进入复制模式;此时的操作与vi/emacs相同,按q/Esc退出
~ 列出提示信息缓存;其中包含了之前tmux返回的各种提示信息
窗口操作
c 创建新窗口
& 关闭当前窗口 数字键 切换至指定窗口
p 切换至上一窗口
n 切换至下一窗口
l 在前后两个窗口间互相切换
w 通过窗口列表切换窗口
, 重命名当前窗口;这样便于识别
. 修改当前窗口编号;相当于窗口重新排序
f 在所有窗口中查找指定文本
面板操作
” 将当前面板平分为上下两块
% 将当前面板平分为左右两块
x 关闭当前面板
! 将当前面板置于新窗口;即新建一个窗口,其中仅包含当前面板
Ctrl+方向键 以1个单元格为单位移动边缘以调整当前面板大小
Alt+方向键 以5个单元格为单位移动边缘以调整当前面板大小
Space 在预置的面板布局中循环切换;依次包括even-horizontal、even-vertical、main-horizontal、main-vertical、tiled
q 显示面板编号
o 在当前窗口中选择下一面板
方向键 移动光标以选择面板
{ 向前置换当前面板
} 向后置换当前面板
Alt+o 逆时针旋转当前窗口的面板
Ctrl+o 顺时针旋转当前窗口的面板
vscode个性化配置
1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x
2.修改个性化背景
打开 文件>首选项>设置
"background.enabled": true,
"background.useDefault": false,
"background.customImages": [
"/download/***.png"
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "100%",
"height": "100%",
"background-position": "center",
"background-repeat": "no-repeat",
"background-size": "100%,100%",
"opacity": 0.1
}
第一句"background.enabled": true,是插件是否启用,当我们把插件下载下来并且重启vscode之后,就已经有了这句话
第二句"background.useDefault": false,是否使用默认图片,改成false,不默认,我们要设置自己想要的!
第三句 设置路径,细心的道友已经注意到了,这是一个数组,也就是说可以设置多张不同的图片!记住,最多三张! /D:/like.jpg 是图片的路径地址 "background.customImages": [
"/download/***.png"
],
最后就是background.style了,大家看着设置就好了,懂点css的都知道。注意后面的"opacity": 0.1透明度是可以设置的。
vscode最喜欢的主题:Verdandi
Verdandi Alter
唯一缺点就是没有了高亮提示,这种欧式极简风格真的很舒服啊,但是没有提示开发效率会很低。下来装逼用吧。
持续更新中~~
配置完毕的iterms
配置完毕的vscode
Happy Hacking!!