那些让编码效率起飞（前端）的工具了解一下

| 导语 想晚上吃鸡？前端编码效率提升工具了解一下？

一、Bash篇（Mac）

• iTerm2

iTerm 2 is a terminal emulator for Mac OS X that does amazing things.

iTerm就不用过多介绍了，用过Mac的人基本都会用，比Bash更多的功能，可以说是非常的好用了。

• Hyper

如果你是一个完美主义者，用了iTerm之后你肯定会发现它的状态栏还是Mac原生的，和内容区域还是会有一种割裂感。

[ iTerm的软件界面 ]

Hyper能上面和iTerm差不多，但是在界面上却是浑然一体的，这点深点我的心，强迫症用户可以试试吧：

[ iTerm软件界面 ]

• Zsh

zsh 是一款功能强大的 shell 软件，它可以兼容 bash，并且提供了很多高效的改进。

zsh相对比bash拥有更多的功能改进之处：

• 更好的自动补全
• 更好的文件名展开
• 强大的定制性

安装：

sh-c"$(curl-fsSLhttps://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

zsh拥有一套功能非常完整的Plugin系统，这里推荐一下我常用的几个非常好用的**plugin插件**：

如何安装Zsh插件？

• 将GitHub上的plugin插件clone到~/.oh-my-zsh/custom/plugins，例如：

Gitclonegit://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

• 用 vim (或其他编辑器) 打开 .zshrc 文件，找到插件设置命令(plugins)，默认是 plugins=(git) ，我们把它修改为

  plugins=(zsh-autosuggestions git)

插件推荐

• zsh-autosuggestions

可以帮你记忆输入过的命令，下次输入的时候可以智能提示。

[ autosuggestion ]

• zsh-syntax-highlighting（自带）

这个插件可以判断你输入的命令是否正确，如果是含有这个命令的会显示成绿色，如无效则显示红色。

[ zsh-syntax-highlighting ]

• z

强大的目录自动跳转命令，会记忆你曾经进入过的目录，用模糊匹配快速进入你想要的目录。

[ z ]

敲入 z 命令，列出了自从我开始用zsh进入过的目录和他们的权重，进入次数越多，权重越大，便于演示，我删除了我的历史，随便 cd 了一下，保持列表的简洁。z 后面加一个关键词就能跳转到所有匹配的历史路径中权重最高的那个了:

[ z ]

一、Vscode篇（Mac）

• Code Spell Checker

你是不是会经常有变量命名的时候不知道自己写的英文单词是不是正常？莫慌！有了Code Spell Checker，一切都不是问题，它会帮你检查你当前输入的英文单词是否正确。

[ Code Spell Checker ]

• Code Outline

开发过程中有些人会习惯使用Outline的功能，没有大纲这个功能开发上感觉总别扭，还好VSCode上有这么个扩展可以看到函数、变量列表。

[ Code Outline ]

• Document This

Document This是Visual Studio Code扩展，可自动为TypeScript和JavaScript文件生成详细的JSDoc注释。

[ Document This ]

• Bracket Pair Colorizer

这个插件可以帮助你用颜色快速区分各种代码块的边界，非常的实用：

[ Bracket Pair Colorizer ]

• Git History

一图胜千言，Git History能够让我们快速看到单前这个文件的git修改历史：

[ Git History ]

• gitlens

非常有名，就不多介绍了，可以显示代码中某一行的最新修改记录；

[ gitlens ]

• Guides

给代码添加辅助竖线，加快您看代码的速度：

[ Guides ]

• Path Autocomplete

这是个人比较喜欢的一个神器，可以帮您在输入路径的时候给出相应的提示，不用我们每次去看了，IDE的体验有木有。

[ Path Autocomplete ]

• Settings Sync

换台电脑，Vscode配置丢了？莫慌莫慌，有了Setting Sync，自动帮您同步有木有，妈妈再也不用担心我换电脑装环境了。

[ Settings Sync ]

• TODO Highlight

这个世界上最大的谎言可能就是程序员在代码中写的TODO了！hhhh，不慌不慌，有了这个插件，那些年写的TODO都会亮瞎你的眼。

[ TODO Highlight ]

• Turbo Console Log

听说你还在一直疯狂输出console.log? 智能console了解一下？

[ Turbo Console Log ]

• vscode-fileheader

如果有你喜欢文件顶部注释，这个插件可能是你的最爱：

[ vscode-ileheader ]

--------------------------------------------------------------------------------

原文作者：腾讯工程师蒋林源。

来源：腾讯内部KM论坛。