前端高效開發之工具篇

一直想把本身遇到的好用的工具、框架、技術文章之類的作一個彙總記錄,可是一直沒時間去弄,今天得空,先把工具軟件整理下,文章會不斷更新。 css

IDE

Visual Studio

一個豐富的集成開發環境,用於建立面向 Windows、Android 和 iOS 的出色的應用程序及現代 Web 應用程序和雲服務。
PS:由於本人從.net轉的前端,因此對於VS的留戀仍是有的。html

下面列舉此IDE下的一些有用的插件:前端

Emmet

下載 語法web

Emmet的前身是大名鼎鼎的Zen coding,若是你從事Web前端開發的話,對該插件必定不會陌生。它使用仿CSS選擇器的語法來生成代碼,大大提升了HTML/CSS代碼編寫的速度。chrome

代碼示例:瀏覽器

/*輸入*/
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開發經常使用功能的擴展,如:cookie

  • 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/

  • 支持中文

  • 支持自定義前綴

  • 支持圖片壓縮

相關文章
相關標籤/搜索