大前端工具集

大约 38 分钟

大前端工具集

提示

大前端工具集 Awesomeopen in new window

这个项目的定位是 大前端程序猿的百宝箱。主要针对 前端方向和 Node 方向；主要内容是国内外优秀的库、工具、套路、设计 / 交互或关注的前端组织 / 博客等等，反正用 瑞士军刀 来总结这篇文章再合适不过了。

对于列在这里的几乎所有项目，我都有去实践与了解，所以我会尽量给出中肯的建议和理解，也希望大家能多关注我的评语 😃

正文

前端组织/前端博客

虽混过外企俩家，但劳资英文这项的技能点还是灰色的 ...so，俺关注的站点主要以中文为主

博客搭建

使用 Hexo/Jekyll + GitPage，前端搭建静态博客那是相当 easy。用 Markdown 写文章做记录，再 push 到 Github 上，分分钟高大上有木有

再推荐三款视觉效果极佳的 Hexo 主题，且在 Github 上的 star 都很不错：

不能偏心，所以也推荐三款 Jekyll 的好主题：

HTML

纯 HTML 相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客

CSS

浏览端 JS

Swiper/PhotoSwipe/fullPage 有这仨库，微信里常见的 H5 页完全不是问题哒

React & RN

Project Build

Gulp + Webpack 的使用套路参考 : learning-gulpopen in new window

Gulp 资料收集：use-gulpopen in new window

推荐篇与 Webpack 相关的文章《CSS Modulesopen in new window》

Webpack 用起来吼吼：webpack-howtoopen in new window

Node Package

作为一名大前端甚至是多端，Node 绝逼是必备的一块

有关 Node 的学习资料，请访问 Node 学习资料open in new window

这里介绍些有特色且前端有必要知道的包

supervisor 和 nodemon 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈 😃

Node Project

暂无

精选阅读

前端技术

Node 学习资料

前端面试

其他技术

工具/软件

Web

APP

以下列表中的 APP 都是不区分系统平台的

  • 印象笔记open in new window - 免费账号完全够用，跨平台跨终端的记录软件
  • 365 日历open in new window - 首先肯定比系统自带的日历强大，要不推荐个蛋蛋 俺一般用来搞目标管理，比如学习计划和工作计划 生活中会订阅演唱会、电影首映的信息
  • 多看阅读open in new window - kindle 确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽
  • Surgeopen in new window - 非免费 牛逼的网络开发与调试工具，前端必备
  • Monkeyopen in new window - Monkey 是 iPhone 上一个 GitHub 第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名

Mac 软件篇

对于美好事务的追求无论何时都不算晚。

Mac 下的软件那么多，又是免费又是付费，应该怎么选呢？我来分享下我的推荐列表，推荐的优先级老规矩，从上往下依次降低。

  • Alfredopen in new window - 免费，绝对的推荐 Top1，很提效率，高级版 Powerpack 售价 £17。除了能快速搜索和打开应用程序之外，查找文本文件、全文检索、调起浏览器搜索和计数器都是俺经常使用的功能。如果想知道具体咋用，推荐阅读老池 ( 池建强 ) 的文章：《神兵利器 —Alfred》open in new window
  • iTerm2open in new window - 免费。Mac 终端功能少又不好看，iTerm2 可以解救你 ~ 推荐篇文章：《让你的命令行丰富多彩》open in new window
  • HyperDockopen in new window - 售价 ￥68，感觉还是很值的 ( 特么我还想说，Windows 数年前就自带的功能，在 Mac 上还收费，略忧伤 )。预览和快速切换窗口太有必要了，能用快捷键控制窗口，能让拖拽到边缘的窗口自动调整大小 (window 早就有的功能 )，真心能提高效率。推荐篇中文的文章：让 Mac 的窗口飞open in new window
  • ATOMopen in new window - 免费。2015/7 之前，在桌面环境下偶最喜欢的编辑器是 Sublime，但之后就是 ATOM，俺也专门为它写了篇 《使用纪要》open in new window
  • Surgeopen in new window - $49.99。关注 IOS 开发或者常备梯子的同学，肯定都知道这大名鼎鼎的软件。价钱从 ￥68 涨到 $99 也让偶咋舌，背后的故事就不细说了，感兴趣可自行去谷歌百度一下。PS ：翻墙软件 小飞机 ShadowsocksXopen in new window 也非常棒，同样推荐：“ 轻量级科学上网姿势，改变您的生活体验！”
  • 1Passwordopen in new window - 免费 试用一个月，售价不便宜 $64.99。如果觉得对各种账号的密码管理心累，那么推荐你使用，这个钱肯定值，Mac 和 iPhone 通用，爽歪歪。如果账号密码都是那种一、俩个套路，而且被盗也随意，那么用不用就无所谓啦
  • Go2Shellopen in new window - 一款适合程序员的神器。可以快速在当前目录打开 Shell 的工具，比如直接在 Finder 里打开 ITerm2。
  • Sequel Proopen in new window - 免费。好用的 Mysql 工具
  • OmniPlanopen in new window - 免费 试用 14 天。甘特图工具，项目 Leader 必备。
  • Manicoopen in new window - 免费 版已经很好用了，全功能版售价 ￥25。快捷启动和切换 APP 的工具，高效的第一步
  • Moomopen in new window - 售价 $10，有试用版。个人觉得这钱花的值，设置快捷键之后可以方便的调整每个窗口的位置。我不管在家还是公司都是开双屏，外接屏幕三分之一 iTerm，三分之二 ATOM，日常使用时各种全屏、居中、靠左、靠右等用快捷键来回着换，辛福感满满的。
  • CheatSheetopen in new window - 免费。能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘
  • 奇妙清单open in new window - 免费 漂亮的任务清单管理工具。有简中和繁中版，操作和样式都比较简洁，推荐有 TODO 需求的人士使用。最关键的是其支持所有设备而且免费。
  • 马克鳗open in new window - 免费 版已经够用啦，收费版是 60/ 年。英文名 MarkMan，非常强大好用的标注、测量工具，强烈推荐
  • BrowseShotopen in new window - 免费。偶正在使用的网页截图工具，强烈推荐
  • Wiresharkopen in new window - 免费。说实话，Mac 下木有 Fiddler 挺不习惯，不过在有更强大的替代品，虽然有点复杂 ... 还好后来下载到便宜 (￥68) 的 Surge 做替代品
  • LICEcapopen in new window - 免费。屏幕录制工具，支持导出 GIF 动画图片格式 轻量级、使用简单，录制过程中可以改变录屏范围
  • Bartender 2open in new window - 售价 $20.97，但是可 免费 试用四周。Mac 右上角菜单的管理工具，试用之后右上角的菜单瞬间清爽了，反正试用下也不花钱 😃
  • BeyondCompareopen in new window - 免费。在 Windows 下就开始用了 比对文件和文件夹杠杠好使，Merge 必备工具
  • SourceTreeopen in new window - 免费。属于大名鼎鼎的 Atlassian，一款好用的的 Git 客户端工具，重点是 支持中文，哈哈 😃
  • focus boosteropen in new window - 免费 已经够用，当然还有更高级的 INDIVIDUAL/PROFESSIONAL，售价分别是 $3/$5。因为比较在意时间管理，所以当工作压力较大时，这软件是俺的必备之物
  • WebTorrentopen in new window - 免费。直接播放种子，你懂得。年轻的斯坦福大神 Ferossopen in new window 开发，Git 上的开源项目哦。
  • WebStormopen in new window - $129，可试用一个月。功能超强的前端 IDE，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转 ... 然后俺就卸载装了，装了 ATOM...
  • MindNodeopen in new window - 售价 $29.99，有免费试用版。这是款漂亮的思维导图工具。其实 百度脑图open in new window 这类 Web 上的工具绝对够用了，不太推荐 ...
  • Mouopen in new window - 我曾使用过的 Markdown 编辑器，不推荐使用。原本已经准备去掉，但是偶还是想让大家了解下这个有意思的事情：《一年了，那个闻名遐迩的 Mou 你还记得吗？》open in new window
  • Fliqloopen in new window - 视觉控会喜欢的屏保软件。纯深色界面上铺满着大大的时间，非常好的简约效果。

以上列出来的都是偶觉得比较有意思、有特点的软件。当然，类似 Docker、Polarr( 泼 辣修图 ) 等这类都太小众；有道翻译、Evernote、Foxmail 等这类又太大众；然后有些软件买了觉得有点 “ 亏 ”，比如刚出手买入的 Final Cut Pro，其实机器自带的 iMovie 就挺好了（完美诠释《Final 从入手到放弃》）。所以，这几类就不一一往这列举啦 ~

Linux

作为一名程序员兼工具控，我期待自己无比高效

首先，都是免费哒；然后，所列项目都是针对 CLI( 命令行界面 ) 哒；最后，探索无止境

  • oh-my-zshopen in new window - 终端党 必备，好处太多太多，比如炫酷的外观，超强的易用性 ... 推荐大家阅读知乎的问题：《为什么说 zsh 是 shell 中的极品？》open in new window
  • spf13-vimopen in new window - 对于 Vim 偶之前做了好多文档和记录，但是自从了解有这个套路，那些记录都可以丢掉了。不过建议想了解的去看看 .vimrc 中的 Plugin，确实足够大而全。PS ：如果遇见 neocomplete does not work 之类的错误，可以参考 Problems with Vim and lua?open in new window
  • Vundleopen in new window - Vim 党必备。用于管理各种 Vim 插件，有 Git 就可以安装 $ git clone https://github.com/gmarik/vundle.git ~/.vim/bundle/vundle
  • treeopen in new window - linux 以树状图逐级列出目录的内容，装逼效果和实用功能都不错
  • clocopen in new window - 可用来计算 文件夹中各种语言的代码占比情况。展示内容非常直观，如某目录下 JavaScript 有多少个文件，共多少空格行数、注释行数、代码行数，就这些简单粗暴的内容。常见的安装方式可通过 npm 来进行安装。
  • oneapmopen in new window - 强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS ：我这用了服务器监控 ( 免费哦 )
  • httpieopen in new window - 一个 CLI 中的 HTTP 客户端，用法简单，非常适合用来搞调试、测试
  • ESLintopen in new window - 前端大神Nicholas C. Zakasopen in new window创建。JavaScript 辅助编码的规范工具，有效控制偶们的代码质量
  • Lucarioopen in new window 暗色系主题，支持 Vim, Atom, Sublime Text, TextMate, Terminal.app, iTerm, Xcode and XTerm
  • cmatrixopen in new window - 作用就是装逼，可以在屏幕上显示经典的黑客帝国的数码雨效果 ( 看官方文档上也有其他效果，俺就不往细研究了 )。在 Mac 下安装非常简单，一步搞定：$ brew install cmatrix

Mac

  • Homebrewopen in new window - 有了他 OS X 程序猿能更好的专注代码层面。最近在看《七周七语言》，里面出现各种语言环境，用 brew 来安装、管理各种解释器和编译器，省心省力！
  • Xcodeopen in new window - 因为玩 Swift 所以早早就下载了，后来才知道原来 Mac 下如果不安装 Xcode，部分常用的指令都不支持，囧

Chrome 浏览器插件

Chrome 应用商店必定是需要翻墙的哈。

以下插件都是俺多年积累淘出来的，数量不多，所以就不区分 Github 插件和非 Github 插件了。按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用。后续如有新发现好插件，偶也会及时更新哒。

  • Postmanopen in new window - POST 接口调试终结者，异常强大的接口调试工具。稍稍有一点学习成本，推荐之
  • JSONViewopen in new window - 就是个 JSON 格式的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS ：同类插件有不少，所以用的开心就行
  • 二维码生成器open in new window - RT。PS ：这 FF 早已经自带生成二维码工具了，Chrome 还得装插件才行，任性 ...
  • WEB 前端助手 (FeHelper)open in new window - 百度 FEopen in new window出品，功能超全的 Chrome 插件。简单列一下其功能：QR 码生成器、字符串编解码工具、JSON 格式化查看器、前端编码规范检测、代码压缩工具、页面取色工具、统计并分析网页加载性能等等
  • Eye Dropperopen in new window - 前端必备的颜色提取神器，操作简单容易上手
  • Vimiumopen in new window 和 Vim 快捷键一样，浏览网站时不需要鼠标咯
  • Page Ruleropen in new window - 前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有
  • FireShotopen in new window - 可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的
  • Infinityopen in new window - 好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的 新标签页 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、Gmail、Chrome商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等
  • Momentumopen in new window - 同样也是 新标签页 的插件，但是不管是视觉上 ( 高清大图 ) 还是功能上，都比 Infinityopen in new window 高大上不少，Setting 里面有不少设置和快捷键，都很好上手的。Infinityopen in new window胜在中文和直观，Momentumopen in new window胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢 😃
  • Google 翻译open in new window - 英文不好又得经常浏览英文资料的，一般都准备好了翻译工具。不过能在浏览器里达到划词翻译的方案就不多了，偶推荐这个 Google 翻译 (PS：如不能翻墙，有道词典的扩展也同样支持划词翻译 )。
  • Octotreeopen in new window - 在浏览器左侧展示 Github 项目的文件导航，使目录结构一目了然，而且我们国内 Github 的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 Github 的同学强烈推荐
  • BuiltWithopen in new window / wappalyzeropen in new window / Chrome Sniffer Plusopen in new window - 几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 Web Servers、服务端的 Frameworks 或 JS 框架，小到 meta、编码格式甚至 Analytics，非常推荐
  • Adblock Plusopen in new window - 非常非常有名的免费的过滤广告的插件。PS ：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告
  • Wide Githubopen in new window - 无聊又实用的 Github 插件。无聊是因为这个插件就特么一个功能，加宽，能让 Github 页面变宽，每行展示更多的内容，尤其配合着Octotreeopen in new window，展示效果极佳。非常推荐 Mac 用户实用，因为屏幕比较不大，变宽后阅读感觉更好
  • Gmailopen in new window - 方便查看自己的 Gmail 邮件
  • Imagusopen in new window 鼠标指针悬停在链接或缩略图上时直接在当前页面的弹出视图上显示这些图片、HTML5 视频 / 音频和内容专辑 ... 看新浪微博时贼有用 😃
  • DevTools Authoropen in new window - 纯装逼的插件，可以选择你的 Chrome 开发者工具的主题，且支持的主题超过 25 种，视觉装逼控必备。设置分大概三步，官网有文字说明，youtube 上的视频教程奉上 (Customization With DevTools Author)[https://www.youtube.com/watch?v=AUZagMLMAJc]
  • GitPlugopen in new window - 在 Github 项目页中嵌入有关的图表信息，直观的展示当前项目的 Star Trend，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 News 展示
  • OctoLinkeropen in new window - 在 package.json 或任意 .js 文件中，可以方便的对 require() 的 package 进去点击，跳转去对应的 Github 页面。PS ：特么不太好表达，建议你去这个插件的概述页，里面有个十来秒的视频，看完就明白鸟
  • GitHub Hovercardopen in new window - GitHub 增强工具，悬停可显示对应的用户、仓库、issue 等的详情。
  • ReResopen in new window - 可以用来更改页面请求响应的内容。通过指定规则，您可以把请求映射到其他的 url，也可以映射到本机的文件或者目录。ReRes 支持单个 url 映射，也支持目录映射。

补充：

  1. 翻墙代理的插件偶没使用，偶手机和电脑的翻墙都是配的 Surge 无脑搞定，不过翻墙代理插件推荐Proxy SwitchySharpopen in new window，熊掌公司里大多用的都是它
  2. 日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈

Git

服务端

如 Ruby、Python 、 Perl 等相似的服务端语言的学习资源。

暂无

数据端

客户端

面对大名鼎鼎的 Electron，我懵逼了。犹豫了一会儿，不知道把其放在哪个分类中，于是我单开了一个 客户端 的类目。

设计/交互

作为负责最终效果呈现的前端工程师，多少得了解些 设计和交互 的，这也是为什么 fetool 会单独的存在这一章 ... 当然话又说回来了，偶毕业的第一份工作是设计 😃

速查手册

RT，这篇都是些文档或者 API，一般这类东西都在大家浏览器的书签内，偶这也列一下大前端常用的手册地址

杂七杂八

放些开发中较有用的杂物在这儿

前端炫技-炫酷狂拽叼炸天站点

小结

背景

俺算个比较能自我总结的码农，所以偶尔喜欢写点东西做些记录或者自我熏陶陶醉一下。可写着写着发现Evernote里面的东西太尼玛多 ( 乱 ) 了，于是想着把一些技术相关的资料都整理整理，都丢到Github上沉淀下来。 这样 Evernote 就可以只需要记录些偏生活方便的，看着清爽一些 ...

所以，这篇记录其实只是为偶自己而写，确信以后也一直会这样 ~~~

说说目标

其实与这篇记录类似的文章太多鸟，俺也不愿意成为一个单纯的收集资料，分享资料的这么个东西。 我希望 fetool 能更生动、更个性，最好能更另类点，对于每样工具的思考和解析更多点，吐槽也必须有理有据，然后再配上劳资收集的 low 图，完美！ 希望通过不停的完善这篇记录，能 Push 劳资多了解业内的新玩具和新创意，然后围绕这些新东西，客观的再写点好东西，比如文章、资料、开源项目这些，让其他伙伴们少走弯路或学的更顺畅点儿

所以劳资对自己的要求是：这篇记录里列出的每样东西，自己都得的去了解、去尝试，然后再列出来。 能举一反三最好，如果达不到至少也能清楚的认识：列出来的这玩意对程序员有没有卵用，解决了啥痛点。

TODO

  1. 继续完善和扩充内容

  2. “ 备注 / 说明 ” 这一栏不够犀利，希望再多加入自己的理解、点评、吐槽，让这篇记录更犀利和生动

  3. 支持导出多种格式，如.pdf、.epub、.mobi等

  4. 后续看看如果有必要，可以单独搞个页面，优化下阅读和展示效果

以下是 @ 拔赤open in new window 总结的前端技能图： 拔赤总结的前端技能图

完善 ing，慢慢把 Evernote 和 浏览器书签 里面的好东西慢慢捣腾到这儿，更欢迎 PR，谢谢。

用自己青涩时的照片镇楼，哇哈哈 ~

提示

下面是原作者的联系方式

您可以通过以下方式联系到我

License

CC0open in new window