切圖類插件
cutterman
assistor-ps
作為頁面仔,自己的ps沒有一個好的插件怎么能行呢。
預處理器和后處理器
處理器
Less
Sass
Stylue
autoprefixer
編譯工具
gulp-autoprefixer
gulp-less
gulp-sass
gulp-stylus
gulp-sourcemaps 用來在瀏覽器中調試自己寫的less\sass\stylus,能夠準確在開發中工具定位。
koala 不想使用gulp\grunt等自動化工具來編譯的話,可以使用這個,全平臺支持。
編譯工具中我常用到的gulp,所以都是依賴gulp插件的。如果你是使用別的自動化工具的話,可以去npm package官網上尋找你要的插件。
CSS 在線生成工具
CSS小工具集合
CSS3 Maker
Border Radius
CSS3 Generator
CSS3 Tool
CSS3 Keyframes Animation Generator
Ceaser - CSS Easing Animation Tool - Matthew Lein
Stylie
在線的css3工具,作為學習和編寫css特效項目有很大的幫助。尤其是css3動畫的制作。
自動化工具
npm
bower
gulp
grunt
fis3
webpack -> 翻譯文檔
自動化工具用來安裝依賴和構建項目,能夠很方便的處理那些繁瑣的事情如:壓縮、打包、編譯等。
調試工具
Browsersync
微信調試工具
BrowserStack Local 一款要收費的chrome插件,提供許多許多版本的瀏覽器可以測試(遠程開虛擬機,然后我們在瀏覽器里面可以看到)。還支持一些安卓和ios模擬器的查看(也有免費的可以用,不過可用的瀏覽器就很少了)。
WEB前端助手(FeHelper) 也是一款chrome的插件,功能的話可以點開鏈接看看。
調試工具可以解放我們的f5鍵和能夠更加方便的在手機上調試。大大提高生產力!
Sublime 插件
我的 Sublime Text 必備插件 列出了一些常用的插件以及安裝和使用的方法,適合***次使用的童鞋。
Sublime collection
建議大家把自己的package都上傳到github或者coding之類的代碼托管平臺,以后換電腦的時候就再也不用重新的去安裝那些插件了。
其他
Landscaping With Frontend Development Tools
Frontend Tools
醉牛前端
正則表達式工具
caniuse-cmd 知道 caniuse 的童鞋都懂。
***
作為一個頁面仔,很需要有工具去輔助自己開發。例如:處理器、自動化工具、調試工具等。隨著自己的負責的項目越來越大,更需要這些工具去處理那些繁瑣的事情,讓我們能夠更加專注的去寫代碼。
聲明:本文僅為傳遞更多網絡信息,不代表IT資訊網觀點和意見,僅供參考了解,更不能作為投資使用依據。