Sublime Text 3 套件安裝紀錄

這篇只是單純想記錄自己的 Sublime Text 3 安裝了哪些好用的套件，萬一哪一天需要重新安裝 Sublime 的時候可以回頭看，未來應該會持續發現好用的套件，也可以更新及寫下各個套件使用的小技巧，總之算是自己的 Sublime 小抄。

在網路上參考了許多前輩的教學文章，受益良多。其實我仍在摸索中，安裝的套件目前以前端網頁設計為主。

首先當然一定要安裝 Sublime Text 3，然後再安裝 Package Control，未來要安裝任何套件都要透過它。安裝步驟可以參考 The Will Will Web 保哥寫的文章，圖文並茂很詳細，我也有安裝不少個保哥推薦的套件。


以下是我安裝的套件：

• Material Theme：這個主題的配色看起來蠻舒服的，胡立 老師推薦的。
• ConvertToUTF8：可以解決 Sublime Text 3 預設不支援 Big 5 與其他編碼的問題。有些設定可以參考剛剛 保哥 的文章。
• Emmet：很強大的套件，懶人福音 XD 不過我還沒有完全摸透，還要再多做一些功課。Emmet Documentation 上有教學，留著慢慢看。
• HTML5
• CSS3
• jQuery
• HTML-CSS-JS Prettify：排版 HTML、CSS、JavaScript。需要先安裝 Node.js，並在 Sublime 上指定 Node.exe 的執行檔位置才能使用。
• SublimeCodeIntel：幫忙提示跟補全程式語言中的屬性或函式。
• SublimeLinter：檢查程式碼是否正確的套件，還需要個別安裝想要 linter 的程式語言。
• AutoFileName：幫忙提示文件檔名，如果專案比較大有很多文件、圖檔，是蠻方便的。
• BracketHighlighter：Highlight 程式中的大、中、小刮號。
• Color Highlighter：CSS 中的色票可以直接顯示出顏色。
• SideBarEnhancements：側邊欄的資料夾跟文件可以按右鍵直接編輯。

Apr/19/2017 新增

• Autoprefixer：利用 Can I Use 做為資料庫，自動加入 CSS 在不同版本瀏覽器上要增加的 prefix。

Apr/22/2017 新增：寫了一篇關於 Sass 在 Sublime Text 3 上的設定 - 在 Sublime Text 3 將 Sass 編譯成 CSS。

• Sass
• SCSS
• SASS Build
• SublimeOnSaveBuild

Apr/25/2017 大部分的套件都搞清楚功能，也有加上很簡單的簡介，除了 SublimeLinter 還沒完全搞懂，有找到這個教學：How to Use SublimeLinter 3 - Youtube。教學裡有說還要個別安裝自己要用的程式語言，這個套件才會發揮它的功能。可能之後再仔細研究。

Jun/14/2017 新增

• SublimeLinter-contrib-semistandard：這個套件是配合 Frontend Intermediate Course 的作業十而安裝的，選擇 semistandard 這套來檢查我 JavaScript 程式碼有沒有符合標準。同樣也必須利用 npm 安裝 semistandard：

npm install -g semistandard