1. 程式人生 > >sublime中快捷鍵和html標簽的使用和生成以及使用markdown

sublime中快捷鍵和html標簽的使用和生成以及使用markdown

!= control 命令 註釋 port 版本 管理 支持 rep

轉載自:https://www.cnblogs.com/zyrblog/p/9667760.html

一、前言

工欲善其事,必先利其器。在軟件代碼的編寫中,一定要知道IDE或者編輯器的快捷鍵的使用,這樣可以提高很多的效率,特別是在前端代碼的編寫之中,很容易的就出現了HTML標簽,若是每次都一個個敲出來,不僅不美觀,反而非常浪費時間,因此我們需要學習一套快捷生成HTML以及標簽的方法,無疑sublime text是當下非常流行的編輯器軟件,非常強大和好用。那麽讓我們來看一下強大的sublime text吧。

二、sublime text中的快捷鍵

2.1、基本的快捷鍵

技術分享圖片
 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 打開搜索框。舉個例子:1、輸入當前項目中的文件名,快速搜索文件,2、輸入@和關鍵字,查找文件中函數名,
3、輸入:和數字,跳轉到文件中該行代碼,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.2、快速創建新文件

在preferences中點擊“package control”(如果沒有,在下面有安裝方式)

技術分享圖片

然後輸入AdvancedNewFile,點擊安裝即可:

技術分享圖片

技術分享圖片

之後我們是用ctrl+alt+n即可快速創建文件:

技術分享圖片

2.3、代碼格式化

sublime中自帶的代碼格式化工具(indent和unindent,快捷鍵為 Ctrl+[ 和 Ctrl+] )其實能力有限,只能進行簡單的格式化,對於不同的語言來說是不一樣的,因此我們需要使用插件,同樣的在package control中安裝相應語言的格式化插件(搜索format,然後選擇即可),這樣就可以了。

三、安裝sublime text插件emmet

在使用這些功能之前,我們需要安裝一個插件emmet,插件的安裝方法如下:
3.1、打開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.2、再點擊Preferences中的Package Control,找到Package Control Install Package,點擊進入,在輸入框中輸入emmet,選擇第一個(註意:筆者這裏已經安裝過了,因此顯示的是emmet css,如果沒有安裝就是emmet),則會自動安裝。
技術分享圖片技術分享圖片

技術分享圖片

技術分享圖片
3.3、測試:新建一個HTML文檔,在其中輸入html:xt+Tab鍵,看是否出現以下界面,如果出現則安裝成功。

技術分享圖片

技術分享圖片

3.4、其他安裝方法

上面的安裝方法是最簡單的了,但是還有其他的安裝方法,比如我們從官網上下載emmet的安裝包,解壓之後到文件夾之中,然後將該安裝包導入到sublime之中。

技術分享圖片

技術分享圖片

點擊browser package,將下載的文件解壓到Packages目錄下:

技術分享圖片

此時也可以使用emmet,但是卻沒有安裝package control,其實並不方便。

四、sublime text中的HTML快速生成方法

下面我們總算可以愉快的使用emmet了:

4.1、新建文檔xhtml、html5等

技術分享圖片

接著按下tab鍵觸發emmet進行生成:

技術分享圖片

生成HTML5:

技術分享圖片

接著按下tab鍵觸發emmet進行生成:

技術分享圖片

或者可以這樣生成HTML5文件:

技術分享圖片

接著按下tab鍵觸發emmet進行生成:

技術分享圖片

4.2、生成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!}
技術分享圖片

技術分享圖片技術分享圖片

技術分享圖片

技術分享圖片

五、在sublime中使用markdown插件

5.1、首先我們安裝這幾個插件

Markdown Editing 支持markdown編輯和語法高亮
Markdown Preview 支持markdown導出html預覽支持,ctrl+shift+p輸入mp一般會跳出
auto-save 可自定義的自動保存功能
Markdown Extended 和 Monokai Extended:markdown 代碼高亮插件,兩者配合使用效果最佳。

5.2、創建md文件並測試

之後我們首先創建後綴為.md的文件,然後寫入markdown語法的內容,然後使用Markdown Preview測試:

技術分享圖片 mark.md

技術分享圖片

在彈出的框之中選擇markdown,之後就會打開瀏覽器並生成html了:

技術分享圖片技術分享圖片

六、sublime text3破解

6.1、首先將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.2、其次查找當前版本的破解碼

技術分享圖片

比如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.3、最後我們禁用更新

禁用 Sublime Text 3 檢測新版本,設置 Preferences -> Settings-User,添加 "update_check": false

技術分享圖片

註意:其實我們設置了hosts之後,sublime text就已經連不上網了,也不會更新了。

七、sublime text 打開文檔出現亂碼的解決辦法

其實也是非常的簡單,只需要安裝一個插件ConvertToUTF8就可以了。

技術分享圖片

八、總結

學習了sublime的快捷方式之後,對我們的代碼的編寫是非常有用的,可以節省我們大量的時間和精力,最重要的是要熟練的使用,多練習才能熟能生巧。

sublime中快捷鍵和html標簽的使用和生成以及使用markdown