不会偷懒的程序员不是好程序员
因为好的程序员会不断思考如何把重复的流程通过程序来自动化完成，从而把剩下的时间投入到真正需要思考和有创造性的工能去。
那么，如何才能在开发过程中更专业的进行偷懒呢？
这就需要我们用各种方式提高我们的写代码的效率，假如 8 小时的工作量我们能在 2 个小时内搞定，那么剩下的 6 个小时我们不就可以摸鱼了吗？
我们可以先思考一下有哪些方式能提高代码效率，对于前端来说，之前说过的脚手架工具就是一种方式，它可以直接生成项目的基础代码，免去手动创建项目的时间。
那么在开发过程中又如何去提高效率呢？
开发的目的是产出目标代码，以此为目的，开发时可以用两种方式来提高效率。
一是使用预处理语。和原语言相比，预处理器更加抽象，提供了一系列的方法，并且可以在编译时转为原来的格式。
第二种是使用代码模版直接产出相关代码。比如可以用开发工具配置相关的模版，输入某段代码直接产出大段代码，我们只需要稍作修改即可。
预处理我们通常用的是关于CSS样式的，比如sass、less、stylus。
React的脚手架集成的是sass-loader，Vue的脚手架则同时支持这三种预处理器。而UI框架Antd 以及iview使用less，element UI则使用sass。
这三种预处理语言都实现了变量嵌套、混合运算、父选择器引用、扩展和大量内建函数。
但是和其他另外两种语言相比，less 少了自定义函数的功能，尽管我们可以通过mixins结合guard来实现类似效果。而stylus的优点是它提供了超过60个内径函数，更有利于编写复杂的计算函数。
要在语法上，Sass支持.scss与.sass两种文件格式，而.scss在语法上更接近CSS，需要括号、分号等标识符，而.sass在语法上的做精简，去掉了css规则的括号部分和分号，增加了对应标识符会导致报错。
// scss
$test:'blue';
p{color:$test;}
// sass
$test:'blue'
p
color:$test
// less
@warn:'brown';
p{color:@warn;}
// stylus
$test='blue'
p
color:$test
less的整体语法更接近.scss，而stylus则同时支持类似.sass精简语法与普通css语法,在语法细节上则各不相同。
从安装使用方面来看，sass目前有两种NPM编译安装包，有基于LibSass萨的node-sass或基于dart-sass的Sass。
官方推荐使用dart-sass，因为它不仅在安装速度上更快，而且支持更多的sass内置特性。
使用webpack构建这三种语言，对应的预处理器分别是sass-loader,less-loader和stylus-loader。
需要注意的是，sass-loader和stylus-loader在安装时都需要同时安装独立的编译包sass/node-sass/stylus。
除了预处理器之外，我们可以使用开发工具来预先设置相关代码片段，来更加快速的进行开发。需要注意的是，对于预处理语言文件来说，通常IDE需要安装对应文件的这个识别扩展，才能够在文件中使用这些辅助功能。
当然，我们可以通过安装开发工具插件来使用插件中提供的代码片段，比如：
也可以自定义自己的代码片段。
上图中，是 Vscode javascript code snippets 插件提供的部分功能。
VScode中，在用户首选项中可以预设自己的代码片段，比如我这里定义的vue2代码模版：
只要我在新的vue文件中输入vue2就会生成对应的代码模版。
和使用第三方的预设相比，自定义模版更灵活也更便于记忆。
这两者相结合，那就能够大大提升我们的编码效率，同时针对实际业务场景定制的自定义片段文件，也可以在内进行共享和互动维护，而提升团队整体的效率。
（完）
没有关注公众号的朋友，觉得文章对您有启发的话，记得点赞、关注、评论、转发一下。
