在網站開發的第一堂課 HTML+CSS+JS課程中,
是下載sublime text 做練習
但sublime除了當編輯器,
到底還有什麼好用呢(不然就用dremweaver或記事本就好了嘛)
我想它最強大的就是它的外掛plugins了,
外掛搭配快速鍵,可以大大增加你開發的效率
但還是建議,如果你是初學者
應該要先會從零開始自己key程式碼
熟了之後,再來用這些工具加速自己開發時間會更好噢
以下範例
使用:sublime text3
OS: mac
有人問說2跟3有什麼不同,大概就是iphone5跟iphone6的差別吧
所以用當然就是用最新的了
Sublime所有的plugins 在點我可看到
他會列出哪個最新、最熱門,點進去會告訴你這外掛如何安裝跟使用等等
至於不同OS之間快速鍵使用法,在這裡也能看到
安裝Package Control
安裝plugins之前,你必須先安裝Package Control
安裝方法可以看這篇
若你不想看英文 也可以參考我整理出來的
1. 先按 ctrl+`,並貼上語法
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://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)
2. 按enter,等個五秒會看到顯示成功(安裝sublime text2的話要重新啓動才會成功)

安裝Plugins
1. 先按commend+shift+p(叫出Package Control),接著輸入install,再按Enter
2. 接著輸入你要安裝的plugin名稱,按Enter之後,下面狀態列會顯示安裝成功
看看你裝了哪些plugins
先按commend+shift+p(叫出Package Control),接著輸入list,按Enter
移除plugins
1. 先按commend+shift+p(叫出Package Control),接著輸入remove,按Enter
2. 這時會列出你安裝的所有外掛,選擇你想刪除的外掛,按Enter
積下來開始介紹常用Plugins囉
Emmet
Emmet是每個前端工程師必備安裝的外掛了
只要按了特定的字+tab 就自動幫你生成html碼
!
<!-- 按tab會產生以下 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!-- .wrapper>ul -->
<div class="wrapper"><ul></ul></div>
<!-- li*3 -->
<li></li><li></li><li></li>
<!-- div>(header>ul>li*2>a)+footer>p -->
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
<!-- link:css -->
<link rel="stylesheet" href="style.css”>
<!-- script:src -->
<script src=""></script>
在css裡也一樣好用,是不是超方便!
bgc // background-color w // width h //height p //padding p-r //position: relative; cu-p //cursor: pointer;
SublimeTmpl
讓你可以在folder快速新增空的檔案
點了html就會生一個空的html給你,不需要在自己慢慢打囉
他還有提供空的js,css php…等


HTMLBeautify
幫你把html結構化整理乾淨
這時按Command-Option-Shift-F,程式碼就會瞬間變整齊
JsFormat
針對js的結構化,把亂掉js弄乾淨.快速鍵是Command+alt+f
其他快速鍵
ctrl+/ 註解
ctrl+L 點到一個字幫你選一整行
ctrl+Shift+D 複製光標所在整行
commend+ ] 全部往後移
commend+ [ 全部往前移
ctrl+G 找行數
alt+commend+2 一個視窗變兩個視窗
大家有什麼必裝不可的plugins也可以在下面留言交流喔













