专栏首页埋名工具武装的前端开发工程师

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

刚好获得微信的“原创声明功能”,来实验一下回复功能。前端入坑多年,用过很多的软件和工具,就在此分享给大家一个“老司机”的工具库吧。我现在主要的开发语言是 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/

本文分享自微信公众号 - JSdig(jsdigs),作者:埋名

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CentOS7安装维护nginx从入门到精通

    Nginx 是一款面向性能设计的 HTTP 服务器,能反向代理 HTTP,HTTPS 和邮件相关(SMTP,POP3,IMAP)的协议链接。并且提供了负载均衡以...

    小弟调调
  • React UI 组件库【uiw】发布

    高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

    小弟调调
  • JS手机振动API vibrate方法

    浏览器对振动API的支持情况,一个好的习惯就是在使用之前要检查一下当前你的应用环境、浏览器是否支持振动API。下面就是检测的方法:

    小弟调调
  • 2017年10大主流编程语言最新排行榜出炉

    祈澈菇凉
  • 新手学习FFmpeg - 如何编写Kubernetes资源文件

    Kubernetes API属于声明式API编程, 它和常用的命令式编程有一些区别。 通俗的说,命令式编程是第一人称,我要做什么,我要怎么做。 操作系统最喜欢这...

    随机来个数
  • 硬盘数据恢复的神器有哪些?

    大数据文摘
  • 数据分析/hadoop/机器学习面试题集锦,可能是最全的了…

    无论你是想从事大数据相关职位的职场小白,还是准备往高处走的牛牛。小白有了这些在校招中过关斩将,牛牛们温故知新跨过业务壁垒。 B格高的HR,或者想要个助理的大数据...

    小莹莹
  • shell脚本:遍历删除

    windows上测试可以安装Gitlinux中,准备删除文件的脚本deleteFile.sh,picture.txt保存待删除文件的文件路径,picture文件...

    chenchenchen
  • 简谈常用算法

    Jacklin999
  • 果拾网推荐高清图片资源

    貟王軍

扫码关注云+社区

领取腾讯云代金券