March 30, 2017

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
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




No comments:

Post a Comment