在自动化、可配置、可重用、可扩展上要多花时间，花时间在解放自己生产力的事情上是最有意义的事情了。 —— 左耳听风 | 极客时间

从事前端开发工作已经快3个年头了，但是我总感觉我做的很多工作都是重复又机械的体力劳动。在看到皓哥的那段话时，我陷入了沉思 —— 如何花时间在解放自己生产力的事情上，减少花在低价值重复体力劳动上的时间，留出更多时间去学习和实践更有价值的技术知识上。

乘着最近有空，我在网上查阅了一些资料，再结合我的经验谈谈如何提高前度开发效率。

趁手工具

Visual Studio Code

前端开发工具，VS Code 无疑是当下最流行的。它强大的扩展插件能够满足各种前端开发所需，IDE 的配置也能很好的满足各种开发习惯，当然还有各种不同的个性化文件图标和皮肤样式。该有的都有了，非常强大！

• 插件列表 —— 好的插件可以帮我们做很多事情，非常提高效率。可以参考vscode 插件推荐 - 献给所有前端工程师（2018.4.29更新），类似的插件推荐文章还有很多。
• 快捷键 —— 熟悉 IDE 的快捷键是非常有必要的，可以节省很多时间。
• 样式配置 —— 样式配置主要是让我们看着爽，用着爽了才能写出好代码 :)。

iTerm2

作为前端工程师，无论是调试、打包、发布、安装依赖等等各种操作都离不开终端工具。而 iTerm2 是一款非常好用、非常酷的 Mac 终端软件。

• 命令自动提示 —— 当输入一些代码后，可以进行历史命令的自动提示、文件名提示等，非常好用。配置方法参考Mac终端配置，DIY你的Terminal （iTerm 2 + Oh My Zsh）
• 快捷键 —— 它也有一些快捷键可以提高界面打开、显示、隐藏、新建窗口等行为，也能提高一些开发效率。
• 样式配置 —— 我最喜欢 iTerm 的地方就是它的样式配置，尤其是半透明占满屏幕顶部的样式非常极客。具体样式配置可以自行Google。

Chrome

前端开发最多的必然是和浏览器打交道，想必大家大多数都是用的 Chrome 来进行调试和预览，还支持模拟移动端页面效果。

Chrome 真的是非常强大的浏览器，非常适合开发前端应用。其他浏览器只有在需要适配时才会去看 0.0。

webpack 插件和外部库

现在的前端项目必然会用到很多的外部库，其实用好这些库的确对提高开发效率有很大帮助。

• 各种转译器 —— 各种 loader 库让我们可以使用更现代、更方便的方式来写代码，最后通过转移器转译成比较通用的代码。避免了很多转译、适配浏览器版本等工作。
• 工具库 —— 像 Lodash 、monentjs 这些工具库可以节省很多我们写工具代码的时间，而且非常稳定。
• Webpack 插件 —— Webpack 的插件其实很强大的，热替换、提取公共模块、压缩输出文件、依赖关系可视化这些都是非常好用的插件。
• UI 组件库 —— 组件库不必多说，网上有很多的组件库。如果项目对 UI 没有特殊要求，能够快速的搭建起一个前端项目页面。如果有 UI 要求，也能通过重写的方式节省很多 CSS 和 JS 逻辑的书写，必须要用到的好东西！

其实还有很多其他作用的外部库也能够提升工作效率，如适配移动端像素的 px2rem 等等。关键在于知道什么场景用什么库，这就需要多看多查多积累了。

组件化

现如今主流的三大前端框架都是支持也鼓励组件化开发的，所以在项目开始时抽离一些通用的模块实现组件化复用是一个不错的提升效率的方式。

自动化测试

如果项目中有一些模块不经常变动，可以写一些自动化测试代码来覆盖到这些模块，这样可以减少自测的时间。

关于是否所有功能都写测试代码，我认为像组件库、基础工具类的代码写自动化测试作用更大，经常变动的业务代码写自动化测试意义不大。个人想法……

基础知识

有一个常常被忽略的可以提升开发效率的点是基础知识。基础知识扎实，遇到问题就能有解决的思路、写代码时也知其所以然。可以减少很多技术知识不足而引起的 bug，也能更快解决问题。

体验较深的一点是，我之前半路转前端开发，开发过程中除了知道 Vue 的官方文档外，对 JavaScript、浏览器等知识都非常欠缺，完全是凭着 Vue 官方文档、Java 编程知识和搜索引擎来进行开发，底层属于黑盒模式，根本不懂~以至于出现了很多的问题，这些问题现在想来很多都是基础知识不足导致的。

官方文档

其实多花一些时间仔细看一遍技术方案的官方文档真的很有必要。虽然在看文档上多花了时间，但是遇到具体问题时可以避免很多看文档不仔细而引起的操作。如找别的解决方案、自己造轮子、回过头重新看文档、想他人请教这些行为~

脚本文件

如果会 shell 命令，会写脚本文件。那么在发布自动化、测试自动化、打包等很多需要敲 shell 命令的场景变得很简单，只需要在终端输入 $ sh install.sh 命令执行 .sh 脚本文件就可以帮我们做很多事情。

合作开发

众人拾柴火焰高，一个人的开发效率永远无法和一个团队比，所以做好合作开发工作也算提升效率的一种吧~

• 统一技术栈。
• 统一代码风格，最好用 eslint 进行规范。
• 统一抽离组件，避免重复劳动。
• 统一 git 控制流，做好代码协作。
• 代码 review，相互保证代码质量，了解各自业务流程，便于长期合作。
• 对于复杂的模块，建议写 README.md 这类文档来注释。

代码仓库

另外一个可能能够提高效率的方式是保留之前写过的代码，如果能够参考或者拿来改改用，必然能够快不少。

尤其是像 CMS 这类内部系统，前端逻辑差不太多，UI 也没有特殊要求。真的可以复用代码的。

最后

这是我目前能想到的一些提升前端开发效率的经验吧。如果大家有更好的想法欢迎留言交流~