Sublime Text 3 操作與 Emmet 套件安裝及使用

緣起

最近參加了一門課程: 網頁實戰入門 (HTML + CSS); 想體驗一下前端版面開發者的流程.

發現前端版面開發者常用的工具 (Sublime Text), 與傳統工程師的工具 (Visual Studio) 著實有很大的不同; 由於對 Sublime Text 實在很不熟悉, 故第一天課後就趁著還有一點記憶的狀況下, 把東西記下來, 以免日後忘記.

內容大綱如下:

Subliem Text 3的安裝
Package Control的安裝
Emmet套件的安裝
Subliem Text + Emmet 使用方式
常用Emmet縮寫語法 (Abbreviations Syntax) 範例
延伸閱讀(2018.07.16): 如何進行 git (github) 版控
延伸閱讀(2018.07.20): Visual Studio Code 如何使用 Emmet 及 Bootstarp 4 snippet/li>

Subliem Text 3的安裝

由 http://www.sublimetext.com/3 下載後直接安裝即可

Package Control的安裝

打開 Console 視窗 (hotkey: Ctrl + ` (註: 這是鍵盤左上角, 跟 ~ 同一個鍵; 不是單引號); 或如下選單操作)

安裝 Package Control (這個有點類似 Visual Studio 的 Nuget 扮演的角色)

參考以下連結顯示的指令列, 貼到最下方的 Console 列, 再按 [Enter]

https://sublime.wbond.net/installation

Emmet套件的安裝

安裝 Emmet 套件, 這個套件有不少功能, 例如: 只打幾個縮寫, 就可以延伸出多列的 Html 指令, 範例可參考 https://docs.emmet.io/

按 Ctrl + Shift + P 會叫出 Package Control 管理員

輸入 Emmet 作搜尋, 但因為筆者的環境已安裝, 所以沒有呈現出來. 可參考

https://sublime.wbond.net/packages/Emmet , 有 How to Install 的說明

Subliem Text + Emmet 使用方式

執行 Subliem Text 3

如果有已存在的 Project Folder, 可以選 [Open Folder]; 否則也可以選 [New File ...], 以建立新的檔案

右下角有一個小功能鍵, 要注意; 若為 HTML 檔案, 按下後, 選取 HTML

輸入 html:5, 直接按 [tab], 會以整個 HTML 5 的骨架取代

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

輸入 link:css, 按 [tab], 會產生以下結果:

如果有需要左/右 2 邊同時編輯比對 (例如: HTML, CSS) 時, 可以選擇 Column: 2 的 layout 方式

常用Emmet縮寫語法 (Abbreviations Syntax) 範例

div*3
ul>li*3 //代表 <ul> 包含 3 個 <li>
ul>li*3>a //代表 <ul> 包含 3 個 <li>, 而 <li> 裡面, 又包含 <a>
lorem //產生一段本文

延伸閱讀 (2018.07.16) : Git (GitHub) 的整合

新增加一篇: Sublime Text 3 與 Git (GitHub) 版控機制的整合

延伸閱讀 (2018.07.20) : Visual Studio Code 如何使用 Emmet 及 Bootstrap 4

在 Sublime Text 3 當中很好用的 Emmet 套件, 在 Visual Studio Code 已是內建的, 不需再額外安裝 ( https://code.visualstudio.com/docs/editor/emmet ); 至於 Bootstrap 4 的 code snippet, 則必須額外安裝一個 Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets 的套件, 安裝完成, 就可以使用 b4- 開頭的縮寫, 以展開 bootstrap 4 的 snippet; 使用 fa- 的縮寫, 輸入 font awesome 的 snippet

任可的縮寫, 都會有預覽, 得知展開的結果

輸入 b4- 會出現 intelli-sense

font awsome

作了一些修訂及註解後, 置於 Gist 上面 ( https://gist.github.com/jasper-lai/77d4fe95c10c9835dd4913d0f63cce73#file-vs01-html ), 該頁面的執行效果如下圖.

總結

這套工具, 是筆者在 Visual Studio 之外, 所接觸的第一套撰寫 HTML + CSS 的好工具.

參考文件

https://www.sublimetext.com/3 : Subliem Text 3 的下載網址
https://sublime.wbond.net/installation : Package Control 的安裝
https://sublime.wbond.net/packages/Emmet : Emmet 套件的安裝
https://docs.emmet.io/abbreviations/syntax/ : Emmet 縮寫語法範例
https://blog.miniasp.com/post/2014/01/07/Useful-tool-Sublime-Text-3-Quick-Start.aspx Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學 (by Will 保哥)

補充

與 Visual Studio 有一些可以互通的方式, 以下只列出連結, 有興趣可以自行研讀

在 Visual Studio 叫用 Subliem Text 編輯檔案

https://stackoverflow.com/questions/18450402/moving-from-visual-studio-to-sublime-text

傑士伯的IT學習之路

2014年8月25日星期一