我的前端开发工作流 - 工具篇

开发工具

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