Sublime Text
by Amos
極速 應用
裝武器
Step 1
外掛管理程式
Sublime
text
搜尋外掛
安裝外掛
移除外掛
Package
Control
其他外掛
其他外掛
其他外掛
安裝package control
搜尋「package control」
點選「install」
複製原始碼 1
複製原始碼 1
在Sublime開啟
View / Show
Console
2
複製原始碼 1
在Sublime開啟
View / Show
Console
2
貼上原始碼後按
Enter3
使用 Package Control
安裝其他外掛
使用 Package Control
安裝其他外掛
開啟「命令⾯面板」 1
使用 Package Control
安裝其他外掛
輸⼊入「ins」
選擇「Install Pakage」
並執⾏行
2
開啟「命令⾯面板」 1
輸⼊入「emmet」
選擇並執⾏行
即開始安裝
1
[= ]
出現[= ]左右彈跳時
表⽰示正在安裝中
火力清單
• convertToUTF8 (讓中⽂文正常顯⽰示)
•emmet (建原始碼超快)
• html5 (就HTML5啊)
• CSS3 (就CSS3啊)
• Color highlighter (顯⽰示⾊色碼⾊色彩)
• AutoFileName (可抓取檔案路徑)
•ChineseLoremIpsum (中⽂文假⽂文產⽣生器)
•All autocomplete (⾃自動取得class)
•view in browser (開啟瀏覽器預覽)
•HTML Beautify (原始碼⾃自動排列)
•Javascript Beautify (原始碼⾃自動排列)
•FTPsync (FTP功能)
•package Resource Viewer
常用Package Control指令
• 安裝已裝外掛 install package
• 移除已裝外掛 remove package
• 查看已裝外掛 list package
• 停⽤用已裝外掛 Disable package
• 啟⽤用已裝外掛 Enable package
• 查看外掛資料 Browse package
編輯 . 網頁
選擇文件格式
選擇文件格式
html5
選擇文件格式
html5
按這裡
建立網頁原始碼
建立網頁原始碼
html5 + tab
不夠懶
! + tab
標籤 + tab
加標籤
標籤.類別名
標籤#ID
加class、ID
標籤[屬性=屬性值 ]
加屬性
標籤[屬性=屬性值 ]
加屬性
不必寫引號
標籤{我是內⽂文}
加內文
標籤>標籤
加子層標籤
標籤>標籤
加子層標籤
左右不能有空格
標籤+標籤
接續標籤
標籤+標籤
接續標籤
左右不能有空格
h1.title+p{內⽂文}
例:
h1.title+p{內⽂文}
例:
<h1 class="title"></h1>
<p>我是內⽂文</p>
結果:
例:
h1.title{標題}+p{內⽂文}
例:
<h1 class="title">標題</h1>
<p>內⽂文</p>
結果:
h1.title{標題}+p{內⽂文}
(標籤>標籤)+(標籤>標籤)
標籤群組
(標籤>標籤)+(標籤>標籤)
標籤群組
左右不能有空格
(.header>.logo)+(.nav>ul>li)
例:
結果:
<div class=“header”>
<div class=“logo”></div>
</div>
<div class=“nav”>
<ul>
<li></li>
</ul>
</div>
標籤*10
一次打十個
實際操作
兩欄版型
實際操作
兩欄版型
實際操作
單層選單
兩欄版型
實際操作
單層選單
雙層選單
兩欄版
.wrapper>.header+
(.nav>ul>li*6>a)+.main+.footer
片段 

snippet
自訂 snippet
Tools / New snippet
片段內容
更換[ 這裡 ]
片段內容
設定關鍵字
設定[ 這裡 ]
並移除註解
設定關鍵字
儲存片段
使⽤用預設路徑
並建⽴立⼀一個資料夾
較⽅方便管理
儲存片段
片段副檔名
副檔名
.sublime-snippet
片段副檔名
管理 snippet
編碼規則
識別字
分類
名稱
+
+
amos_cdn_JQ
amos_cdn_jqUI
amos_cdn_bootstrap
amos_cdn_cssReset
amos_html_導覽列
amos_css_導覽列
amos_js_導覽列
amos_html_分頁
amos_css_分頁
主題 

Theme
內建主題
preferences / Color Scheme
Sublime Text / preferences / Color
Scheme
PC
MAC
其它推薦主題
Seti ui
Material
Theme - Spacegray
Predawn
自訂快速鍵 

hotkey
內建快速鍵
Key bindings-Default
自訂快速鍵
Key bindings-User
{ "keys": ["f12"], "command":
“open_in_browser” }
謝謝我是 Amos 是我
https://www.facebook.com/banPrint

Sublime text 極速應用教學