web前端開(kāi)發(fā)【連載10】-sublime的安裝和使用

最近忙的跟狗一樣~傻球好久沒(méi)跟大家見(jiàn)面了,為了提高開(kāi)發(fā)效率,必須上法寶 sublime,哇哈哈,扔掉鼠標(biāo),讓手指在鍵盤(pán)上飛舞,come on\(≧≦)/

喵生好愜意

安裝:
  • 下載地址:http://www.sublimetext.com/
  • 下載完成之后跟著步驟一步步安裝就可以了
  • 安裝完成之后將安裝路徑添加到系統(tǒng)變量中,使用Win + R運(yùn)行sysdm.cpl 打開(kāi) “系統(tǒng)屬性”。然后在 “高級(jí)” 選項(xiàng)卡里選擇 “環(huán)境變量”,編輯 “Path”,增加 Sublime Text 的安裝目錄(例如 D:\Program Files\Sublime Text 3)。
    設(shè)置環(huán)境變量.png
  • 安裝 Package Control
    Sublime Text 支持大量插件,如何找到并管理這些插件就成了一個(gè)問(wèn)題,Package Control 正是為了解決這個(gè)問(wèn)題而出現(xiàn)的,利用它我們可以很方便的瀏覽、安裝和卸載 Sublime Text 中的插件。
    使用 Ctrl + `打開(kāi) Sublime Text 控制臺(tái),將下面的代碼粘貼到控制臺(tái)里:
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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://sublime.wbond.net/' + 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)

等待 Package Control 安裝完成。之后使用 Ctrl + Shift + P打開(kāi)命令板,輸入 PC 應(yīng)出現(xiàn) Package Control:

package control.png

  • 在安裝package control的過(guò)程中如果出現(xiàn)了There are no packages available for installation的問(wèn)題
    手動(dòng)下載package control:Package Control,將下載下來(lái)的壓縮文件,進(jìn)行解壓。會(huì)找到這樣一個(gè)文件:Package Control.sublime-package,我們將這個(gè)文件放到Sublime Text 3的Installed Packages目錄下。一般Installed Packages目錄為:C:\Users\用戶(hù)名\AppData\Roaming\Sublime Text 3\Installed Packages。如果沒(méi)有找到的話從這里找:Preferences-->Browse Packages。點(diǎn)進(jìn)入,向上翻一級(jí)就能找到Installed Packages。接著我們把Sublime Text 3重啟一下,沒(méi)有出現(xiàn)任何問(wèn)題就可以了。如果出現(xiàn)問(wèn)題可以點(diǎn)擊上面的鏈接有具體的解決方案。
概覽:
  • 編輯器界面結(jié)構(gòu)應(yīng)該一看就明白了,不用多介紹了
  • 設(shè)置
    在工具欄的preferences選項(xiàng)下面的settings選項(xiàng),打開(kāi)之后以json的形式對(duì)編輯器中的一些屬性進(jìn)行設(shè)置,比如在settings中輸入
{
// 設(shè)置Sans-serif(無(wú)襯線)等寬字體,以便閱讀
"font_face": "YaHei Consolas Hybrid",
"font_size": 12,
// 使光標(biāo)閃動(dòng)更加柔和
"caret_style": "phase",
// 高亮當(dāng)前行
"highlight_line": true,
// 高亮有修改的標(biāo)簽
"highlight_modified_tabs": true,
}

保存之后編輯器會(huì)將默認(rèn)字體大小調(diào)整為 12,并高亮當(dāng)前行。

  • 快捷鍵!?。。。。。ㄗ钏嵬岬墓δ埽?br> <strong>A.基本編輯</strong>:↑↓←→就是 ↑↓←→,,粘貼剪切復(fù)制均和系統(tǒng)一致。
    Ctrl + Enter在當(dāng)前行下面新增一行然后跳至該行;
    Ctrl + Shift + Enter在當(dāng)前行上面增加一行并跳至該行。
    Ctrl + ←/→進(jìn)行逐詞移動(dòng),相應(yīng)的,
    Ctrl + Shift + ←/→ 進(jìn)行逐詞選擇。
    Ctrl + ↑/↓移動(dòng)當(dāng)前顯示區(qū)域;
    Ctrl + Shift + ↑/↓ 移動(dòng)當(dāng)前行。
    <strong>B.選擇操作</strong>:Sublime Text 的一大亮點(diǎn)是支持多重選擇——同時(shí)選擇多個(gè)區(qū)域,然后同時(shí)進(jìn)行編輯。
    Ctrl + D 選擇當(dāng)前光標(biāo)所在的詞并高亮該詞所有出現(xiàn)的位置,再次 Ctrl + D選擇該詞出現(xiàn)的下一個(gè)位置,在多重選詞的過(guò)程中,使用 Ctrl + K進(jìn)行跳過(guò),使用Ctrl + U 進(jìn)行回退,使用Esc 退出多重編輯。
    有時(shí)我們需要對(duì)一片區(qū)域的所有行進(jìn)行同時(shí)編輯,Ctrl + Shift + L可以將當(dāng)前選中區(qū)域打散,然后進(jìn)行同時(shí)編輯;
    有打散自然就有合并,Ctrl + J可以把當(dāng)前選中區(qū)域合并為一行。
    <strong>C. 查找&替換</strong>:Sublime Text 提供了強(qiáng)大的查找(和替換)功能,為了提供一個(gè)清晰的介紹,我將 Sublime Text 的查找功能分為 快速查找、標(biāo)準(zhǔn)查找 和 多文件查找 三種類(lèi)型。
    • <strong>快速查找&替換</strong>
      多數(shù)情況下,我們需要查找文中某個(gè)關(guān)鍵字出現(xiàn)的其它位置,這時(shí)并不需要重新將該關(guān)鍵字重新輸入一遍然后搜索,我們只需要使用 Shift + ←/→Ctrl + D選中關(guān)鍵字,然后 F3跳到其下一個(gè)出現(xiàn)位置, Shift + F3跳到其上一個(gè)出現(xiàn)位置,此外還可以用 Alt + F3選中其出現(xiàn)的所有位置(之后可以進(jìn)行多重編輯,也就是快速替換)。
    • <strong>標(biāo)準(zhǔn)查找&替換</strong>
      另一種常見(jiàn)的使用場(chǎng)景是搜索某個(gè)已知但不在當(dāng)前顯示區(qū)域的關(guān)鍵字,這時(shí)可以使用 Ctrl + F, 調(diào)出搜索框進(jìn)行搜索 , 以及使用 Ctrl + H進(jìn)行替換。
    • <strong>關(guān)鍵字查找&替換</strong>
      對(duì)于普通用戶(hù)來(lái)說(shuō),常規(guī)的關(guān)鍵字搜索就可以滿(mǎn)足其需求:在搜索框輸入關(guān)鍵字后 Enter 跳至關(guān)鍵字當(dāng)前光標(biāo)的下一個(gè)位置, Shift + Enter 跳至上一個(gè)位置,Alt + Enter選中其出現(xiàn)的所有位置(同樣的,接下來(lái)可以進(jìn)行快速替換)。
      Sublime Text 的查找有不同的模式: Alt + C切換大小寫(xiě)敏感(Case-sensitive)模式, Alt + W 切換整字匹配(Whole matching)模式,除此之外Sublime Text還支持在選中范圍內(nèi)搜索(Search in selection),這個(gè)功能沒(méi)有對(duì)應(yīng)的快捷鍵,但可以通過(guò)以下配置項(xiàng)自動(dòng)開(kāi)啟。
"auto_find_in_selection": true```
這樣之后在選中文本的狀態(tài)下范圍內(nèi)搜索就會(huì)自動(dòng)開(kāi)啟,配合這個(gè)功能,局部重命名(Local Renaming)變的非常方便:
[![使用范圍搜索進(jìn)行局部重命名](http://upload-images.jianshu.io/upload_images/3810529-54d8a9736534469a.gif?imageMogr2/auto-orient/strip)](http://i.imgur.com/QRIsDra.gif)
使用 `Ctrl + H` 進(jìn)行標(biāo)準(zhǔn)替換,輸入替換內(nèi)容后,使用 `Ctrl + Shift + H`
替換當(dāng)前關(guān)鍵字, `Ctrl + Alt + Enter`替換所有匹配關(guān)鍵字。
<strong>D. 跳轉(zhuǎn)</strong>:Sublime Text 提供了強(qiáng)大的跳轉(zhuǎn)功能使得我們可以在不同的文件/方法/函數(shù)中無(wú)縫切換。就我的使用經(jīng)驗(yàn)而言,目前還沒(méi)有哪一款編輯器可以在這個(gè)方面超越Sublime Text。
`Ctrl + P `會(huì)列出當(dāng)前打開(kāi)的文件(或者是當(dāng)前文件夾的文件),輸入文件名然后 `Enter `跳轉(zhuǎn)至該文件。
`Ctrl + G `然后輸入行號(hào)以跳轉(zhuǎn)到指定行。
在 `Ctrl + P`匹配到文件后,我們可以進(jìn)行后續(xù)輸入以跳轉(zhuǎn)到更精確的位置:
@
 符號(hào)跳轉(zhuǎn):輸入 @symbol
 跳轉(zhuǎn)到 symbol
 符號(hào)所在的位置
#
 關(guān)鍵字跳轉(zhuǎn):輸入 #keyword
 跳轉(zhuǎn)到 keyword
 所在的位置
:
 行號(hào)跳轉(zhuǎn):輸入 :12
 跳轉(zhuǎn)到文件的第12行。
[![組合跳轉(zhuǎn)演示](http://upload-images.jianshu.io/upload_images/3810529-cae8a2e187b09b41.gif?imageMogr2/auto-orient/strip)](http://i.imgur.com/3y9MG88.gif)
所以 Sublime Text 把` Ctrl + P`稱(chēng)之為 **“Go To Anything”**,這個(gè)功能如此好用,以至于我認(rèn)為沒(méi)有其它編輯器能夠超越它。

#####窗口和標(biāo)簽
Sublime Text 是一個(gè)多窗口多標(biāo)簽編輯器:我們既可以開(kāi)多個(gè)Sublime Text窗口,也可以在一個(gè)Sublime Text窗口內(nèi)開(kāi)多個(gè)標(biāo)簽。
- 窗口(Window)
使用 `Ctrl + Shift + N` 創(chuàng)建一個(gè)新窗口(該快捷鍵再次和搜狗輸入法快捷鍵沖突,個(gè)人建議禁用所有搜狗輸入法快捷鍵)。
當(dāng)窗口內(nèi)沒(méi)有標(biāo)簽時(shí),使用` Ctrl + W `關(guān)閉該窗口。
- 標(biāo)簽(Tab)
使用` Ctrl + N` 在當(dāng)前窗口創(chuàng)建一個(gè)新標(biāo)簽, 
`Ctrl + W`關(guān)閉當(dāng)前標(biāo)簽,
` Ctrl + Shift + T`恢復(fù)剛剛關(guān)閉的標(biāo)簽。
編輯代碼時(shí)我們經(jīng)常會(huì)開(kāi)多個(gè)窗口,所以分屏很重要。
` Alt + Shift + 2` 進(jìn)行左右分屏, 
`Alt + Shift + 8`進(jìn)行上下分屏,
` Alt + Shift + 5`進(jìn)行上下左右分屏(即分為四屏)。
分屏之后,使用 `Ctrl + 數(shù)字鍵`跳轉(zhuǎn)到指定屏,使用` Ctrl + Shift + 數(shù)字鍵將當(dāng)前屏移動(dòng)到指定屏。例如, `Ctrl + 1`會(huì)跳轉(zhuǎn)到1屏,而 `Ctrl + Shift + 2`會(huì)將當(dāng)前屏移動(dòng)到2屏。
- 全屏(Full Screen)
Sublime Text 有兩種全屏模式:普通全屏和無(wú)干擾全屏。
個(gè)人強(qiáng)烈建議在開(kāi)啟全屏前關(guān)閉菜單欄(Toggle Menu),否則全屏效果會(huì)大打折扣。
`F11`切換普通全屏,
`Shift + F11`切換無(wú)干擾全屏.

#####風(fēng)格:
sublime text可以設(shè)置自己的配色和風(fēng)格,次章節(jié)不做詳細(xì)介紹,文章最后會(huì)貼出原參考博客以供參考(*^__^*) ~

#####編碼:
良好的代碼應(yīng)該是規(guī)范的,所以Google為每一門(mén)主流語(yǔ)言都設(shè)置了其代碼規(guī)范(Code Style Guideline)。

// 設(shè)置tab的大小為2
"tab_size": 2,
// 使用空格代替tab
"translate_tabs_to_spaces": true,
// 添加行寬標(biāo)尺
"rulers": [80, 100],
// 顯示空白字符
"draw_white_space": "all",
// 保存時(shí)自動(dòng)去除行末空白
"trim_trailing_white_space_on_save": true,
// 保存時(shí)自動(dòng)增加文件末尾換行
"ensure_newline_at_eof_on_save": true,


一言半語(yǔ)是描繪不出sublime text的強(qiáng)大的,還是要在實(shí)踐中慢慢體會(huì),最重要的就是掌握快捷鍵,代碼就會(huì)敲的飛起,哇哈哈哈哈~表示自己還是初學(xué)者,不多說(shuō),實(shí)踐去了,原博客的內(nèi)容還沒(méi)有完全消化,再接再厲!
附上原網(wǎng)址:[Sublime Text 全程指南](http://zh.lucida.me/blog/sublime-text-complete-guide/)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容