學(xué)習(xí)課程地址：快樂(lè)的sublime編輯器_sublime編輯器使用

另可參考筆記地址：

http://c.haoduoshipin.com/happysublime/

http://blog.csdn.net/u014465934/article/details/72810763

PS：博主的一些文章地址：http://happypeter.github.io/

github：https://github.com/happypeter/sublime-config

1 sublime的幾個(gè)優(yōu)點(diǎn)

1.操作簡(jiǎn)單上手快

2.支持多點(diǎn)編輯：ctrl + 光標(biāo)

3.基于Package Control強(qiáng)大的包管理功能

4.閃電一樣的查找速度。打開(kāi)一個(gè)大項(xiàng)目，鼠標(biāo)右擊進(jìn)行全局查找。即使純文本界面的 vim 都無(wú)法達(dá)到這樣的速度。

5.深度可定制。所有的配置內(nèi)容也都像 vim 一樣以純文本的形式保存在一個(gè)類(lèi)似于 .vim 的目錄之中。透明和分享帶來(lái)的好處無(wú)限。

6.快速打開(kāi)文件：ctrl + p

7.命令行面板：ctrl + shift + p

8.可啟用vim模式

9.已經(jīng)形成事實(shí)標(biāo)準(zhǔn)，很多其他的編輯器中都可以使用類(lèi)似的快捷鍵。例如 github 的 atom ，atom 是開(kāi)源和免費(fèi)的。

10.sublime社區(qū)活躍

打開(kāi)命令面板，可查找快鍵鍵，輸入keybin，打開(kāi)第一項(xiàng)能找到所有的快捷鍵合集，如下所示

2 sublime安裝

安裝可到官網(wǎng)上安裝，也可到如下地址安裝（包含激活碼）：https://pan.baidu.com/s/1nv6Lzsd

3 一些常用的快捷鍵

Ctrl+ n：打開(kāi)新頁(yè)面

Ctrl+ tab：頁(yè)面跳轉(zhuǎn)

Ctrl+ j：合并兩行

Ctrl+ l：選擇當(dāng)前行

shift + 鼠標(biāo)右鍵：塊選擇

Ctrl + `（1左邊）：快速喚起console面板

Ctrl + Shift + p：調(diào)出packagecontrol面板

Ctrl + Shift + 上/下 鍵：可以整體移動(dòng)一行代碼

Ctrl + Shift +V ：進(jìn)行自適應(yīng)縮進(jìn)的黏貼

Tab鍵：自動(dòng)補(bǔ)全代碼

Ctrl + K + B 隱藏/顯示左面Side Bar

C + enter 快速下啟一行?

Ctrl + enter 快速下啟一行

Ctrl + shift + enter 快速上起一行

Ctrl + [ 向前兩個(gè)字節(jié) Ctrl + ]向后兩個(gè)字節(jié)

Ctrl + 左/右 一下子是跳一個(gè)單詞

左側(cè)顯示目錄樹(shù)：View ->Side Bar ->Show Side Bar[直接加載你的目錄文件也可以]

自定義快捷鍵，進(jìn)入如下界面：

那么應(yīng)該如何知道命令的正確名稱(chēng)？

打開(kāi)工作臺(tái)，輸入sublime.log_commands(True)回車(chē)執(zhí)行，再打開(kāi)面板執(zhí)行相應(yīng)的操作，從返回的結(jié)果中可看到精確的命令名和相關(guān)的參數(shù)。

4 sublime自定制

打開(kāi)命令行窗口，輸入settings，有兩項(xiàng)：Default 和 User。Default 中的內(nèi)容是不許改的，可在user中輸入一些配置，該文件保存的位置為Packages->User->Preferences.sublime-settings，可通過(guò)Preferences->Browse Packages->User查看。

存放到 User 文件夾下的內(nèi)容會(huì)覆蓋 Settings Default 中的內(nèi)容。

自定制的設(shè)置直接放到 User/Preferences.sublime-settings 這個(gè)文件中，那么就是對(duì)所有打開(kāi)的項(xiàng)目都生效了。但是，這些設(shè)置有時(shí)候?qū)τ诓煌捻?xiàng)目是會(huì)有區(qū)別的，sublime 是有相應(yīng)的解決方法的，就是可以通過(guò)設(shè)置 Projects 來(lái)實(shí)現(xiàn)。如果覺(jué)得英文看得不順也可以參考 這里。基本思路就是給每個(gè)項(xiàng)目添加 xxx.sublime-project 文件，里面的配置會(huì)把 User/ 中的設(shè)置給覆蓋了。不過(guò)這樣還是稍微有些麻煩，除非特別必要，自己手動(dòng)臨時(shí)改改 User/ 中的這個(gè) settings 文件就好。

5 用Package Control來(lái)安裝擴(kuò)展包

進(jìn)入https://packagecontrol.io/installation，復(fù)制installation頁(yè)面里面的Python代碼，在工作臺(tái)中運(yùn)行。

打開(kāi)命令面板，輸入install出現(xiàn)如下界面：

選中第一個(gè)，出現(xiàn)所有包的列表

6 主題

安裝主題，先安裝Material，再安裝Seti，主題安裝好后，如下圖所示，選擇自己安裝的主題后生效

還可在命令窗口中輸入remove packages，選中要?jiǎng)h除的包即可進(jìn)行刪除操作。

7 emmet

安裝sublime之后，默認(rèn)安裝的包里面就自帶很多自動(dòng)補(bǔ)齊的功能，但是默認(rèn)的這些自動(dòng)補(bǔ)齊功能在做Web前端開(kāi)發(fā)的時(shí)候還不是很夠用。所以emmet顯得非常重要。例如在html中輸入！<tab>:

emmet用于代碼提示、自動(dòng)補(bǔ)全等

例如 輸入p20，Tab鍵之后自動(dòng)補(bǔ)全代碼為：padding: 20px;

輸入m0-auto，Tab鍵之后自動(dòng)補(bǔ)全代碼為：margin: 0 auto;

掌握一些Emmet語(yǔ)法對(duì)于提高代碼輸入速度很有幫助。可在http://docs.emmet.io/actions/上查看更多命令。

子代：>

div>ul>li 生成<div><ul><li></li></ul></div>

兄弟：+

div+div 生成<div></div><div></div>

父代：^

div+div>p>span+em^bq 生成<div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>

重復(fù)：*

ul>li*3 生成<ul><li></li><li></li><li></li><li></li><li></li></ul>

成組：（）

（div>dl>(dt+dd)*3）+footer>p 生成<div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl></div><footer><p></p></footer>

ID:# CLASS：.

div#header + div.page 生成<div id="header"></div><div class="page"></div>

屬性：[ ]

td[title="hello world" colspan=3] 生成 <td title="hello world" colspan="3"></td>

8 自定義代碼片段

snippet意為小片段，sublime可讓用戶(hù)創(chuàng)建自己的sublime。這個(gè)不是憑空想出來(lái)的，而是要定位自己日常工作中的重復(fù)性勞動(dòng)。

點(diǎn)擊Tools->Developer->New Snippet...可以創(chuàng)建一個(gè)新的snippet

<snippet><content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><!-- <tabTrigger>hello</tabTrigger> --><!-- Optional: Set a scope to limit where the snippet will trigger --><!-- <scope>source.python</scope> --> </snippet>

• <content><![CDATA[ ]]></content> 定義了補(bǔ)全的內(nèi)容。第三行就是要插入的代碼片，${1}代表的是第一個(gè)光標(biāo)位置，代碼片會(huì)默認(rèn)選中this，當(dāng)按下tab之后，會(huì)選中${2}中的snippet
• <tabTrigger> ： 定義了觸發(fā)補(bǔ)全的字符串。比如在以上例子上, 在編輯窗口輸入hello然后按下tab就會(huì)在編輯器輸出Type your snippet here這段代碼片段
• <description> ：對(duì)snippet描述
• <scope>：snippet生效的語(yǔ)言環(huán)境，如果不取消注釋的話，則在所有后綴的文件下都可以生效。

以視頻為例，新建snippet如下：

<snippet><content><![CDATA[ --- layout:default title:${1:標(biāo)題} ---${2} ]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><tabTrigger>top</tabTrigger><!-- Optional: Set a scope to limit where the snippet will trigger --><scope>text.html.markdown</scope> </snippet>

保存時(shí)以.sublime-snippet為文件擴(kuò)展名，默認(rèn)保存位置為User下

點(diǎn)擊Tools->Snippets...，可看到已保存的自定義snippet，選中即可顯示出代碼片段，或者使用關(guān)鍵字觸發(fā)，輸入top<tab>

作用范圍<scope>

通過(guò)快捷鍵：Ctrl + Shift + Alt + p可查看當(dāng)前文件的scope，例

出來(lái)的內(nèi)容有可能是空格隔開(kāi)的多個(gè)字符串，取第一個(gè)字符串就行了。基本上各種代碼文件的 scope 都是 source 打頭，例如 source.js source.ruby source.python 。其他的都是以 text 打頭，例如 text.html.basic text.html.markdown text.plain 等。 那么如何給一個(gè) snippet 定義多于一個(gè)文件類(lèi)型的 scope 呢？可以這樣

<scope>text.html.markdown, text.plain</scope>

9 批處理任務(wù) build system

10 HTML文件預(yù)覽快捷鍵設(shè)置

首先需要安裝SideBarEnhancements插件

接下來(lái)配置預(yù)覽快捷鍵，打開(kāi)Preferences->Key Bindings->User，鍵入如下內(nèi)容

[ // chrome { "keys": ["f1"], "command": "side_bar_files_open_with","args": {"paths": [],"application": "C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe","extensions":".*"}},// ie{ "keys": ["f2"], "command": "side_bar_files_open_with","args": {"paths": [],"application": "C:/Program Files (x86)/Internet Explorer/iexplore.exe","extensions":".*"} } ]

其中“keys”是指定的快捷鍵，可自定義，application是瀏覽器在電腦上的目錄地址，保存即可通過(guò)快捷鍵進(jìn)行預(yù)覽html

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

總結(jié)

以上是生活随笔為你收集整理的sublime学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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