1

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

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

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

EditThisCookie

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

Web开发工具箱

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

在线资源

Chrome插件下载

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

在线雪碧图制作

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

  • 支持中文

  • 支持自定义前缀

  • 支持图片压缩


imingyu
813 声望27 粉丝

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏。