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

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

瀏覽器端:

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

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

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

重啟sublime，打開瀏覽器端的livestyle按鈕就可以實現(xiàn)css可視化開發(fā)啦！

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

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

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

?1.自動完成

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

?2.多列編輯

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

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

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

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

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

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

8.跳轉

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

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

?

轉載于:https://www.cnblogs.com/cheryshi/p/7603339.html

總結

以上是生活随笔為你收集整理的Sublime Text 3 初试牛刀的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。