个人前端开发工做流 - 工具篇

开发工具

SublimeText

在自动化开发的前提下，仍然有不少编码工做是须要亲手完成的，此时编辑器的效率决定了剩下的开发效率。SublimeText一款很棒的编辑器，经过配置和插件的选择能够达到几乎全部需求。

首先从GUI来讲，ST的侧边栏能够随意的拖入文件夹并对其进行操做，而文本区则能够选择多种组合方式，包括网格、最多四栏、最多四列的布局。其滚动条也已经不是一个条了，而是一个代码的缩略图，拖动起来很是方便和清晰。每一个文件的标签就像Chrome同样能够随意的拖出拖入。此外，代码的颜色样式能够有几十种方案供选择，还能够下载针对每种语言的颜色方案，目前我知道的仅有最新的Stylus的styl文件没有对应的颜色方案。

在功能方面，ST最大的特点之一就是会自动生成一份正在打开的文件的拷贝，并且会自动保存，也就是说即便是断电关机，从新打开后本来打开的文件也仍是存在不会丢失任何代码。其次，多处编辑也是很是的强大，在代码中选择多处后会出现多个光标，能够同时编辑，而选中一个词后，按 Ctrl+D 就能够多选下一个相同的代码。另外经过 'Ctrl+P' 能够搜索文件，配合 @ 或者直接按 Ctrl+R 就能够前往指定的方法和函数，配合 : 或者直接按 Ctrl+G 就能够前往指定的行数。按住 Shift+Ctrl+Up/Down 就能够移动选中行的代码上下移动。其余编辑都有的通常的快捷键天然也都有。

不过最强大的是，这些功能均可以利用插件实现，好比Emmet也就是大名鼎鼎的Zencoding的继任者就能够经过插件指定一个命令并分配一个快捷键来实现。我还喜欢使用Markdown preview，好比如今我就能够经过它预览一下博客的大体效果。还有刚刚提到的针对每种语言的颜色高亮方案也是插件的形式。还有一款老牌版本控制的工具Tortoise，由于公司还在用SVN这种老古董，Tortoise天然成了不二选择。还有不少插件，能够从官方网站搜索。 https://sublime.wbond.net/search/

说到插件，天然少不了管理它的工具，SublimeText的管理工具是Package Control，原来的安装十分麻烦，不过如今官方给出了方法。使用 Ctrl+~ 打开控制台，而后复制这里官方给出的代码到控制台并执行，Package Control就安装好了。以后使用 Ctrl+Shift+P 调出命令面板后就会有一组Package Control的命令，主要会用到 install 和 remove 两个用于安装和卸载插件。

关于用户配置，有不少内容，能够参考 Settings - Default 。好比这样：

{
    "caret_style": "phase",
    "font_size": 16.0,
    "overlay_scroll_bars": "enabled",
    "save_on_focus_lost": true,
    "scroll_past_end": false,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "word_wrap": true,
    "wrap_width": 80
}

这些配置看到名字就基本能够猜出意思了，主要是wrap_width就是每行的字符数，设置到80，这样能够保持代码的简短，避免长语句。而translate_tabs_to_spaces就是用空格代替制表符。

Chrome

我始终喜欢Chrome多过Firefox，由于Chrome的启动速度比Firefox快上许多，Firefox原先有点过于臃肿了，不按标准的地方也很多，虽而后来在Google注资以后，不但版本号追了上来，功能也提高不少。不过Chrome还是我开发的主要环境，Firefox通常仅做为研究和测试之用。

Chrome的开发者工具界面很是清爽，不管是在Elements中的HTML仍是Sources中的Js，代码阅读和编辑都很是方便，并且在Element中能够修改和添加对应元素的CSS代码，而在Sources中能够直接修改CSS文件。Resources中列出了全部加载的文件，还有session、cookie和本地存储之类的缓存信息，能够方便的对其进行操做。而Network则列出了全部请求，以及相关的信息，甚至能够点击下面的圆点按钮 preserve log upon Navigation 进行请求响应时间的监视。在Timeline中还有更详细的时间监视，包括事件、加载以及内存的使用情况，能够方便的对程序的性能进行调试。在Profiles中能够对Js、CSS、DOM进行统计。还有Audits能够对网站性能和网络性能进行统计。

最重要的是Console，在这里能够直接写入Javascript代码进行调试，还能够收集到程序中输出的各类信息和报错。不过最特别的是它是有API的可编程。通常经常使用到 log 方法，像下面的代码这样来输出一些变量，固然还有不一样的类型，好比 error 方法、 warn 方法。它们的参数也很自由，多个参数将会被空格链接输出，还能够在第一个参数中使用占位符来按类型加入后面的参数。

console.log('hello ' + world);
console.error('Error:', 'nothing...');
console.warn('Warn: %s < %d', 'age', 18);

除了上面三个方法以及相似log的 info 和 debug 方法还有一个特别的方法，那就是断言 assert 方法，它能够判断条件，在false时报错，通常用于测试。

另外还有三个关于时间的方法， time ， timeEnd 和 timeStamp 。time和timeEnd配合使用能够记录程序运行的时间并输出，而timeStamp能够在Timeline的统计中标出一个时间点。

Chrome的插件也很是的多，这里介绍三款和页面密切相关的工具。

Visual Event 是一个捕获页面事件的插件，它会将页面全部绑定的事件所有以可视化的方式呈现出来，而且能够点击查看某个元素的事件详细信息。我常常用来检查事件是否正确的绑定到了目标元素上。

Edit This Cookie 顾名思义，用来编辑Cookie的，虽然DevTools也带有这样的功能，可是它更加便利，还能够导出导入，随意修改每一个Cookie中的任意条目。虽然它很强大，不过好像利用率最高的功能是一键清空Cookie。

Code Cola 能够用来修改CSS，与DevTools不一样的是，它的操做是左右滑动滑块，并且主要针对CSS3的空间样式，能够快速将元素变成各类角度各类尺寸。

不过Chrome仍是有弱点的，当tab开的太多时会很是卡，由于Chrome每一个tab都是一个单独的进程。因此还有一个插件也是颇有用的，虽然和开发没有太大关系，One Tab 能够把当前的全部tab都集合起来变成一个页面，当须要打开时在点击连接便可，这样有效防止了过多tab形成的内存不足问题。

---

个人前端开发工做流 系列文章：

• 环境篇
• 自动化篇
• 工具篇
• 代码管理篇

原文博客http://www.tychio.net/tech/2013/09/25/improve-workflow.html