sublime3 常用功能總結


介紹幾個常見的功能:

l 自動完成:自動完成的快捷鍵是Tab和Enter,如果在html文件中,輸入cl按下tab或Enter,即可自動補全為class=””;加上zencoding后,更是如虎添翼,后面再講到。

l 多列編輯:按住ctrl點擊鼠標,會出現多個閃爍的光標,這時可同時修改多處

 

或者按住鼠標中鍵拖拽,

 

l 代碼注釋功能:ctrl+/、ctrl+shift+/分別未行注釋和塊注釋,再按一下就能去掉注釋,ST3能夠自動識別是html、css還是js文件,給出不同類型的注釋。

l 行操作:ctrl+alt+↑、ctrl+alt+↓向上或者向下交換兩行,ctrl+enter,光標后插入空行,ctrl+d選擇相似,可以參考后面的快捷鍵列表。

l 右鍵功能:

 

前3個,大家都知道,第4個,show unsaved changes,顯示未保存的修改,紅色減號表示刪去的內容,綠色加號表示新增的內容

 

Open Containing Folder…,打開包含此文件的文件夾,這個很方便找到相關的文件。

Copy File Path,復制文件路徑,方便我們復制路徑到瀏覽器中查看。

l 人性化設計:從ST2開始就有很多設計細節還是值得稱贊的,比如點擊一個標簽或者括弧,會在起始處顯示下划點線,方便看清代碼結構,每一層嵌套代碼間都有豎線,起到視覺輔助的作用。選中某個詞還會給其他地方相同的詞加上方框。另外還有代碼折疊功能。

三、 設置

  ST3的設置只有兩個選項,分別是系統設置和快捷鍵設置。

 

一般我們修改設置的話,最好復制出來在user里修改,以免以后升級default被覆蓋掉。

l Settings:在此文件里,可以修改很多東西,比如主題,字體,字號,是否顯示行號、自動縮進、自動完成。很多都默認選中了,我另外修改了幾處地方:

always_show_minimap_viewport——默認顯示縮略圖

draw_minimap_border——顯示縮略圖邊框

font_size——字號

l Key Bindings:快捷鍵設置,ST3的快捷鍵很多,改的時候注意不要覆蓋了。因為快捷鍵眾多,所以有下面這種組合快捷鍵,先按下ctrl+k,松開k,再按下j就可以展開全部折疊代碼了。

l 主要快捷鍵列表 Ctrl+L 選擇整行(按住-繼續選擇下行) Ctrl+KK 從光標處刪除至行尾 Ctrl+Shift+K 刪除整行 Ctrl+Shift+D 復制光標所在整行,插入在該行之前 Ctrl+J 合並行(已選擇需要合並的多行時) Ctrl+KU 改為大寫 Ctrl+KL 改為小寫 Ctrl+D 選詞 (按住-繼續選擇下個相同的字符串) Ctrl+M 光標移動至括號內開始或結束的位置 Ctrl+Shift+M 選擇括號內的內容(按住-繼續選擇父括號) Ctrl+/ 注釋整行(如已選擇內容,同“Ctrl+Shift+/”效果) Ctrl+Shift+/ 注釋已選擇內容 Ctrl+Z 撤銷 Ctrl+Y 恢復撤銷 Ctrl+M 光標跳至對應的括號 Alt+. 閉合當前標簽 Ctrl+Shift+A 選擇光標位置父標簽對兒 Ctrl+Shift+[ 折疊代碼 Ctrl+Shift+] 展開代碼 Ctrl+KT 折疊屬性 Ctrl+K0 展開所有 Ctrl+U 軟撤銷 Ctrl+T 詞互換 Tab 縮進 自動完成 Shift+Tab 去除縮進 Ctrl+Shift+↑ 與上行互換 Ctrl+Shift+↓ 與下行互換 Ctrl+K Backspace 從光標處刪除至行首 Ctrl+Enter 光標后插入行 Ctrl+Shift+Enter 光標前插入行 Ctrl+F2 設置書簽 F2 下一個書簽 Shift+F2 上一個書簽

四、 擴展

  ST3是支持插件擴展的,首先,我們需要安裝Package Control,我會另外發文章介紹。

插件推薦(由於ST3使用python3語言開發,而目前大部分插件還是python2.x,所以暫時有些插件會用不了或會有所改變,請等待更新):

l ZenCoding:前端必備,快速開發HTML/CSS,現已更名為Emmet。

 

輸入 div.wrapper>div.header+div.main+div.footer 按下Tab,立刻變成

 

或者按下ctrl+alt+enter,激發zencoding控制台,可看到整個動態的過程。

 

l JsFormat,格式化js代碼,這個插件很有用,我們有時在網上看到某些效果,想查看是怎么實現的,但是代碼被壓縮過,很難閱讀,不用怕,用ST3打開,按下快捷鍵,即可讓代碼還原,莫非是武林中失傳已久的“還我靚靚拳”。

 

 

l Tag 格式化標簽,讓亂七八糟的代碼,瞬間整齊清晰。

l BracketHighlighter,括弧高亮顯示。

l Clipboard History,剪切板歷史,可以保存多個復制信息,按下ctrl+alt+v,可以選擇歷史剪切板。

 

l Goto-CSS-Declaration,跳轉到css文件該class的聲明處,方便修改查看,如圖下所示,注意對應的css文件要同時打開才行。

 

l SCSS,支持scss的語法高亮,里面附帶了好多CSS Snippet,無論現用或者改造成,都可節省不少時間。

 

還有很多插件,jquery語法提示,jsHint等等。

http://ce.sysu.edu.cn/hope/Item.aspx?id=106853

 

http://www.ladyloveit.com/sublime/developers-commonly-used-10-sublime-text-plugin/

開發人員常用的10個Sublime Text插件

Sublime是一個新興的文本編輯器,它的輕巧和功能強大已經吸引了大批的程序員,目前它還是beta版本,但它的社區和插件的開發都非常活躍。它還有插件提供VIM的支持,連我這么多年的VI死忠粉都開始倒戈。但沒有最好,只有更好,期待Sublime持續的開發給我們帶來新的驚喜。

這個列表列出了十個插件,推薦給開發人員。

10. Package control

Package control是必裝插件,所有其他的插件和主題都可以通過它來安裝。希望它能出現在正式版默認包中。

首先參照下面的教程來安裝Package Control:

9. Bracket Highlighter

用於匹配括號,引號和html標簽。對於很長的代碼很有用。安裝好之后,不需要設置插件會自動生效。

Bracket Highlighter

8. DocBlockr

DocBlockr可以自動生成PHPDoc風格的注釋。它支持的語言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++。

使用方法

DocBlockr

按下Enter或者Tab鍵,代碼自動變成

DocBlockr

7. SideBar Enhancements

這個插件改進了側邊欄,增加了許多功能:將文件移入回收站,在瀏覽器中瀏覽,將文件復制到剪切板。

SideBar Enhancements

6. Prefixr

由於CSS3和HTML5的W3C規范都尚未統一,各大瀏覽器對標准的支持還是有差異的。所以在編寫CSS3代碼還需要針對不同的瀏覽器寫一堆的CSS3代碼前綴。Prefixr插件能將CSS3代碼自動生成跨瀏覽器CSS代碼。

使用方法

1
2
3
4
.box {
    border-radius: 10px ;
    box-shadow: 0 0 5px rgba( 0 , 0 , 0 ,. 4 );
}

按下control + command + X(Mac)或者 ctrl + Alt + X(Windows),會轉換成:

1
2
3
4
5
6
7
8
9
.box {
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
    border-radius: 10px ;
  
    -webkit-box-shadow: 0 0 5px rgba( 0 , 0 , 0 ,. 4 );
    -moz-box-shadow: 0 0 5px rgba( 0 , 0 , 0 ,. 4 );
    box-shadow: 0 0 5px rgba( 0 , 0 , 0 ,. 4 );
}

5. Emmet(Zen Coding)

大名鼎鼎的Zen Coding改名作Emmet啦,Zen Coding的Sublime Text 2插件也不再更新,現在整個項目搬到了Emmet了。僅僅需要一行代碼就能快速生成html代碼。

1
ul#nav>li.item$*4>a{Item $}

你只需要按下control + E,代碼就會自動展開成:

1
2
3
4
5
6
< ul id = "nav" >
     < li class = "item1" >< a href = "" >Item 1</ a ></ li >
     < li class = "item2" >< a href = "" >Item 2</ a ></ li >
     < li class = "item3" >< a href = "" >Item 3</ a ></ li >
     < li class = "item4" >< a href = "" >Item 4</ a ></ li >
</ ul >

 

還沒試過的童鞋一定要試一下,體驗一下Emmet的神奇功能吧。

4. Git

Git是我最喜歡的版本控制系統,如果你每天要使用Git,那這個插件對你來說必不可少了。

使用Package Control下載后,你只需要調出命令面板,輸入Git,便能找到所有常用的功能。

Git

3. JSLint

JSLint是一個Javascript代碼質量檢測工具。它可以告訴你代碼的什么地方需要改進。雖然你也可以在網上檢測,但這個插件能讓你不打開瀏覽器,直接在Sublime里面檢測。

使用方法

按下Shift + Command + P(Mac)或是Shift + Ctrl + P(Windows)調出命令面板,找到JSLint: Run JSLint,按下Enter,JSLint會輸出結果到狀態欄。

Git

2. Sublime Linter

這個插件幫你找到代碼中的錯誤。它支持很多語言:PHP, Python, Java, CoffeScript, CSS, HTML, JavaScript, Perl, PHP, Python, Ruby, XML等。Javascript需要安裝Node.js引擎,其他配置詳見項目主頁。強烈推薦安裝。

SublimeLinter

1. Sublime CodeIntel

Sublime CodeIntel是我最喜歡的插件,它提供了很多IDE提供的功能,例如代碼自動補齊,快速跳轉到變量定義,在狀態欄顯示函數快捷信息等。

它支持的語言有:PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.

雖然有時候有點小問題,但真的能節省很多時間。強烈推薦安裝。

SublimeCodeIntel

0. Dayle Rees顏色主題

盡管Sublime自帶的顏色主題已經夠棒了,但也有審美疲勞的一天,這時,你可以下載Dayle Rees主題,有多款主題可選。

Dayle Rees主題


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM