【效率工具】优化美丽舒适的开发环境

这是我参与更文挑战的第 14 天，活动详情查看： 更文挑战

前文详细分解到单个地介绍了【专栏-效率工具】系列，从开发工具、版本控制工具、接口调试工具 到 开发规范，再到博客搭建工具等等， 当然还有许多工具需要我们慢慢探索的，好用的工具，养成习惯，提高开发效率，减少 bug 数量等等。【效率工具】Vuepress+Github 搭建个人博客（知识笔记本）（一） 、【效率工具】搭建个人静态博客-Hugo+Github（二）、【接口调试工具-Insomnia（一）】…-，-
提高日常码字幸福感的【实测能用】自用效率工具，持续更新、记录
仅当参考，按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享

• 工欲善其事，必先利其器。实践（巧偷懒）促进科技发展-，-
• 本文将作出【效率工具】系列总结，和大家分享如何优化我们的开发环境，打造一个美丽舒适高效的开发环境，侧重于前端但不局限于前端，旨在为刚融入团队的新同学可以迅速 follow 团队的开发规范，了解并熟练使用常见的开发工具，快速融入到项目开发中去可以大大的提升我们的工作效率。

总结前文系列工具

效率工具：助力开发提效

• 熟练快捷键：Vscode 快捷键
• 终端 ：cmder: cmd+git+linux+vim-同时集成到 Vscode
• Vscode 扩展插件: 推荐 / 效率 / 摸鱼等
• Vscode 代码片段: 定制自己的代码段
• Chrome
• Chrome 扩展插件:
• 代码规范： Vue 实战开发规范
• 接口调试工具：Insomnia、PostWoman/postman/插件等
• 接口 mock 工具:
  【下一代接口 mock 工具： Mock Service Worker】、Node+Koa、
• 个人知识笔记本、博客: Vuepress+github、hugo+github、 hexo+github
• 等等

其他一些实践，助力快速融入团队项目开发

1. 终端

1.1 iterm2

1. 安装 iterm2： 官网
2. 美化： 透明度
   个人喜好这里建议给 iterm2 配置一个透明度，看起来体验感舒适很多 iterm2 -> Preferences -> Profiles -> Window -> Transparency
3. 快捷键

1.2 zsh ohmyzsh

• github/ohmyzsh/ohmyzsh

1. 安装 zsh
   使用 curl 来安装

   $ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
   复制代码

2. 配置主题

3. 插件
   命令的高亮显示自然是不能落下，借助zsh-syntax-highlighting 来实现命令高亮

2. 日常工作顺序

这一套操作是本人日常使用的最频繁的操作，必须要熟练使用一气呵成!

alt + space （唤醒 iterm2） + cmd + T (建立新的 iterm2 窗口) + j hub(使用 autojump 的 j 命令快速跳转到 github 目录 ) + code . (在 vscode 打开) + spectatle( cmd + alt + enter = 窗口全屏)

3. Vim

太强大了， 可惜我只会一点点入门的命令，这里介绍一下简单的实用的功能

大家最开始接触的时候，是不是进去了出不来了-_-!

在终端里使用 vi

set -o vi
复制代码

然后就可以在终端里，以 vi 的方式对命令进行操作，非常方便。

快捷键

必须掌握超级熟练的！不过确实部分快捷键比较反人类。 vim 的快捷键数量众多，和 Chrome 一样，我们只需要记住使用最常见的就足够了。

• :wq 退出 vim。stackoverflow 每日搜索次数第一问题，如何退出 vim -_-!
• i 进入插入模式
• q 进入可视模式，可以用光标来选择文本
• jk 上下移动
• hl 左右移动
• ctrl + b/f 上下翻页
• 0/$ 光标快速移动到行首／行尾
• / 搜索
• n/N 跳转到下一个／上一个 搜索词
• :s/old/new/g 单行替换
• :%s/old/new/g 全局替换

janus

使用 vim 几乎是必须要装插件的，插件屏蔽了 vim 的一些底层配置，来让我们使用的更加舒服。比如NerdTree这个查看当前目录文件的插件几乎是必装的。这里我们推荐直接使用janus)这个扩展包，其中内置了多种实用插件，无需我们手动去一个一个安装。

安装 janus

$ curl -L https://bit.ly/janus-bootstrap | bash
复制代码

使用 janus

这里来说以下个人喜欢的 janus 的功能

• 显示行号
• 文本高亮, 搜索高亮
• 句尾显示.号
• 轻松切换多种显示方式，水平显示 or 垂直显示

展示效果

插件

下面来介绍常用插件

NERDTree

类似于编辑器的形式来便于你查看当前文件夹，在~/.vimrc中添加以下设置来通过F2启动 NERDTree

$ vim ~/.vimrc

25 map <F2> :NERDTreeToggle<CR>
复制代码

在当前文件使用F2或者:n来切换为 NERDTree 显示模式，或者直接使用vim来打开一个文件夹

快捷键

• ctrl + w + h/l 光标在左／右窗口互相切换
• ctrl + w + w 光标自动切换
• o/go 在当前 tab 打开文件, 是否跳到该窗口
• t 在新 Tab 打开文件

4. Git

最近有篇非常火的文章： 政采云前端团队的 我在工作中是如何使用 git 的

4.1 提交

4.2 提交规范 commitizen

yarn add commitizen -D

add "scripts": "commit": "git add . && git-cz"

add "config": { "commitizen": { "path": "node_modules/cz-conventional-changelog" }}
复制代码

4.3 提交到 github && gitee

前提是：两个账户已分别绑定 git 权限

git remote add github git@github.com:xn213/koa-app.git
git remote add gitee git@gitee.com:xn213/koa-app.git

yarn commit

# 分别提交
git push github
git push gitee
复制代码

升级省事： 同时提交到 github 和 gitee

修改 .git/config

[remote "origin"]
	url = git@github.com:xn213/koa-app.git
	url = git@gitee.com:xn213/koa-app.git
	fetch = +refs/heads/*:refs/remotes/origin/*
复制代码

这时第一次提交到 gitee, alias: gp == git push 会提示如下图,

由于上面分别提交到 github 和 gitee, 设置了 git remote gitee…, 要使用如下命令提交

git push --set-upstream origin master
复制代码

此命令会在 .git/config 中添加如下字段

[branch "master"]
	remote = origin
	merge = refs/heads/master
复制代码

---

当然好用的工具还有很多，这里列举部分仅作参考，抛砖引玉，

有没有 get 到呢?

欢迎各路大神评论出你的私藏工具, 把你的好用的【效率工具】分享给大家=，=

今日份预告：

工具说的差不多了 明天计划开始更新技术文了，分享一些积累的 codes/utils/components/styles等等吧

下一篇敬请期待！ hahah~