前端高效开发之工具篇

一直想把自己遇到的好用的工具、框架、技术文章之类的做一个汇总记录，但是一直没时间去弄，今天得空，先把工具软件整理下，文章会不断更新。

IDE

Visual Studio

一个丰富的集成开发环境，用于创建面向 Windows、Android 和 iOS 的出色的应用程序及现代 Web 应用程序和云服务。
PS：因为本人从.net转的前端，所以对于VS的留恋还是有的。

下面列举此IDE下的一些有用的插件：

Emmet

（下载 语法）

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。

代码示例：

/*输入*/
ul.list-group>li.list-group-item*3>span{跳转至}+a[href='sf.gg']{sf.gg}

<!--结果-->
<ul class="list-group">
    <li class="list-group-item"><span>跳转至</span><a href="sf.gg">sf.gg</a></li>
    <li class="list-group-item"><span>跳转至</span><a href="sf.gg">sf.gg</a></li>
    <li class="list-group-item"><span>跳转至</span><a href="sf.gg">sf.gg</a></li>
</ul>

Web Essentials

（下载）
为VS提供一些Web开发常用功能的扩展，如：

• JS、CSS代码折叠（支持region折叠）;

• 生成兼容性CSS代码;

• 背景图片Base64转换；

• CSS图片预览，鼠标移至背景图片的代码时（background:url('a.jpg')），预览图片；

• 支持TODO注释的特殊显示（在含有TODO注释的代码行前显示一个特殊的图标）；

浏览器相关

Chrome

Chrome浏览器上一些非常好用的插件：

ruul. Screen ruler

下载
在页面中插入一把尺子，可以度量网页元素宽高、辅助对齐等。

EditThisCookie

下载
一款可以管理Chrome浏览器中cookies的插件，用户可以利用EditThisCookie添加，删除，编辑，搜索，锁定和屏蔽cookies。

Web开发工具箱

下载
全能的开发工具箱，什么编码、格式化、大小写转换、代码美化压缩、加密解密，应有尽有。

在线资源

Chrome插件下载

网址：http://www.cnplugins.com/

在线雪碧图制作

网址：http://spritegen.website-performance.org/oldsites/spritegen/htdocs/

• 支持中文

• 支持自定义前缀

• 支持图片压缩