每次我在其他視頻網站上看學習視頻的時候，看著老師用的編輯器高大上檔次，而我一般用Notepad，和Dreamweaver去編輯網頁，需要每一行代碼，打進去，效率低。
最近看到sublime編輯器，在網上搜了一下說是最受歡迎的，就毫不猶豫的下載下來，初試牛刀一下下，把我搜索的功能和與前端瀏覽器交互的插件簡答介紹一下。
前端實時可視化開發工具：LiveStyle

支持樣式文件的修改，也可以在瀏覽器端編輯樣式代碼，會自動更新到你的樣式表中。

瀏覽器端:

下載一個chrome瀏覽器，在 chrome網上應用店搜索LiveStyle添加至chrome。
可能會讓你下載一個LiveStyle App，如果需要就下載，用的時候啟動App就可以

Sublime端：
1.sublime官網下載地址：https://www.sublimetext.com/3
下載好了打開軟件，點擊Tool》command palette...>>pc.. 或者按Ctrl+shift+p，選擇Install Package

等待一會，在彈出的install package輸入框中輸入livestyle並回車，等待幾秒鐘；就安裝好了。

重啟sublime，打開瀏覽器端的livestyle按鈕就可以實現css可視化開發啦！

還有兩種插件：browsersync，安裝比較簡單，可以實現任何文件的修改，只能在代碼段修改，需要node.js配合使用，實現局部的刷新，對手機平板的實時交互效果很好。
browsersync：

Livereload不僅支持樣式，也支持所有文件的修改，只能在代碼段修改，瀏覽器可以即時呈現。

Livereload：http://livereload.com/
Sublime快捷方法的應用

1.自動完成

自動完成的快捷鍵是Tab，如果在html文件中輸入cl按tab或自動補全為class=“”；

2.多列編輯

按住Ctrl點擊鼠標出現多個閃爍的光標可以同時修改多處，或者按住鼠標中間滑輪那個鍵拖拽選擇多列。

3.代碼註釋功能：Ctrl+/,Ctrl+shift+/分別末行註釋和塊註釋，再按一下就能取消，它可以識別html、css、js不同的文件

4.輸入div.box>div.header+div.main+div.footer,並按下tab鍵會有神奇的代碼段生成。

5.Ctrl+Shift+‘ 可以選擇一對標簽

6.Ctrl+D選擇當前光標所在的詞並高亮顯示，再次點擊出現下一個位置

7.Alt+R切換到正則匹配模式的搜索框，多文件搜索Ctrl+Shift+F

8.跳轉

Ctrl+p會列出當前文件，輸入文件名然後Enter跳轉到該文件

Ctrl+G然後輸入行號，回調到指定的那一行
9.打開多窗口編輯
編輯代碼時，有時候會有好多頁面關聯，可以分屏。Alt+Shift+2進行左右分屏，Alt+Shift+8進行上下分屏；分屏之後，使用Ctrl+數字跳到指定屏，使用Ctrl+Shift+數字鍵將當前屏移動到指定屏

Sublime Text 3 初試牛刀