【工具】Sublime使用詳細介紹

LockJo發表於2017-12-28

宣告：本文章是根據慕課網視訊 前端開發工具技巧介紹—Sublime篇 整理而來的筆記。

目錄：

1、選單欄主要功能。
2、使用"Goto Anything"。
3、多行遊標。
4、命令模式。
5、安裝外掛。
6、綜合技巧運用。
7、Sublime進階。
7.1、Snippet以模板的方式程式設計。
7.2、輔助技巧-advanceNewfile。
未完待續。

1、選單欄主要功能

sublime.png

1、SublimeText預設配置檔案：Preferences——>Setting-Default。 2、SublimeText使用者配置檔案：Preferences——>Setting-User。 3、SublimeText顏色配置：Preferences——>Color Scheme。

2、使用"Goto Anything"。

要點：
1、其搜尋是支援模糊匹配的。
2、可在檔案內部外部迅速導航。

1、快捷鍵Ctrl+P開啟GotoAnything輸入框。
2、（:20）跳轉到第20行。
3、（index.html）找到該檔案。
4、（view/index）找到在views目錄下的index.html檔案。
5、（@）@後面的字元可以找想找到的選擇器或者函式名。
6、（#body）#是對頁面內容進行匹配。
7、（public/css/bo@body）直接定位到bootstrap.css的body選擇器。

3、多行遊標

1、Ctrl+D ：選擇遊標所在單詞，連續Ctrl+D 實現多行選擇（選擇與第一次選擇相同的單詞）。
2、Ctrl+K Ctrl+D：跳過當前選擇，選擇下一個。
3、Ctrl+shirt+D：複製遊標所在行。
4、Alt+F3：選擇所有與遊標所在單詞相同的單詞。
5、Ctrl+A，Ctrl+shift+L：每行都會產生一個游標)，如果每行一樣的話很方便。
6、按住shift鍵，然後按住滑鼠右鍵向下拖動，也可產生多行遊標。
7、按住ctrl鍵，用滑鼠左鍵一個一個點選，也可以產生多行遊標。

4、命令模式

1、首先要安裝PackageControl（官網：https://packagecontrol.io ）。
2、Ctrl+` 輸入：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)
複製程式碼

重啟Sublime。
3、Ctrl+Shift+P（啟動命令模式）。
4、輸入：set syntax javascript（設定為js語法模式）。
5、輸入：minimap（開啟/關閉右側的minimap）。

5、安裝外掛

1、Ctrl+Shift+P開啟命令模式。
2、輸入install，稍等片刻。
3、輸入外掛名稱回車就能自動安裝了。

常用外掛： 1、Emmet。 2、主題：Theme - Spacegray（可到PackageControl官網檢視該主題樣式）。 3、Java​Script & Node​JS Snippets。 4、JQuery。 5、Insert Callback。 6、AdvancedNewFile。

6、綜合技巧運用。

1、開啟一個檔案：Ctrl+N。
2、啟動命令模式：Ctrl+Shift+P。
3、設定為html語法模式：輸入 sshtml+Enter。
4、在編輯區輸入! 接著按快捷鍵Ctrl+E直接出現（使用Emmet外掛完成，如何安裝請參考目錄4）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
複製程式碼

5、Ctrl+P開啟GotoAnything。
6、輸入#body按回車，游標定位到body標籤上。
7、Ctrl+回車，在body標籤新增新行。
8、（ul>.item$*10{content}）+（ctrl+E）> 號生成子元素 ， . 點號代表 class ，$ 產生序號，{ }產生內容。
9、選中“><”字串按Alt+F3選中所有的“><”字串，移動游標到"><"中間，回車，輸入h2{this is title}按Ctrl+E。
10、Ctrl+Shift+V 貼上的時候可以儲存程式碼的縮排。

7、Sublime進階

7.1、Snippet以模板的方式程式設計。

1、Ctrl+Shift+P開啟命令模式。
2、輸入Snippet:Function回車。
3、使用Snippet可以減少左右移動游標，輸入分號，大括號的一個過程。
4、使用Sublime自動補全功能也能做到以Snippet方式程式設計。
5、可以去PackageControl官網搜尋JavaScript Snippets for Sublime查詢更多定義好的Snippet。
6、安裝Insert Callback外掛按Alt+C可以在引數中自動補全回撥方法。
7、安裝JQuery外掛也能使用Snippet對JQuery進行程式設計。

7.2、輔助技巧-advanceNewfile。

1、安裝AdvancedNewFile外掛。
2、Ctrl+Alt+N。
3、輸入public/css/test.css，就會在指定目錄下建立好test.css檔案。
4、如果有目錄不存在，也能同時建立好該目錄。

未完待續 由於最近才開始有學html5的準備，沒有js基礎，表示後面的Sublime進階外掛聽不懂，等學會了js再來補充。

相關文章