工具武装的前端开发工程师

刚好获得微信的“原创声明功能”，来实验一下回复功能。前端入坑多年，用过很多的软件和工具，就在此分享给大家一个“老司机”的工具库吧。我现在主要的开发语言是 javascript，在做一些项目经理还有产品的一些工作。

我是从做设计转做前端的，做了两年的设计，学了一些设计和绘画的软件如：PS、AI、Painter 等，现在这里只介绍我入前端坑以来，外加我其它工作中常用使用的效率工具。

我的工作环境是从Windows转向Mac的，用了Mac之后回不去了，Mac对于不撸游戏的玩家，要比Windows出众太多，所以这里只介绍我的电脑里面有的软件，但是很多软件是跨平台Windows上面也是有的哦。

编辑器

1. SublimeText(Windows/Mac)可以长期免费试用

这个工具已经很火了，我之前是99%的码是这上面撸出来的。关键是它的小巧、简洁、快枪手，长大的文本打开速度也是杠杠的。编码垒字的神器，还能览图/文件对比/....

拥有插件扩展机制，在它上面有一系列特别好用的插件，其中最喜欢的插件是 PlainTasks 我用它做一些简单的任务管理，比如写日报等

2. Atom (Windows/Mac)免费

这个软件也有很多人用。最近用得也特别多，最主要是这个软件我拿它开发ReactNative相关的项目，对ReactNative开发有个官方插件对调试代码提示都比较友好，Atom这个软件我有些不喜欢，它启动太慢了，大的文本文件打开要非常之久，无法忍受，没有办法ReactNative官方给它退出了个插件Nuclide。所以我一直用它，不过呢界面和代码高亮其实我挺喜欢的，啥时候能优化一下性能，我估计就抛弃的Sublime，虽然我已经抛弃Dreamweaver....。

3.Vim (Windows/Mac)免费

这个是个古老的编辑器，我接触到它的时候，其实是看到一个PHP程序猿在使用它来撸码，然后我接触到服务器部署等问题的时候，经常会使用它改一些配置和临时更改一些文件。很显然我已经掌握了它的使用。如果你使用它来做前端开发你需要一系列插件帮助你提供效率。在我的这个仓库里面有插件的各种玩儿法https://github.com/jaywcjlove/vim-web。

4.HBuilder(Window/Mac)免费

剩下就是这个国人开发的编辑器了，通常带新手的时候我建议他们安装这个编辑，因为上面的JS提示等各种很优秀，其实过往的一个软件Webstorm同样优秀，为啥不推荐它呢，主要它是个收费软件，身为程序员不建议你破解它，本着支持国货的态度，所以推荐HBuilder。

5. 其它我不用的优秀编辑器

a). Adobe推出的Brackets(Window/Mac)免费/开源编辑器，这个是它的仓库https://github.com/adobe/brackets/，它的官网在这里 http://brackets.io

b). 微软推出的Visual Studio Code(Window/Mac)免费/开源编辑器，https://github.com/Microsoft/vscode，你可以去它的官网去看看它的介绍http://code.visualstudio.com

命令行工具Terminal

1. iTerm(Mac)免费

它是 OS X 下一款开源免费的的终端工具，直接替代自带的Terminal。这个可是Mac下最好用的终端工具了，没有之一，堪称神器，尚方宝剑?。官网在这里：http://www.iterm2.com，它的特性太多了，如智能查找、切分屏幕、标签变色、智能选中、命令自动补齐、查看命令历史、全屏展示所有的tab等等。作为一个前端开发工程师，其实你慢慢的发现终端工具你使用越来越频繁了，所以你需要一个趁手的工具来高效完成你的工作。

2. oh my zsh

这个之前介绍了，我还为它发了一篇微信文章《前端工程师也需要zsh》点击进去看看？里面介绍了安装和使用方法。

官网：http://ohmyz.sh

Github: https://github.com/robbyrussell/oh-my-zsh

版本控制Git/SVN Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。我已经多年不使用svn了，其它的版本控制工具我也没有使用过，如果你还不知道它，或者不能使用它我也不能说你什么。

官网在这里：https://www.git-scm.com/

通常情况下我不太使用GUI，但是一般我在带新手的时候先建议他们安装GUI，然后慢慢学习命令行下操作。在git 官网上这种GUI工具多达十几款，在Mac平台我推荐一两款好用的软件GUI，官网GUI客户端列表：https://www.git-scm.com/downloads/guis。

1. DiffMerge (Windows/Mac/Linux)免费

DiffMerge 是一款可视化的文件比较（也可进行目录比较）与合并工具。 该软件主要具有文件差异比较、自动化的文件合并、以及文件夹差异比较这三大功能。这里下载：http://sourcegear.com/diffmerge/

2. SourceTree (Windows/Mac)免费

官网在这里：https://www.sourcetreeapp.com/

3.Gitup(Mac)免费开源

好玩的Gitup是 Mac OS X 的全功能开源 Git 客户端,提供快速,安全的操作,直接在硬盘上与 Git 数据库交互,操作库的图而不是操作 commits，官网在这里：http://gitup.co/

4. Cornerstone(Mac)收费工具

Cornerstone是Mac上最佳的SVN管理工具

5.Versions(Mac)收费工具

Versions是一款Mac平台下非常棒的SVN同步管理客户端

数据库

1. Sequel Pro(Mac)免费

Sequel Pro for Mac是一款Mac平台的MySQL管理工具，sequel pro for mac是MySQL数据库管理应用程序，官网在这里：http://www.sequelpro.com/

2. Chrome MySQL Admin免费

这个是一个Chrome插件，是MySQL开发的跨平台、可视化数据库工具。你可以访问外国网站，通过Chrome应用商店下载。

3. Robomongo(Windows/Linux/Mac)可以免费使用

Robomongo是一个开源的，基于Shell的MongoDB图形化客户端管理软件，主要由C++语言编写成，可运行在Windows，Linux和Mac OS X系统上。由于它内置了JavaScript引擎，所以在MongoShell中执行的任何操作都可以同样的在Robomongo的Shell中执行，最值得一提的是，它支持直接对数据以json方式浏览和修改，非常方便。官网在这里：https://robomongo.org/

设计/产品

1. Sketch(Mac)收费

它是一款mac平台下轻量，强大的矢量设计软件。很显然我已经放弃PS和AI，他们太臃肿和收费太贵。还有人把这个当作产品经理用来画原型，我个人看这个是不合理的，他是一个UI设计软件画原型其实时间成本太高，为什么有产品经理用它来画原型呢，说明它使用之简单，之漂亮。官网：http://www.sketchapp.com

这个是我常用的设计软件，已经放弃了PS。啊...

2. Sketch Toolbox(Mac)开源免费

它是一款能够让你在一个地方集中查找、下载、安装Sketch插件的工具。在这里啦：https://github.com/buzzfeed/Sketch-Toolbox

3. Affinity Designer(Mac)收费

它是一款专业的设计绘图工具，适用于苹果操作系统，主要用于矢量图形的绘制，适用于图标、UI 设计、网站设计、宣传素材等图像的制作，具有较强的易用性，操作也十分方便。

4. Icon Slate(Mac)免费

是一款让您轻松创建，输入和输出多种格式电脑和移动终端程序图标的图标制作工具。主要是能输出ico格式的哦，

5. IconJar(Mac)免费

是一个可以帮助设计师搜索、收集、管理的素材工具，可以极大的提高设计师们的素材库使用效率，减少寻找有效素材的时间，提高工作效率，该工具目前进支持Mac系统。官网：http://geticonjar.com

6. Justinmind(Mac)免费

画原型图工具，justinmind相比axure功能更丰富强大，但是团队合作比较难用主要是同步比较慢，jm功能丰富相对新手入手就有入门学习成本。好像不支持SVN。官网：http://www.justinmind.com

7. Axure RP 8(Windows/Mac)收费

画原型图工具，它能使用SVN工具，进行版本控制，使用成本。官网：http://www.axure.com

8. Mockplus(Windows/Mac)收费

是更快更简单的原型设计工具。交互快、设计快、演示快、上手快。拖一拖链接完成交互设计,放一放组件完成原型图,扫一扫二维码在手机中演示。https://www.mockplus.cn

9. XMind

是一款实用的思维导图软件,简单易用、美观、功能强大,拥有高效的可视化思维模式,具备可扩展、跨平台、稳定性和性能,真正帮助用户提高生产率,促进有效沟通及协作。http://www.xmind.net/

10.PostMan：是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。

11.Gliffy Diagrams：是一款相当实用的Chrome套件，而且可以离线使用，透过这个工具可以绘制各种图表，且透过模组化的物件来制作图表，将大大提高工作效率，节省时间成本。

12.RoboCompass：同上这个是在先版本需要访问外国网站。

正则表达式编辑器

1.Reginald

2.Reggy

2.RegExRX

其它软件

1.Homebrew(Mac)开源免费

可以理解为Ubuntu上的apt-get，用这个软件可以轻松的装其他的Mac上的软件。主要是服务程序员的，这是一个非常重要的对于程序员来说不可或缺的Mac软件。官网在这里：http://brew.sh

2.Cakebrew(Mac)开源免费

这个是方便管理Homebrew的GUI软件，不用在命令行安装程序，并且可以方便的查看本地通过Homebrew安装了那些软件，搜索安装并软件。官网在这里：http://www.cakebrew.com

3. CheatSheet(Mac)免费

CheatSheet 是一款Mac上的非常实用的快捷键快速提醒工具，你只需要按住Command键，就会弹出当前应用的所有快捷键列表，所以你记不住一些软件的快捷键没有关系，只需要使用CheatSheet，随时提醒你当前软件的所有快捷键，比如Safari、Finder、Photoshop，简单实用并且完全免费，支持中文，非常不错！这里下载：https://www.mediaatelier.com/CheatSheet/

4. TeamViewer(跨平台)个人使用免费

用于实现远程支持、远程访问、远程管理、家庭办公及在线协作和会议功能的软件。支持Windows、Mac、Linux、Chrome OS、iOS、Android、Windows Mobile和BlackBerry平台。官网Dash是一个API文档浏览器（ API Documentation Browser），以及代码片段管理工具（Code Snippet Manager）在这里：https://www.teamviewer.com/zhCN/

5. Dash

Dash是一个API文档浏览器（ API Documentation Browser），以及代码片段管理工具（Code Snippet Manager），Dash在Mac App Store里面免费提供下载。

6. licecap(Windows/Mac)可以免费使用

是一款屏幕录制工具，支持导出 GIF 动画图片格式，轻量级、使用简单，录制过程中可以随意改变录屏范围，本文中Gif图片就是这个软件生产出来的。官网：http://www.cockos.com/licecap/

7.Leaf(Mac)收费

Leaf Mac版是OS X 上一款 RSS 客户端程序，也是一款轻型阅读软件，界面很漂亮，UI和交互都挺新颖，对于轻型阅读，新颖的交互形式很美观很大方。Mac App store中可以购买。

8. VOX：Mac 上最好用的免费全能音乐播放器，撸码之余听听歌是一种享受。

9. Lantern：免费的访问外国网站工具

10.Grappler：Grappler是一款可以从网页上抓取音乐和视频的软件，支持Flash和HTML5的视频格式。

11.wxmp：《Chrome插件优化在微信公众账号中发文章》介绍在这里，我已经生成了Wxmp.crx 文件，这里下载：https://github.com/jaywcjlove/wxmp/releases

Mac上的软件下载网址推荐

1. 类似于iOS上Cydia一样的第三方软件商店：http://hack-store.com/
2. 玩转苹果：http://www.ifunmac.com/
3. 玩儿法：http://www.waerfa.com/
4. Mac软件下载站：http://www.pshezi.com/
5. MacPeers：http://www.macpeers.com/
6. Mac志：http://www.isofts.org/
7. Mac软件分享：http://www.waitsun.com/
8. AppKed：http://www.macbed.com/
9. 苹果软件园：http://www.maczapp.com/