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

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

瀏覽器端:

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

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

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

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

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

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

Livereload：http://livereload.com/
Sublime快捷方法的應(yīng)用

?1.自動(dòng)完成

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

?2.多列編輯

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

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

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

5.Ctrl+Shift+' 可以選擇一對(duì)標(biāo)簽

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

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

8.跳轉(zhuǎn)

Ctrl+p會(huì)列出當(dāng)前文件，輸入文件名然后Enter跳轉(zhuǎn)到該文件

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/cheryshi/p/7603339.html

總結(jié)

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

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