教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ]

又過完一個連假,進入了3月~不知道大家還記得上一回做的 Sublime Text 基本下載與安裝教學嗎?

需要複習的同學,可以點進上一篇教學再熟悉一下喔~

淺談 Sublime Text 的安裝設定及入門操作 – [ 上篇 ]

這次我們要延續上一次的進度,也就是已安裝好的「 package control 」套件,現在就要利用它,來進行其他外掛的安裝作業的教學。


【步驟一】安裝「emmet」外掛教學

開啟Sublime Text 之後,先利用快速鍵 :「 Ctrl + Shift + P 」(如果是 Mac 電腦請將 Ctrl 改為 Command 即可) 叫出「 Command Palette 」面板,

接著輸入「 ins 」 關鍵字做搜尋,會出現選項之中有一個「 Package Control : Install Package 」 ,點選它就沒錯囉!

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-12

* 小提醒 : 假如輸入「 ins 」卻搜尋不到的話,就表示之前的「 Package Control 」套件並沒有安裝成功,請再重新安裝一次吧。


接下來,會出現另一個跟剛剛 「 Command Palette 」長得很像的指令面板,這時就輸入我們這次要安裝的外掛名稱「 emmet 」 做搜尋 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-13

出現的第一個選項,就是這次要安裝的主角了~

「 emmet 」(也就是 Zen Coding )主要作用,是只要在 HTML 或 CSS 文件中,輸入簡化的語法 + [Tab] 鍵,就可以完成一段程式碼,所以建議大家一定要安裝,這可是幫助我們省時的最佳工具!

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-14

點擊之後,在安裝的過程中,大家可以注意一下畫面左下方,這邊會顯示目前所處理中的狀態:

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-15

等安裝完成之後,會出現如下方圖示的訊息視窗,直接按右上角關閉即可。

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-16


【步驟二】安裝支援中文的外掛 – 「 Convert To UTF8 」教學

由於 Sublime Text 預設並沒有支援中文,所以我們接下來要裝的是這個外掛 :「 Convert To UTF8 」。

安裝步驟除了外掛名稱不同以外,其他過程與[步驟一]幾乎是一模一樣,需重新叫出「 Command Palette 」指令面板,此時會發現不用自己輸入就已經自動跳出「ins」選項(真是方便!);再來也是只要輸入關鍵字,搜尋後就可找到並進行安裝囉 。

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-17

* 小提醒 : 每次要安裝一個新的外掛程式,步驟都是一樣的~所以建議大家要熟記這個呼叫指令面板的快速鍵,非常實用。


安裝完成之後,由於此外掛原本設定的中文自動辨識順序,簡體字會優先於繁體字,假如想要調整的話,請先至工具列 :

Preferences > Package Settings > ConvertToUTF8 > Settings – Default

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_1

將一整頁的原始設定全部選取並複製起來 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_2

接著,一樣點開工具列,但是這次要選擇的是下方「 Settings – User 」這個選項 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_3

貼上剛剛已複製的整頁文字,並將原本排在簡體字底下 BIG5 (繁中)的這一行,剪下改貼到第一行~

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_4

這樣就可以完成使用者的設定,讓中文辨識時繁體字會優先於簡體字了。

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_5

*小提醒 : 如果是整個檔案的編碼,想要更改成繁體中文或是其他語言選項,則可參考底下圖示。

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-17_6


【步驟三】開始建置一個 HTML 網頁教學

首先,大家可以在 Sublime Text 右下角的地方,找到一個快速選擇文件格式的小功能鍵 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-18

請從清單中搜尋並選擇「 HTML 」格式 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-19

接著,來體驗一下 「 emmet 」外掛的好用之處吧~

直接打上 「html:5」 (或是「!」也可以喔),然後按[Tab]鍵做轉換:

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-20

哇~ 馬上就自動產生出 HTML5 的網頁架構了!很有效率吧!

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-21


以此類推,只要下對關鍵字 + [ Tab ] 鍵,就可以產出相對應的語法;大家可以依照圖示先用 h1 做練習 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-22

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-23

再多打幾個標籤練習看看,同樣都能利用 [ Tab ]鍵輕鬆完成轉換唷~

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-24

(除了圖示有列出的這幾項之外,還有”ul”、”li”、”img”…等,大家都可以自己試試看)


* 小提醒 : 假如想要外部附加 CSS 樣式表,也可以利用 「 link:css」 + [ Tab ] 鍵 :

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - Sub-25

快速完成囉!(請記得將 css 更改成正確的檔名喔)

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-26


其他 Sublime Text 的功能補充教學:

除了上述的基本操作之外,

這邊再補充幾點可供大家參考的小撇步;

  1. 右上角的縮圖功能 – 只要利用滑鼠點擊拖曳,可以就目前開啟中的檔案,做快速的跳段。
    (當語法寫到落落長的時候就會備感貼心啊~)Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-27


  2. 畫面分割快速鍵 – 如需要左右開弓同時比對編輯時,可利用快速鍵 「 Alt + Shift + 2 」,或是參考下方的圖示的工具選單位置。(需要分割更多畫面,就將數字”2″替換成其他數字即可。)Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-28*小提醒 : 在 windows 使用快速鍵時,會發生無法使用鍵盤右側數字鍵的情形,所以請改用英文區上方的那一排數字。

  3. 開啟側邊欄(Side Bar) : 若同時有多個資料夾或是檔案時,可開啟側邊欄方便直接管理跟編輯。(快速鍵 : 「 Ctrl + K + B 」直接做開啟跟關閉的切換)Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-30


  4. 檢視/解除已安裝的外掛 : 如下方圖示,須利用「 Package Control 」功能。Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-31

  5. 解除安裝之後,如果也想移除原先系統已產生的相關設定檔,則需要自行手動刪除。路徑為 : 工具列 > Preferences > Browse Packages ,點進去之後,找到「User」這個資料夾,就會看到內存的各個設定檔囉。

Free Resource 好康報報  - 教學:淺談 Sublime Text 的安裝設定及入門操作 – [ 下篇 ] - sub-32


希望這次分享的 Sublime Text 基本介紹教學,能讓同學們在學習 HTML + CSS 方面,多了一種編輯器的選擇,只要多加練習、善用工具,一定可以增進自己的功力喔~   ^_^

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in Free Resource 好康報報 and tagged , , , , , , .

迴響已被關閉。