個人前端開發工做流 - 工具篇

開發工具

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