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

编辑注:作为一个前端工程师,现在可用的前端开发工具实在是多不胜数,本文作者讲了一些前端工作者电脑中的常用软件以及相关软件的对比,像编辑器就有sublime text3、atom等。

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

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

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

编辑器

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

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

640wx_fmtpngamptpwebpampwxfrom5ampwx_lazy2

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy

2. Atom (Windows/Mac)免费

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

640wx_fmtpngamptpwebpampwxfrom5ampwx_lazy1

3.Vim (Windows/Mac)免费

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

640wx_fmtpngamptpwebpampwxfrom5ampwx_lazy3

4.HBuilder(Window/Mac)免费

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy1

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等等。作为一个前端开发工程师,其实你慢慢的发现终端工具你使用越来越频繁了,所以你需要一个趁手的工具来高效完成你的工作。

640wx_fmtpngamptpwebpampwxfrom5ampwx_lazy4

2. oh my zsh

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

官网:http://ohmyz.sh

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

650wx_fmtpngamptpwebpampwxfrom5ampwx_lazy5

版本控制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/

660wx_fmtpngamptpwebpampwxfrom6ampwx_lazy6

2. SourceTree (Windows/Mac)免费

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

770wx_fmtpngamptpwebpampwxfrom7ampwx_lazy7

3.Gitup(Mac)免费开源

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy2

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy3

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/

640wx_fmtjpegamptpwebpampwxfrom5ampwx_lazy

2. Chrome MySQL Admin免费

这个是一个Chrome插件,是MySQL开发的跨平台、可视化数据库工具。你可以翻墙,通过Chrome应用商店下载。

880wx_fmtpngamptpwebpampwxfrom8ampwx_lazy8

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

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

设计/产品

1. Sketch(Mac)收费

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

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

10100wx_fmtpngamptpwebpampwxfrom10ampwx_lazy101

2. Sketch Toolbox(Mac)开源免费

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

11110wx_fmtpngamptpwebpampwxfrom11ampwx_lazy111

3. Affinity Designer(Mac)收费

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

13130wx_fmtpngamptpwebpampwxfrom13ampwx_lazy131

4. Icon Slate(Mac)免费

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

12120wx_fmtpngamptpwebpampwxfrom12ampwx_lazy121

5. IconJar(Mac)免费

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

14140wx_fmtpngamptpwebpampwxfrom14ampwx_lazy141

6. Justinmind(Mac)免费

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

0wx_fmtgifamptpwebpampwxfrom5ampwx_lazy4

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

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

15150wx_fmtpngamptpwebpampwxfrom15ampwx_lazy151

8. Mockplus(Windows/Mac)收费

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

16160wx_fmtpngamptpwebpampwxfrom16ampwx_lazy161

9. XMind

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

17170wx_fmtpngamptpwebpampwxfrom17ampwx_lazy171

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

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

12.RoboCompass:同上这个是在先版本需要翻墙。

正则表达式编辑器

1.Reginald

2.Reggy

2.RegExRX

640wx_fmtjpegamptpwebpampwxfrom5ampwx_lazy1

其它软件

1.Homebrew(Mac)开源免费

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

2.Cakebrew(Mac)开源免费

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

18180wx_fmtpngamptpwebpampwxfrom18ampwx_lazy181

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里面免费提供下载。

640wx_fmtjpegamptpwebpampwxfrom5ampwx_lazy2

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

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

7.Leaf(Mac)收费

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

19190wx_fmtpngamptpwebpampwxfrom19ampwx_lazy191

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/

欢迎扫描关注作者微信,本文已获作者授权,如有转载,请联系原作者JSdig

640wx_fmtpngamptpwebpampwxfrom5ampwx_lazy


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流