我的个人前端开发工具整理

发表于 更新于 分类于 阅读次数：
本文字数： 2.4k 阅读时长 ≈ 2 分钟

首先申明，我是极其反对那种“牛逼的大神用记事本也能写代码”的论调。我们写代码是为了创造有价值的东西，而不是单纯为了炫技。

那在开发的过程中，如何提高我们的编码效率和能力才是最主要的，我经常会看到一些新人即便用了很好的工具，但效率还是很慢，不会装插件，不熟悉快捷键。

俗话说 工欲善其事，必先利其器 ，今天就趁春节假期最后一天，整理了一下我的开发工具以及一些使用心得，希望能对大家有所帮助。

编辑器

Atom

我的最爱，我最早是使用 DreamWeaver 的，后来脱离 PHP 专职做前端开发后，也就告别了 DW ，中途使用过 Sublime Text ，但其安装扩展的方式太不友好，就放弃了，后面也用过 VS code ，感觉和 Atom 不相上下，优势在于打开大文件极快，但插件感觉没 Atom 完善，所以目前还是以 Atom 为主。

既然用了 Atom ，一定要了解两方面：快捷键和扩展。

前者不用说了，任何工具我认为都应该去了解它的快捷键，关于 Atom 的快捷键可以看这篇文章《Atom 编辑器快捷键列表汇总整理》，并不用牢记所有快捷键，我会先大致浏览并实际操作一遍，然后回忆下开发中可能会遇到的情况，争对性的记住部分快捷键。

扩展，这个才是 Atom 的灵魂，如果没有这些开发者贡献的插件，Atom 也就算个高级记事本。

以下是我用到的扩展汇总：

HBuilder

我并不用 HBuilder 写代码，主要还是用它来打包 H5 APP 用，因为对这块研究不深，加上 HBuilder 傻瓜式的操作，所以目前还保留在电脑上。

GIT 管理

Sourcetree

我基本很少在终端里敲 git 命令，一直以来都是用可视化界面的软件，早期是使用 TortoiseGit ，后来是因为 Sourcetree 界面更直观，并且内置了 git-flow 工作流，所以就义无反顾的丢弃了 TortoiseGit 了。

Chrome

前端开发用 Chrome 可以说是必须的，不要和我提 Firefox ，我只在测试兼容性的时候才会想起它。

用 Chrome 有一部分原因是因为它的扩展，不过在介绍我的常用扩展前，先介绍一款 Chrome 的增强插件：GreenChrome ，我主要是看中它实现了双击关闭标签页的功能。

以下是我的常用扩展：

其它

Postman

接口调试工具。

Snipaste

一款很出色的截图软件，而且是国人开发的，我用了之后就把 QQ 、微信自带的截图快捷键给屏蔽掉了。

BootCDN

稳定、快速、免费的前端开源项目 CDN 加速服务。

Iconfont - 阿里巴巴矢量图标库

据我了解，我司设计师找图标也是在 Iconfont 上找的，所以干脆就和设计师商量，设计师找的图标都添加到一个仓库里，前端开发直接生成 css 就行，减轻切图的工作。

Slides

适合技术人员做分享的在线幻灯片，够简单，没有太多复杂的功能。

最后

因为总有新工具出来，所以此文会不定期更新，当然文章里推荐的工具都很主观，都是我的个人使用感受，如果有更好的也欢迎交流。