Sublime Text 3 初試牛刀

每次我在其餘視頻網站上看學習視頻的時候,看着老師用的編輯器高大上檔次,而我通常用Notepad,和Dreamweaver去編輯網頁,須要每一行代碼,打進去,效率低。
最近看到sublime編輯器,在網上搜了一下說是最受歡迎的,就堅決果斷的下載下來,初試牛刀一下下,把我搜索的功能和與前端瀏覽器交互的插件簡答介紹一下。
前端實時可視化開發工具:LiveStylecss

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

瀏覽器端:前端

下載一個chrome瀏覽器,在 chrome網上應用店搜索LiveStyle添加至chrome。
可能會讓你下載一個LiveStyle App,若是須要就下載,用的時候啓動App就能夠node

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

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

重啓sublime,打開瀏覽器端的livestyle按鈕就能夠實現css可視化開發啦!瀏覽器

還有兩種插件:browsersync,安裝比較簡單,能夠實現任何文件的修改,只能在代碼段修改,須要node.js配合使用,實現局部的刷新,對手機平板的實時交互效果很好。
browsersync:https://browsersync.io/編輯器

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+數字鍵將當前屏移動到指定屏

相關文章
相關標籤/搜索