聲明:本文章是根據(jù)慕課網(wǎng)視頻 前端開發(fā)工具技巧介紹—Sublime篇 整理而來的筆記。
目錄:
1、菜單欄主要功能。
2、使用"Goto Anything"。
3、多行游標(biāo)。
4、命令模式。
5、安裝插件。
6、綜合技巧運(yùn)用。
7、Sublime進(jìn)階。
7.1、Snippet以模板的方式編程。
7.2、輔助技巧-advanceNewfile。
未完待續(xù)。
1、菜單欄主要功能
1、SublimeText默認(rèn)配置文件:Preferences——>Setting-Default。
2、SublimeText用戶配置文件:Preferences——>Setting-User。
3、SublimeText顏色配置:Preferences——>Color Scheme。
2、使用"Goto Anything"。
要點(diǎn):
1、其搜索是支持模糊匹配的。
2、可在文件內(nèi)部外部迅速導(dǎo)航。
1、快捷鍵Ctrl+P打開GotoAnything輸入框。
2、(:20)跳轉(zhuǎn)到第20行。
3、(index.html)找到該文件。
4、(view/index)找到在views目錄下的index.html文件。
5、(@)@后面的字符可以找想找到的選擇器或者函數(shù)名。
6、(#body)#是對(duì)頁面內(nèi)容進(jìn)行匹配。
7、(public/css/bo@body)直接定位到bootstrap.css的body選擇器。
3、多行游標(biāo)
1、Ctrl+D :選擇游標(biāo)所在單詞,連續(xù)Ctrl+D 實(shí)現(xiàn)多行選擇(選擇與第一次選擇相同的單詞)。
2、Ctrl+K Ctrl+D:跳過當(dāng)前選擇,選擇下一個(gè)。
3、Ctrl+shirt+D:復(fù)制游標(biāo)所在行。
4、Alt+F3:選擇所有與游標(biāo)所在單詞相同的單詞。
5、Ctrl+A,Ctrl+shift+L:每行都會(huì)產(chǎn)生一個(gè)光標(biāo)),如果每行一樣的話很方便。
6、按住shift鍵,然后按住鼠標(biāo)右鍵向下拖動(dòng),也可產(chǎn)生多行游標(biāo)。
7、按住ctrl鍵,用鼠標(biāo)左鍵一個(gè)一個(gè)點(diǎn)擊,也可以產(chǎn)生多行游標(biāo)。
4、命令模式
1、首先要安裝PackageControl(官網(wǎng):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(啟動(dòng)命令模式)。
4、輸入:set syntax javascript(設(shè)置為js語法模式)。
5、輸入:minimap(打開/關(guān)閉右側(cè)的minimap)。
5、安裝插件
1、Ctrl+Shift+P打開命令模式。
2、輸入install,稍等片刻。
3、輸入插件名稱回車就能自動(dòng)安裝了。
常用插件:
1、Emmet。
2、主題:Theme - Spacegray(可到PackageControl官網(wǎng)查看該主題樣式)。
3、Java?Script & Node?JS Snippets。
4、JQuery。
5、Insert Callback。
6、AdvancedNewFile。
6、綜合技巧運(yùn)用。
1、打開一個(gè)文件:Ctrl+N。
2、啟動(dòng)命令模式:Ctrl+Shift+P。
3、設(shè)置為html語法模式:輸入 sshtml+Enter。
4、在編輯區(qū)輸入! 接著按快捷鍵Ctrl+E直接出現(xiàn)(使用Emmet插件完成,如何安裝請(qǐng)參考目錄4):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
5、Ctrl+P打開GotoAnything。
6、輸入#body按回車,光標(biāo)定位到body標(biāo)簽上。
7、Ctrl+回車,在body標(biāo)簽添加新行。
8、(ul>.item$*10{content})+(ctrl+E)> 號(hào)生成子元素 , . 點(diǎn)號(hào)代表 class ,$ 產(chǎn)生序號(hào),{ }產(chǎn)生內(nèi)容。
9、選中“><”字符串按Alt+F3選中所有的“><”字符串,移動(dòng)光標(biāo)到"><"中間,回車,輸入h2{this is title}按Ctrl+E。
10、Ctrl+Shift+V 粘貼的時(shí)候可以保存代碼的縮進(jìn)。
7、Sublime進(jìn)階
7.1、Snippet以模板的方式編程。
1、Ctrl+Shift+P打開命令模式。
2、輸入Snippet:Function回車。
3、使用Snippet可以減少左右移動(dòng)光標(biāo),輸入分號(hào),大括號(hào)的一個(gè)過程。
4、使用Sublime自動(dòng)補(bǔ)全功能也能做到以Snippet方式編程。
5、可以去PackageControl官網(wǎng)搜索JavaScript Snippets for Sublime查找更多定義好的Snippet。
6、安裝Insert Callback插件按Alt+C可以在參數(shù)中自動(dòng)補(bǔ)全回調(diào)方法。
7、安裝JQuery插件也能使用Snippet對(duì)JQuery進(jìn)行編程。
7.2、輔助技巧-advanceNewfile。
1、安裝AdvancedNewFile插件。
2、Ctrl+Alt+N。
3、輸入public/css/test.css,就會(huì)在指定目錄下創(chuàng)建好test.css文件。
4、如果有目錄不存在,也能同時(shí)創(chuàng)建好該目錄。
未完待續(xù)
由于最近才開始有學(xué)html5的準(zhǔn)備,沒有js基礎(chǔ),表示后面的Sublime進(jìn)階插件聽不懂,等學(xué)會(huì)了js再來補(bǔ)充。