[網頁,工具]Sublime的快速安裝和介紹

Sublime的好處我認了,原本很堅持要用DW的
但一天到晚為了修改小細節一直複製貼上一樣的東西,實在是很笨
看著同學們用zencoding(後來改名叫emmet)和Ctrl+D快速改code就覺得有點羨慕
所以囉~

Sublime介紹

*Sublime的好處

  • 可以同時開兩欄,比對文件,或是一邊看架構HTML一邊看CSS檔案
  • 自動保留檔案,不怕沒存到檔案
  • 外掛多,無所不能(像是排版、除蟲、檢色器等等)

*Sublime指令

  • F11切換全螢幕
  • Ctrl+/註解、取消註解
  • Ctrl+左鍵 可於想修改的地方加選好幾個文字標,同時修改
  • Ctrl+D向下選取同名字並同步修改code,大量修改超好用
  • Ctrl+G直接輸入數字到行數到指定行數
  • Alt+F3選取全文同名內容,等於超快速搜尋替代功能
  • Shift+右鍵(向垂直方向拉) 同時修改垂直方向內容,根本太強大...
  • Ctrl+Shift+L同時選取多行,同步修改內容
  • Ctrl+Shift+P管理套件面板(必記)
有些本來就是軟體通用的快捷
另外附上一張熱鍵表
了解了這些指令後我根本嚇壞了,快來用用看吧(抖

*設定副檔名

如果沒有設定檔案的存檔類型的話,每次存檔後還需要重新命名副檔名。
設定後,每次存檔就會自動存成HTML。
方法:Ctrl+Shift+P打開控制面板→搜尋html→選擇Set syntax:HTML

下載Sublime

官網:傳送門
先去官網下載檔案,現在有分Sublime2、Sublime3兩個版本
我是用版本2,版本2的網路資源齊全一點,但版本3有修正一些bug,新增一些功能
雖然我本來堅持用版本2(有些快捷鍵或套件設定會不一樣),但畢竟新版本才會有一些持續更新和支援....所以最後我還是用Sublime3哩

安裝其他套件Package Control

功能:管理、下載套件用的爸爸套件,安裝其他套件都要靠這個。沒有裝套件的Sublime什麼都沒有啊(抖)
套件官網:傳送門

*方法:

1. "Ctrl + `"叫出控制板
2.輸入以下:
(Sublime2貼這個)
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

(Sublime3貼這個)
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

*執行安裝套件 Install Package

1. 路徑:[Preferences] => [Package Control]
2.輸入Install Package(快捷Ctrl+Shift+P)
3.輸入欲安裝套件的名稱~

安裝套件的推薦一覽-必裝推薦

emmet(以前的名字zen coding)

功能:用超簡短指令超快寫架構,堪稱神co,詳細指令自己上網google~
用法:試試看輸入以下指令後,按Ctrl+E轉換HTML架構
HTML:4t、HTML:5、link:css、style、script
ul+、ul>li*3、dt+
table+、table>tbody>th>td*3^^tr>td*3
form:get、form:post、input:t*3
div#name、div.name、div.one.two、div#name>li.item$$*4
div+p+p、div#name>p.one+p.two
select>option#item-${opt $}*5
div[title]
a[title="Hello world"]
div#name>p.title
p>{點擊}+a{這裡}+{繼續}
div#page>div.log+ul#nav>li*5>a
ul[data-bind="foreach:customers"]>li*4>span{內容 $$}+input[type="text data-bind="value:$$]

SideBarEnhancements 

功能:增強側欄功能
用法:側欄中文件右鍵點開就會多了許多東西,以前可以用F12預覽但在2014年的某一天我發現不能用了F12預覽了哭
(目前只支援3版,2版的要抓要另外找)

html snippet

基本提示字

JQuery

基本提示字

Css3

基本提示字

color highlighter

功能:色碼提示
用法:滑鼠游標點到有色碼的地方的反選色會出現對應色

AutoFileNme

功能:外部連結路徑提字(圖片、CSS、JS)

HTML-CSS-JS Prettify、JsFormat

功能:重新排版(縮排整理)文件
用法:
  • Prettify:需另外手動安裝node.js,然後確定node安裝的路徑跟sublime對應位置是對的(有時候會有x86的差別) 安裝好後,按Prettify Code就ok了!
  • JsFormat快捷:Ctrl+Alt+F

安裝套件的推薦一覽-延伸推薦

ConvertToUTF8

功能:解決 Sublime Text 3 預設不支援 Big5 與其他 CJK 編碼的問題
用法:轉換編碼、另存編碼
路徑:[File]=>Reload with Encoding、Set File Encording to=>選擇邊碼
備註:sublime本身沒有big5,通常文件我們都用utf-8,遇到轉存我是都用Dreamweaver或筆記本轉,所以其實也沒用到這個。

Theme-Soda

功能:面板的主題
用法:[Preferences] => [setting-Default],Ctrl+F搜尋"theme",約在270行修改
"theme": "Soda Light.sublime-theme"
"theme": "Soda Dark.sublime-theme"

Theme-Nexus

功能:帥帥的面板主題
用法:要在設定裡加一行程式碼才會換主題,自己去這裡看~(懶

goto css declaration

快捷:Win鍵+Alt+.(注音ㄡ那個)
對著HTML中的的class按"Win鍵+Alt+.(注音ㄡ那個)",就會打開css文件跑到該位置

BracketHighlighter

功能:刮弧改高亮度,方便檢查是否有漏

LiveReload

功能:存檔就即時更新,不用F5重新整理
用法:安裝完需於瀏覽器再安裝LiveReload

Syntax Hightlight for sass

sass文件支援

Bootstrap 3 snippets

功能:Bootstrap code外掛(有點像emmet)
用法:叫出Package control面版,輸入相關需求(ex.html、nav、bread)

關於套件的管理

*安裝套件方法2

直接將檔案丟到資料裡面就ok了!
裝過一次Sublime套件後,記得將檔案備份起來,以後換電腦的時候就直接摳檔案就好囉!
套件路徑: C:\Users\user\AppData\Roaming\Sublime Text 2(3版的話自己改名字)

*其他套件

其他套件可以直接去官網看,可以直接看排名高的~

*查看已安裝套件

按快捷叫出套件管理員Ctrl+Shift+P,輸入Package control:List packages查看清單

*移除已安裝套件

按快捷叫出套件管理員Ctrl+Shift+P,輸入Package control:Remove packages移除想移除的套件

其他未解決問題

//sublime3修改主題設定檔時,無法修改

沒有留言:

Instagram