Sublime Text 你所不知道的12個祕密

時間 2019-11-05

標籤 sublime text 所不知道祕密欄目 HTML 简体版

原文原文鏈接

轉載：請寫明掘金原文連接及做者名 '小小小'
第250名入羣者，獎書一本 QQ羣：139128168 ← 點擊加羣

package control安裝：javascript

第一種方法是在控制檯中複製粘貼代碼按回車，sublime.wbond.NET/installatio…
第二種辦法下載pc文件，百度一下不少方案，這裏不詳說了php

emmet安裝：css

一、按Ctrl+Shift+P命令板
二、輸入PCIC，回車進入Package Control：install
三、輸入Emmet和Emmet Css
四、安裝完畢之後，C+E就能夠快速生成代碼了html

emmet的語法：java

一、輸入「!」或「html:5」，而後按Tab鍵：

html:5 或!：用於HTML5文檔類型git

html:xt：用於XHTML過渡文檔類型github

html:4s：用於HTML4嚴格文檔類型web

二、輕鬆添加類、id、文本和屬性

p#foo 補充ID
p.foo 補充類
h1{foo} 和 a[href=#] 爲h1和a標籤 segmentfault

三、嵌套

>：子元素符號，表示嵌套的元素sublime-text

+：同級標籤符號

^：可使該符號前的標籤提高一行

效果以下圖所示：

四、分組

(.foo>h1)+(.bar>h2)

生成：

<div class="foo">  
        <h1></h1>  
    </div>  
    <div class="bar">  
       <h2></h2>  
    </div>複製代碼

五、定義多個元素 *

ul>li*3

六、定義多個帶屬性的元素

ul>li.item$*3　　$表明尾數不一樣一、二、3

七、Css快捷

1）w100 =》 width: 100px;

2）p 表示%

e 表示 em    
  x 表示 ex複製代碼

h10p+m5e　=》 height: 10%;　margin: 5em;

3）@f

@font-face {
font-family:;
src:url();
}

4）模糊匹配

ov:h、ov-h、ovh和oh

5）供應商前綴

若是輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，好比輸入trs，則會生成：

-webkit-transform: ;  
-moz-transform: ;  
-ms-transform: ;  
-o-transform: ;  
transform: ;複製代碼

你也能夠在任意屬性前加上「-」符號，也能夠爲該屬性加上前綴。好比輸入-super-foo：

-webkit-super-foo: ;  
-moz-super-foo: ;  
-ms-super-foo: ;  
-o-super-foo: ;  
super-foo: ;複製代碼

若是不但願加上全部前綴，可使用縮寫來指定，好比-wm-trf表示只加上-webkit和-moz前綴：

-webkit-transform: ;  
-moz-transform: ;  
transform: ;複製代碼

前綴縮寫以下：

w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-

6）漸變

輸入lg(left, #fff 50%, #000)

7）其餘參考

devework.com/emmets-css.…
www.douban.com/note/299285…

八、js代碼提示

1）c+s+p
2）pcic
3）輸入sublimeCodeIntel

九、sublime中安裝編譯sass

雖然PostCSS纔是將來，可是Sass成熟穩定，擁有一大波忠實的使用者，及開源項目，且最近Bootstrap 4 alpha也從Less轉到Sass了。因此瞭解Sass仍是很是有必要的。

基於快速開發及效率，我開發環節習慣經過編輯器插件來完成Less/Sass編譯，這樣能夠快速定位、修復Bug。

下面介紹一款Sublime Text的插件SASS build system for Sublime Text 2能夠在編輯器完成Sass編譯。名字是2但Sublime Text 3可用無壓力。

安裝Sass
首先要安裝Ruby和Sass，詳細可參考：www.w3cplus.com/sassguide/i… 或者網上大把教程，安裝Sass的時候可能被牆不必定安裝得上，因此能夠退而求其次安裝測試本版--pre。

Sublime Text安裝Sass Build插件
1）安裝 Package Control Plugin

打開：View > Show Console

輸入：

Sublime Text2

import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')複製代碼

Sublime Text3

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)複製代碼

詳見：packagecontrol.io/installatio…

2）安裝 Package Control Plugin

Ctrl+Shift+P (Linux/Windows) 或 Command+Shift+P (OS X)，而後輸入'install'會看到Package Control: Install Package並選擇。

等待列表出來，輸入Sass會看到SASS Build System選擇安裝。

安裝完成後，Ctrl+B (Linux/Windows) or Command+B (OS X)可編譯Sass爲CSS，還會有一個.map文件。

更多詳細見官方：github.com/jaumefontal…

十、安裝多行註釋插件

使用package control安裝DocBlockr。安裝完成後使用方法以下：

A、先寫完你的函數

function testFunction(a, b, c) {

}複製代碼

B、而後在函數的前面一行，輸入

/**複製代碼

C、而後回車，自動生成

/** * [testFunction description] * @param {[type]} a [description] * @param {[type]} b [description] * @param {[type]} c [description] * @return {[type]} [description] */
function testFunction(a, b, c) {

}複製代碼

12個小祕密

1) 選擇

如下是一些Sublime Text選擇文本的快捷鍵：

Command + D 選中一個單詞
Command + L 選中一行
Command + A 全選
Ctrl + Command + M` 選中括號內全部內容 (編寫CSS或JS時很是實用)

Sublime Text還支持一次選中多行的操做：Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

Command 按住Command鍵再點擊想選中的行
Command + Ctrl + G (選中部分文本時) 按此鍵選中全部相同文本
Command + D (選中部分文本時) 直接選中下一次出現的該文本

2) CSS排序

CSS屬性的順序通常不重要，由於不管何種順序瀏覽器都能正確渲染。但排序全部的屬性仍是有助於代碼的整潔。在Sublime Text中，選中CSS屬性後按F5就能夠按字母順序排序。

也可使用 CSSComb 等第三方插件，更詳細的控制排序的方法。

3) 命令面板（Command Palette）

使用命令面板能夠快速完成多重任務。按Command + Shift + P調出面板，鍵入須要的命令便可。看如下的幾個示例：

▼ 重命名文件

▼ 設置文件爲HTML語法

▼ 插入代碼片斷

4) 切換標籤頁與工程

在同時打開多個標籤頁時，能夠用如下的熱鍵切換：

Command + T 列出全部的標籤頁
Command + Shift + ] 下一標籤頁
Command + Shift + [ 上一標籤頁
Command + Ctrl + P 切換側邊欄顯示的工程

5) 跨文件編輯

同一個編輯操做能夠在多個文件中同時重複。舉個例子，多個文件中有同一段代碼時，可用如下的步驟快速編輯：

按Command + Shift + F在Find框中輸入待查找的代碼。可按Command + E快速使用選擇中的代碼段。
在Where框中指定須要查找的文件範圍，或填寫表示查找目前打開的文件。
在Replace框中輸入要替換成的代碼，按Replace按鈕批量替換。

6) 文件爬蟲

按Command + R能夠列出文檔中全部的CSS選擇器。能夠選擇並馬上跳轉查看。這個操做比使用通常的「查找」功能快得多。

7) 拼寫檢查

若是你常用Sublime Text從事英文創做，那麼啓用拼寫檢查就很是有用處了。選擇Preferences > Settings – User菜單，添加如下代碼：

"spell_check": true,複製代碼

8) 加強側邊欄

SideBarEnhancements插件有效地改進了Sublime的側邊欄。安裝插件後在側邊欄上點擊右鍵，能夠找到一下新功能：在資源管理器中打開、新建文件、新建文件夾、以…打開、在瀏覽器中打開。

注：在瀏覽器中打開的熱鍵是F12。

9) 更換主題

Sublime Text的外觀主題能夠更換。Soda Theme就是一個不錯的主題，能夠在包管理器中安裝。

若是要安裝的主題並不在在線軟件倉庫中，也能夠手動安裝：

下載並解壓縮主題包
點擊菜單 Preferences > Browse Packages…
把主題文件夾複製到Packages文件夾中.
點擊菜單 Preferences > Settings – Users 並加入如下代碼："theme": "Soda Light.sublime-theme"

10) 更換Sublime Text程序圖標

不只主題能夠更換，圖標也能夠。在Dribbble上有大量從新設計的Sublime Text精美圖標。更換方法：

下載一個圖標，有.icns格式的最好。若是沒有，用iConvert轉換之。
終端執行：open /Applications/Sublime\ Text.app/Contents/Resources/
替換Sublime Text 3.icns或Sublime Text 2.icns文件。

11) 同步選項

若是在多臺計算機上工做，同步選項設置應該是一個好主意。咱們借用Dropbox完成這一任務。

首先在終端中運行如下命令上傳設置文件：

mkdir $HOME/Dropbox/sublime-text-3/  
mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"  
mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"複製代碼

而後在全部須要同步的計算機上運行如下命令下載設置：

DSTPATH="$HOME/Library/Application Support/Sublime Text 3"  
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"  
rm -rf "$DSTPATH/Installed Packages"  
rm -rf "$DSTPATH/Packages"  
mkdir -p "$DSTPATH"  
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"  
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"複製代碼

12) 可點擊的URL

使用小插件ClickableURLs可讓文件中的URL可以點擊。

Sublime常見操做

多光標操做：只要按下Cmd（Windows系統下Ctrl）鍵，再用鼠標選擇不一樣的行，你就能夠同時編輯多行代碼。
從新打開關閉的標籤：和Chrome瀏覽器同樣，若是你不當心關閉了一個頁面，你只要按下Shift+Cmd+T（Windows下按住Shift+Ctrl+T）就能夠從新打開該頁面。若是你連續按這樣的組合鍵，你就能夠按照關閉的順序從新打開它們。
快速打開文件：這多是Sublime Text裏我最喜歡的功能。按住Cmd+T（Wiondows系統下按住Ctrl+T）就會打開一個文本框，你能夠在文本框內鍵入想打開的目標文件，系統就會在項目中搜索該文件的位置，這樣你就能夠再也不用文件目錄列表。
跳轉到符號：若是你想快速跳到某個特定的符號，就按下Cmd+P（Windows系統下按住Ctrl+P）打開搜索框，鍵入目標符號，回車後就能夠跳轉至那個符號。
在整個項目文檔中搜索：按住Shift+Cmd+F（Windows系統下按住Shift+Ctrl+F），在整個Sublime Text項目下搜索。
在文字或行間跳轉：這更多的是操做系統的特色，但我是在使用Sublime Text過程當中才發現的。在Mac上，若是你按住Alt鍵的同時使用方向鍵，那麼可以實現單詞而不是字符間的跳轉。一樣的，若是你按住Cmd鍵的同時使用方向鍵，就會跳轉到這行的另外一端。這很是適合在不用鼠標的狀況下，快速在代碼中定位。
快速更改設置：按住Shift+Cmd+P（Windows系統下按住Shift+Ctrl+P），能夠快速啓動查找，對Sublime Text的設置進行修改。

下面還有一些在看過黑客新聞評論後的補充：

在詞間跳轉：按住Ctrl鍵，讓光標在詞間移動，這個是對駝峯式敏感的。假設目前光標位於「cakeParty」的詞首，那麼按住Ctrl，再按右方向鍵，就能夠將光標移動到」e」和」P」之間。
當前行上移或下移：能夠按下Ctrl+Cmd+Up/Down組合鍵，實現上移或下移當前行。
Sublime Package Control：對主題、語法檢查、代碼校驗等的安裝很是有用。
快速文字編輯：按下Cmd+d選擇當前文字，再次點擊Cmd+d對所選文字進行編輯。它會方便重命名局部變量或是HTML標籤。
選中全部實例：按住cmd+Ctrl+G選中全部實例。
跳轉到指定行：按下Ctrl+G，而後輸入行號便可。
複製當前行：按住Cmd/Ctrl+Shift+D，複製當前行。
還有一些常見操做能夠點擊連接，很是給力哦：
www.lupaworld.com/article-248…

快捷鍵彙總

選擇類

Ctrl+D 選中光標所佔的文本，繼續操做則會選中下一個相同的文本。
Alt+F3 選中文本按下快捷鍵，便可一次性選擇所有的相同文本進行同時編輯。舉個栗子：快速選中並更改全部相同的變量名、函數名等。
Ctrl+L 選中整行，繼續操做則繼續選擇下一行，效果和 Shift+↓ 效果同樣。
Ctrl+Shift+L 先選中多行，再按下快捷鍵，會在每行行尾插入光標，便可同時編輯這些行。
Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內裏的內容。
Ctrl+M 光標移動至括號內結束或開始的位置。
Ctrl+Enter 在下一行插入新行。舉個栗子：即便光標不在行尾，也能快速向下插入一行。
Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即便光標不在行首，也能快速向上插入一行。
Ctrl+Shift+[ 選中代碼，按下快捷鍵，摺疊代碼。
Ctrl+Shift+] 選中代碼，按下快捷鍵，展開代碼。
Ctrl+K+0 展開全部摺疊代碼。
Ctrl+← 向左單位性地移動光標，快速移動光標。
Ctrl+→ 向右單位性地移動光標，快速移動光標。
shift+↑ 向上選中多行。
shift+↓ 向下選中多行。
Shift+← 向左選中文本。
Shift+→ 向右選中文本。
Ctrl+Shift+← 向左單位性地選中文本。
Ctrl+Shift+→ 向右單位性地選中文本。
Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行以前）。
Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行以後）。
Ctrl+Alt+↑ 向上添加多行光標，可同時編輯多行。
Ctrl+Alt+↓ 向下添加多行光標，可同時編輯多行。

編輯類

Ctrl+J 合併選中的多行代碼爲一行。舉個栗子：將多行格式的CSS屬性合併爲一行。
Ctrl+Shift+D 複製光標所在整行，插入到下一行。
Tab 向右縮進。
Shift+Tab 向左縮進。
Ctrl+K+K 從光標處開始刪除代碼至行尾。
Ctrl+Shift+K 刪除整行。
Ctrl+/ 註釋單行。
Ctrl+Shift+/ 註釋多行。
Ctrl+K+U 轉換大寫。
Ctrl+K+L 轉換小寫。
Ctrl+Z 撤銷。
Ctrl+Y 恢復撤銷。
Ctrl+U 軟撤銷，感受和 Gtrl+Z 同樣。
Ctrl+F2 設置書籤
Ctrl+T 左右字母互換。
F6 單詞檢測拼寫

搜索類

Ctrl+F 打開底部搜索框，查找關鍵字。
Ctrl+shift+F 在文件夾內查找，與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找，略高端，未研究。
Ctrl+P 打開搜索框。舉個栗子：一、輸入當前項目中的文件名，快速搜索文件，二、輸入@和關鍵字，查找文件中函數名，三、輸入：和數字，跳轉到文件中該行代碼，四、輸入#和關鍵字，查找變量名。
Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位。
Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數。
Ctrl+：打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等。
Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件。
Esc 退出光標多行選擇，退出搜索框，命令框等。

顯示類