我安裝了Sublime Text,然後呢?

  • Prototype Hacker Hannah Lin #hannahpun
  • Dec 12
  • Tools

網站開發的第一堂課 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+`,並貼上語法

 

2. 按enter,等個五秒會看到顯示成功(安裝sublime text2的話要重新啓動才會成功)
sublime

 

安裝Plugins

1. 先按commend+shift+p(叫出Package Control),接著輸入install,再按Enter

sublime2

 

2. 接著輸入你要安裝的plugin名稱,按Enter之後,下面狀態列會顯示安裝成功

sublime3

 

看看你裝了哪些plugins

先按commend+shift+p(叫出Package Control),接著輸入list,按Enter

sublime4

 

移除plugins

1. 先按commend+shift+p(叫出Package Control),接著輸入remove,按Enter

sublime5

 

 

2. 這時會列出你安裝的所有外掛,選擇你想刪除的外掛,按Enter

sublime6

 

積下來開始介紹常用Plugins囉

 

Emmet

Emmet 官方文件

Emmet是每個前端工程師必備安裝的外掛了
只要按了特定的字+tab 就自動幫你生成html碼

在css裡也一樣好用,是不是超方便!

 

SublimeTmpl

讓你可以在folder快速新增空的檔案

點了html就會生一個空的html給你,不需要在自己慢慢打囉
他還有提供空的js,css php…等
sublime7
sublime8

 

HTMLBeautify

幫你把html結構化整理乾淨

有時貼別人程式碼進編輯器就會變亂
HTMLBeautify

這時按Command-Option-Shift-F,程式碼就會瞬間變整齊

HTMLBeautify2

 

Js​Format

針對js的結構化,把亂掉js弄乾淨.快速鍵是Command+alt+f

 

其他快速鍵

ctrl+/ 註解
ctrl+L 點到一個字幫你選一整行

quick2

ctrl+Shift+D 複製光標所在整行
commend+ ] 全部往後移
commend+ [ 全部往前移
ctrl+G 找行數
alt+commend+2 一個視窗變兩個視窗

quick

 

大家有什麼必裝不可的plugins也可以在下面留言交流喔

  • http://matrixki.com Mike Ko

    實用!

  • Fan Fan Chang

    整理的很清晰 讚謝;但之前裝了失敗請問要如何卸乾淨再下一次?謝呦

    • Hannah Lin

      請問你plugin安裝失敗還是sublime呢
      plugin的話可以進sublime左上角的preferences/browse packages
      就可以難到之前安裝的plugins
      選擇安裝失敗的plugin file 刪掉即可