跳至主要內容

如何帥氣的使用Sublime Text 3

st3
這是我目前的開發環境XD

其實我剛開始進入前端領域時是相當不習慣的,第一次做網頁是用Dreamweaver,直接用編輯器寫網頁對我來說真的很困難,但是經過了四個月的時間,現在打開Dreamweaver反而不會用了。好吧,今天我來分享一下幾個讓自己寫程式時看起來比較帥的好東西。

1. Package Control

相關網址:https://packagecontrol.io/

為了讓Sublime Text可以用快速的方法裝上外掛,一定要把Package Control裝起來
(2016-09-25更新:從Sublime Text 3124開始,安裝後會有一鍵安裝Package Control的功能)

如果需要手動安裝,請參考安裝說明:
https://packagecontrol.io/installation

2. HTML-CSS-JS Prettify

相關網址:https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

這東西很好用,有時拿到別人亂糟糟的code或是自己不小心寫code沒在排版的,超方便的一鍵排版外掛就是這個拉!不管是html、css、js檔都可以幫你排的票漂亮亮喔!在安裝這個外掛前,電腦裡要先裝好Node.js,然後就直接用Package Control尋找外掛:

  • 在Sublime Text裡鍵入 Ctrl+Shift+P 或 Cmd+Shift+P 叫出Package Control
  • 輸入 install, 選擇 Package Control: Install Package
  • 輸入 prettify, 選擇 HTML-CSS-JS Prettify

3. Color Highlighter

相關網址:https://packagecontrol.io/packages/Color%20Highlighter

這個外掛可以直接在編輯器裡顯示出色碼對應的顏色,算是輔助型工具,我會搭配Sip來用。

4. 佈景主題相關

Material Theme

相關網址:https://packagecontrol.io/packages/Material%20Theme

這個是我今年使用的佈景主題,因為Seti UI壞掉惹所以才換,但是在Search模式時按鈕會怪怪的,只要下方區塊有彈出其他功能,按鈕有時會出現bug。

Theme – Brogrammer

相關網址:https://packagecontrol.io/packages/Theme%20-%20Brogrammer

這個是根據下載量推薦才裝的,感覺還可以,我裝只是以防Material的按鈕bug

Seti_UI

相關網址:https://packagecontrol.io/packages/Seti_UI

其實預設的Sublime Text佈景主題就還蠻耐看的了,但是這次介紹的Seti_UI可是連檔案圖示都很精美喔!
(2016-09-25更新:已經沒在用這主題了,但還是先留著)

  • 在Sublime Text裡鍵入 Ctrl+Shift+P 或 Cmd+Shift+P 叫出Package Control
  • 輸入 install, 選擇 Package Control: Install Package
  • 輸入 seti, 選擇 Seti_UI

安裝完成之後記得在個人設定那邊導入這個佈景主題:

選單 Preferences -> Settings – User

{
  "theme": "Seti.sublime-theme",
}

其實他還有一些layout設定可以調整,就自己去官網找範例囉!

分類:工具網頁開發

搶先發佈留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

由 Compete Themes 設計的 Author 佈景主題