Tweet
Tweet

Slide 1

Slide 1 text

工欲善其事 必先利其器 Sublime Text 入門 2013.05.30 by tureki

Slide 2

Slide 2 text

今日主題

Slide 3

Slide 3 text

Sublime 介紹 常用熱鍵 常用插件 提升效率

Slide 4

Slide 4 text

介紹前...

Slide 5

Slide 5 text

先看看我用過什麼編輯器

Slide 6

Slide 6 text

順序如下 Dreamweaver Notepad++ Textmate Sublime Text 其實沒用過很多～只是一用就用很久而已＝＿＝

Slide 7

Slide 7 text

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/

Slide 8

Slide 8 text

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/

Slide 9

Slide 9 text

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/

Slide 10

Slide 10 text

http://tutorialzine.com/2012/07/battle-of-the-tools-which-is-the-best-code-editor/

Slide 11

Slide 11 text

為什麼要改變？

Slide 12

Slide 12 text

如果一個工具能讓你執行一個動作加快1秒 而該動作一天要執行3600次

Slide 13

Slide 13 text

那麼一天累積下來 你將比在不使用工具情況下快了1小時 而1個月30天則快30小時

Slide 14

Slide 14 text

一切都是為了效率

Slide 15

Slide 15 text

Sublime Text 進入正題

Slide 16

Slide 16 text

Sublime Text 是什麼? 一個很有質感的跨平台程式碼編輯器。 快速，功能豐富，幾乎每種程式語言都支持。 它和TextMate一樣，背後有一個充滿活力的社區。 在強大的插件API幫助下，很多人開發了不少好用插件。 它可以運行在Linux，Windows和OSX。 最重要是它無限期試用。

Slide 17

Slide 17 text

Sublime Text 特色 [Goto Anything] 隨心所欲跳轉到任何文件位置 [Instant Project Switch] 即時切換Project [Plugin API] 強大的Plugin擴充API [Cross Platform] 跨平台 [Split Editing] 分割編輯視窗 [Multiple Selections] 多重選擇功能允許在頁面中同時存在多個光標。 [Command Palette] 強大的快捷命令"可以即時搜索到相應的命令， 按下Enter就可以直接執行"

Slide 18

Slide 18 text

檔案目錄 狀態 程式格式 程式間距 程式碼縮圖 Sublime Text 的佈局 分頁 程式碼

Slide 19

Slide 19 text

設定位置 Window Mac 編輯器，插件等所有的相關幾乎都會會在 Preferences內。

Slide 20

Slide 20 text

設定格式 幾乎所有的設定都是採用JSON格式。

Slide 21

Slide 21 text

設定權重 Default 系統或插件預設設定 User 使用者設定，可覆蓋Default的設定 所以User的優先權限比Default高

Slide 22

Slide 22 text

熱鍵/Hot Key 熟悉熱鍵，提升速度。

Slide 23

Slide 23 text

常用導覽熱鍵 Ctrl + P 快速開啟檔案 Ctrl + R 快速到達函示(function, class, etc...) Ctrl + G 快速到達某一行 Ctrl +Shirt+ P 打開快捷命令（搜索和執行命令都靠它了）

Slide 24

Slide 24 text

常用視窗熱鍵 Ctrl+pageup 上一個分頁 Ctrl+pagedown 下一個分頁 Ctrl+n 開新檔案 Ctrl+w 關閉檔案 Ctrl+Shirt+t 重開關閉檔案 Alt+Shirt+2 Alt+Shirt+3 Alt+Shirt+4 Alt+Shirt+.... 將視窗分割成二

Slide 25

Slide 25 text

常用編輯熱鍵 Ctrl+x 刪除行 Ctrl+d 選取單字（可重複選取相同的） Alt+F3 選取所有已選取的單字 Ctrl+Shirt+↑ 和上一行交換 Ctrl+Shirt+ ↓ 和下一行交換

Slide 26

Slide 26 text

書簽熱鍵 Ctrl+F2 標簽該行為書簽 Ctrl+Shirt+F2 清除書簽 F2 移動焦點到下一個書簽 Shirt+F2 移動焦點到上一個書簽

Slide 27

Slide 27 text

收合程式碼熱鍵 [Ctrl+K,Ctrl+1] 收合第一層 [Ctrl+K,Ctrl+2] 收合第二層 [Ctrl+K,Ctrl+3] 收合第三層(最多到9層)

Slide 28

Slide 28 text

不喜歡/不習慣 系統預設熱鍵？

Slide 29

Slide 29 text

更換熱鍵（Key bindings） Window Mac

Slide 30

Slide 30 text

換掉複製貼上 原本 更換後 打開Key bindings User 更改後儲存即可使用。不用重開編輯器

Slide 31

Slide 31 text

插件/Plugin 善用插件，將開發時間投入要開發的功能上。

Slide 32

Slide 32 text

安裝Package Control

Slide 33

Slide 33 text

如何安裝？ 1.按下CRTL＋` 2.貼上 import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond. net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation') 3.按下Enter 4.重開編輯器

Slide 34

Slide 34 text

為何裝它？

Slide 35

Slide 35 text

它可以讓你更方便安裝插件

Slide 36

Slide 36 text

1.按下Crtl＋Shirt＋p 2.輸入上Install 3.選擇你要安裝的插件 如何使用？

Slide 37

Slide 37 text

Package Control 常用命令 Install Package 安裝插件 List Package 列出你安裝過的插件 Remove Package 移除插件 Upgrade Package 更新插件 Add Repository 新增知識庫（找不到插件時用）

Slide 38

Slide 38 text

常用排版插件

Slide 39

Slide 39 text

Agliment 對齊變數

Slide 40

Slide 40 text

JsFormat JavaScript排版

Slide 41

Slide 41 text

Tag 它功能很多,但我只要它HTML排版和檢查

Slide 42

Slide 42 text

Tidy PHP 功能很多～但我還是只要排版

Slide 43

Slide 43 text

DocBlockr 輸入 /** 按下 Tab 注解產生

Slide 44

Slide 44 text

如果Package Control 找不到插件怎麼辦？

Slide 45

Slide 45 text

Add Repository 透過它來新增插件來源

Slide 46

Slide 46 text

如Github來源 複製來源到Repository，按下Enter即可

Slide 47

Slide 47 text

還有很多好用插件

Slide 48

Slide 48 text

請善用Package Control 或 Google

Slide 49

Slide 49 text

Snippet 將您的常用習慣給記錄起來。

Slide 50

Slide 50 text

什麼東西？

Slide 51

Slide 51 text

提升效率的東西

Slide 52

Slide 52 text

將自己重覆性寫的程式碼 給紀錄起來

Slide 53

Slide 53 text

如:for , if 輸入for然後按下Tab就會自動將for的程式碼代入，並且按下 Tab即可移動焦點。

Slide 54

Slide 54 text

新增Snippet Window Mac

Slide 55

Slide 55 text

簡單的hello範例 hello source.js

Slide 56

Slide 56 text

打開一張.js檔案 輸入hell,就能看到你剛簡單的Snippet了。 Enter

Slide 57

Slide 57 text

Sublime Text樣式 長時間對著有質感的編輯器，心情會好

Slide 58

Slide 58 text

安裝Theme 這樣就有很多樣式可以切換了。

Slide 59

Slide 59 text

因為手動切換樣式很麻煩

Slide 60

Slide 60 text

安裝Themr 善用Package Control Install 找不到就用Add Repository

Slide 61

Slide 61 text

切換目前擁有的版型

Slide 62

Slide 62 text

切換前

Slide 63

Slide 63 text

切換後

Slide 64

Slide 64 text

最後

Slide 65

Slide 65 text

師父引進門，修行在個人

Slide 66

Slide 66 text

好用的功能還很多

Slide 67

Slide 67 text

End