轉載自:https://www.cnblogs.com/zyrblog/p/9667760.html
1、前言
工欲善其事,必先利其器。在軟件代碼的編寫中,必定要知道IDE或者編輯器的快捷鍵的使用,這樣能夠提升不少的效率,特別是在前端代碼的編寫之中,很容易的就出現了HTML標籤,如果每次都一個個敲出來,不只不美觀,反而很是浪費時間,所以咱們須要學習一套快捷生成HTML以及標籤的方法,無疑sublime text是當下很是流行的編輯器軟件,很是強大和好用。那麼讓咱們來看一下強大的sublime text吧。css
2、sublime text中的快捷鍵
2.一、基本的快捷鍵
1 選擇類
2 Ctrl+D 選中光標所佔的文本,繼續操做則會選中下一個相同的文本。 3 Alt+F3 選中文本按下快捷鍵,便可一次性選擇所有的相同文本進行同時編輯。舉個栗子:快速選中並更改全部相同的變量名、函數名等。 4 Ctrl+L 選中整行,繼續操做則繼續選擇下一行,效果和 Shift+↓ 效果同樣。 5 Ctrl+Shift+L 先選中多行,再按下快捷鍵,會在每行行尾插入光標,便可同時編輯這些行。 6 Ctrl+Shift+M 選擇括號內的內容(繼續選擇父括號)。舉個栗子:快速選中刪除函數中的代碼,重寫函數體代碼或重寫括號內裏的內容。 7 Ctrl+M 光標移動至括號內結束或開始的位置。 8 Ctrl+Enter 在下一行插入新行。舉個栗子:即便光標不在行尾,也能快速向下插入一行。 9 Ctrl+Shift+Enter 在上一行插入新行。舉個栗子:即便光標不在行首,也能快速向上插入一行。 10 Ctrl+Shift+[ 選中代碼,按下快捷鍵,摺疊代碼。 11 Ctrl+Shift+] 選中代碼,按下快捷鍵,展開代碼。 12 Ctrl+K+0 展開全部摺疊代碼。 13 Ctrl+← 向左單位性地移動光標,快速移動光標。 14 Ctrl+→ 向右單位性地移動光標,快速移動光標。 15 shift+↑ 向上選中多行。 16 shift+↓ 向下選中多行。 17 Shift+← 向左選中文本。 18 Shift+→ 向右選中文本。 19 Ctrl+Shift+← 向左單位性地選中文本。 20 Ctrl+Shift+→ 向右單位性地選中文本。 21 Ctrl+Shift+↑ 將光標所在行和上一行代碼互換(將光標所在行插入到上一行以前)。 22 Ctrl+Shift+↓ 將光標所在行和下一行代碼互換(將光標所在行插入到下一行以後)。 23 Ctrl+Alt+↑ 向上添加多行光標,可同時編輯多行。 24 Ctrl+Alt+↓ 向下添加多行光標,可同時編輯多行。 25 26 27 編輯類 29 Ctrl+J 合併選中的多行代碼爲一行。舉個栗子:將多行格式的CSS屬性合併爲一行。 30 Ctrl+Shift+D 複製光標所在整行,插入到下一行。 31 Tab 向右縮進。 32 Shift+Tab 向左縮進。 33 Ctrl+K+K 從光標處開始刪除代碼至行尾。 34 Ctrl+Shift+K 刪除整行。 35 Ctrl+/ 註釋單行。 36 Ctrl+Shift+/ 註釋多行。 37 Ctrl+K+U 轉換大寫。 38 Ctrl+K+L 轉換小寫。 39 Ctrl+Z 撤銷。 40 Ctrl+Y 恢復撤銷。 41 Ctrl+U 軟撤銷,感受和 Gtrl+Z 同樣。 42 Ctrl+F2 設置書籤 43 Ctrl+T 左右字母互換。 44 F6 單詞檢測拼寫 45 46 47 搜索類 48 49 Ctrl+F 打開底部搜索框,查找關鍵字。 50 Ctrl+shift+F 在文件夾內查找,與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找,略高端,未研究。 51 Ctrl+P 打開搜索框。舉個例子:一、輸入當前項目中的文件名,快速搜索文件,二、輸入@和關鍵字,查找文件中函數名,
三、輸入:和數字,跳轉到文件中該行代碼,4、輸入#和關鍵字,查找變量名。 52 Ctrl+G 打開搜索框,自動帶:,輸入數字跳轉到該行代碼。舉個栗子:在頁面代碼比較長的文件中快速定位。 53 Ctrl+R 打開搜索框,自動帶@,輸入關鍵字,查找文件中的函數名。舉個栗子:在函數較多的頁面快速查找某個函數。 54 Ctrl+: 打開搜索框,自動帶#,輸入關鍵字,查找文件中的變量名、屬性名等。 55 Ctrl+Shift+P 打開命令框。場景栗子:打開命名框,輸入關鍵字,調用sublime text或插件的功能,例如使用package安裝插件。 56 Esc 退出光標多行選擇,退出搜索框,命令框等。 57 58 59 顯示類 60 61 Ctrl+Tab 按文件瀏覽過的順序,切換當前窗口的標籤頁。 62 Ctrl+PageDown 向左切換當前窗口的標籤頁。 63 Ctrl+PageUp 向右切換當前窗口的標籤頁。 64 Alt+Shift+1 窗口分屏,恢復默認1屏(非小鍵盤的數字) 65 Alt+Shift+2 左右分屏-2列 66 Alt+Shift+3 左右分屏-3列 67 Alt+Shift+4 左右分屏-4列 68 Alt+Shift+5 等分4屏 69 Alt+Shift+8 垂直分屏-2屏 70 Alt+Shift+9 垂直分屏-3屏 71 Ctrl+K+B 開啓/關閉側邊欄。 72 F11 全屏模式 73 Shift+F11 免打擾模式
2.二、快速建立新文件
在preferences中點擊「package control」(若是沒有,在下面有安裝方式)html
而後輸入AdvancedNewFile,點擊安裝便可:前端
以後咱們是用ctrl+alt+n便可快速建立文件:html5
2.三、代碼格式化
sublime中自帶的代碼格式化工具(indent和unindent,快捷鍵爲 Ctrl+[ 和 Ctrl+] )其實能力有限,只能進行簡單的格式化,對於不一樣的語言來講是不同的,所以咱們須要使用插件,一樣的在package control中安裝相應語言的格式化插件(搜索format,而後選擇便可),這樣就能夠了。windows
3、安裝sublime text插件emmet
在使用這些功能以前,咱們須要安裝一個插件emmet,插件的安裝方法以下:
3.一、打開Sublime text3,點擊View找到Show Console(這兩步能夠用快捷鍵ctrl+~代替),則會出現如下界面將如下內容粘貼到控制檯輸入框,而後按enter鍵,下面的代碼就是安裝pageage control的:
瀏覽器
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
3.二、再點擊Preferences中的Package Control,找到Package Control Install Package,點擊進入,在輸入框中輸入emmet,選擇第一個(注意:筆者這裏已經安裝過了,所以顯示的是emmet css,若是沒有安裝就是emmet),則會自動安裝。
markdown
3.三、測試:新建一個HTML文檔,在其中輸入html:xt+Tab鍵,看是否出現如下界面,若是出現則安裝成功。編輯器
3.四、其餘安裝方法函數
上面的安裝方法是最簡單的了,可是還有其餘的安裝方法,好比咱們從官網上下載emmet的安裝包,解壓以後到文件夾之中,而後將該安裝包導入到sublime之中。工具
點擊browser package,將下載的文件解壓到Packages目錄下:
此時也可使用emmet,可是卻沒有安裝package control,其實並不方便。
4、sublime text中的HTML快速生成方法
下面咱們總算能夠愉快的使用emmet了:
4.一、新建文檔xhtml、html5等
接着按下tab鍵觸發emmet進行生成:
生成HTML5:
接着按下tab鍵觸發emmet進行生成:
或者能夠這樣生成HTML5文件:
接着按下tab鍵觸發emmet進行生成:
4.二、生成HTML標籤
1 輸入任何標記、雙標記按下tab出現正常標籤對 2 style 3 4 建立html標籤含Id、多個類名的標記:建立格式和css選擇器命名方式一致 5 建立id名爲box的div標記 6 輸入: div#box 7 建立類名爲box的div標記 8 輸入: div.box 9 同時建立兩個div標記id爲box1,類名爲box2 10 輸入:div#box1+div.box2 11 建立兩個div標記 Id爲box1,包含類名爲box2 12 輸入:div#box1>div.box2 13 建立id爲box1的標記包含兩個類名爲box2的標記 14 輸入:div#box1>div.box2*2 15 建立5個div類名爲box、內容爲1-5 16 輸入:div.box{$}*5 17 建立5個div類名爲box1-5 18 輸入:div.box$*5 19 建立1個div類名爲box,內容爲’Hellow world!’ 20 輸入:div.box{Hellow world!}
5、在sublime中使用markdown插件
5.一、首先咱們安裝這幾個插件
Markdown Editing 支持markdown編輯和語法高亮 Markdown Preview 支持markdown導出html預覽支持,ctrl+shift+p輸入mp通常會跳出 auto-save 可自定義的自動保存功能 Markdown Extended 和 Monokai Extended:markdown 代碼高亮插件,二者配合使用效果最佳。
5.二、建立md文件並測試
以後咱們首先建立後綴爲.md的文件,而後寫入markdown語法的內容,而後使用Markdown Preview測試:
在彈出的框之中選擇markdown,以後就會打開瀏覽器並生成html了:
6、sublime text3破解
6.一、首先將sublime text3的請求的域名定位到本地,假裝從而避免聯網驗證
windows: c:/windows/system32/drivers/etc/hosts
hosts文件須要管理員權限,所以咱們使用管理員方式打開cmd,而且使用notepad記事本打開該文件並修改便可:
127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com
6.二、其次查找當前版本的破解碼
好比3.1.1的 3176 版本可用註冊碼:
----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------
6.三、最後咱們禁用更新
禁用 Sublime Text 3 檢測新版本,設置 Preferences -> Settings-User,添加 "update_check": false
注意:其實咱們設置了hosts以後,sublime text就已經連不上網了,也不會更新了。
7、sublime text 打開文檔出現亂碼的解決辦法
其實也是很是的簡單,只須要安裝一個插件ConvertToUTF8就能夠了。
8、總結
學習了sublime的快捷方式以後,對咱們的代碼的編寫是很是有用的,能夠節省咱們大量的時間和精力,最重要的是要熟練的使用,多練習才能熟能生巧。