在前端开发过程中有哪些技术可以显著提高生产力

我喜欢用sublime;sublime的插件emmet能提高写html的效率;另外说一个最近遇到的:原来我一直以为图标字体兼容性不好,所以一直不敢用,每次都要先把图标从photoshop中导出然后制作雪碧图,修改起来超级不方便;最近才知道字体图标能兼容到ie6;现在大部分项目都直接调用http://iconfont.cn的字体图标,不再用雪碧图了,字体图标修改起来比雪碧图效率高太多了,节省了很多时间;
■网友
我觉得题主对于提高生产力 有明显认识不足
还技术 还技术 还技术
大多数前端还梦想着自己一个人掌握全场 然后高高兴兴和老板提涨工资

说个常见的现象
前端几乎没有写文档的 也很少积累出类库并带着文档发布的

文档代表着积累 代表着对工作的总结 合理积累并保存下来 供人查阅
比如:业务文档就可以帮助别人快速熟悉业务
这就是提高生产力

前端总是想着如何提高自己的工作效率 各种工具 各种新技术
把自己当做一名普通技工
而非一个团队成员

■网友
几点我觉得是很重要的:
1. 技术水平绝对排第一,对任何需要的技术信手拈来;
2. 对业务和需求的准确把握,理解透彻了写代码的目的就只管噼里啪啦的敲代码;
3. 自己要有一个用的顺手的编辑器或 IDE,我用过各种编辑器和 IDE,现在常用的基本就是 SublimeText和 Intellij Idea(也有人喜欢 Atom/VSCode,自己用的顺手就行);
4. 硬件和网络环境也很重要;
==================================================
补充:
至于说技术,如果你对 Node 及前端常用的工具了解,那么可以从这些方面提高开发效率:CSS 善用 Less/SASS/Stylus等预编译工具,绝对比写原生 CSS 要来的效率高;使用 autoprefixer自动处理CSS 的浏览器前缀和兼容性问题,基本上只要按照 CSS 规范写就行了,像 Flex 布局之类的,使用了autoprefixer后完全不用担心浏览器兼容性(没有任何方式支持 flex 布局的除外)字体图标, @崇远 也提到了这点,这能节省很多切图的工作量,相比Awesome Font/Ionic Font/Google Material Design Icons等,阿里的 iconfont.cn 确实是个很好的选择,维护方便,能随时修改图标,自己设计师设计的原创图标只要转成 svg 就能导入成 font,而且 iconfont.cn可以选择的 icon很丰富HTMLHTML也有一些类似 CSS 预处理的方式,但我没用过;@崇远 提到的emmet是个神器,不仅支持 SublimeText,其他编辑器像Atom/VSCode/Brackets 以及其他的IDE基本都支持(内置或者安装插件)现在 HTML 基本以模板的方式存在,Vue/AngularJS/React都是类似模板的方式写 HTML,编辑器安装对应框架的高亮和语法提示插件能方便不少;JavaScriptES6/7 比 ES5要方便很多,支持各种语法糖,await/aysnc/promise/写异步代码与回调函数比简直不要太爽,建议直接用 await/async,promise 其实也有很多不足,比如错误捕捉比较繁琐等;还有扩展运算符(参数扩展、数组扩展、对象扩展)、function 的默认参数,更多可以看看阮一峰的 ES6入门教程:ECMAScript 6入门,非常浅显易懂;JS 也有很多预编译的语言,CoffeeScript/TypeScript等,对编码效率也会有很大提升,至于习不习惯用就另说了,我是比较倾向于原生 ES6/7;使用一些成熟的框架,Vue/Angular/React/BootStrap 等,如果喜欢酷炫效果的还有很多 Material Design 的库(基于 Vue/Angular的都有)一些比较常用的组件和框架:Awesomes - Web前端开发资源库估计看完这些你会觉得开发效率反而降低了,哈哈哈哈,因为要了解的东西太多了;
开发效率关键看你怎么看了,如果只管开发过程迅速而不管后期维护、迭代和扩展的话,以上这些基本都会降低开发效率,因为上面讲的很多都是为了在开发效率和可维护性间取得平衡的一些方式;


推荐阅读