精通編輯器!Sublime Text 2 – Plugins 好用插件整理

這邊想介紹一些我自己有用的好用 Sublime Text Plugin 與用法

1. Package Control

要輕鬆地裝上各 Plugin 就必須要先裝 Package Control,不然就得一個個下載放到 Package 資料夾,是不是很麻煩,所以如果你還沒有就馬上去裝!
裝完就可以用 Command + Shift + P 輸入 install 選擇 Package Control: Install Package
就可以輕鬆安裝下面這些其他 Plugin 囉
詳細可以看我的這篇文章
https://chentsu.wordpress.com/2013/12/01/sublime-text-2-package-control/

2. Alignment

一個對齊用的 Plugin,對於程式碼有一定潔癖的人非常好用,
預設的對齊符號是 = ,快捷鍵是 Command + Ctrl + a
例如:

abc = 1;
a = 2;
bc = 3;

圈選後按 Command + Ctrl + a 後就變成

abc = 1;
a   = 2;
bc  = 3;

變得比較好看一點

也可以在 Preferences > Package Settings > Alignment > Settings – User 做客製化的設定

{
    "alignment_chars": ["=", "&", "|", ":"],
    "alignment_space_chars": ["=", "&", "|"],
    "alignment_prefix_chars": [
        "+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."
    ]
}

"alignment_chars": 要進行對齊的字符
"alignment_space_chars": 前面要空一格的字符
"alignment_prefix_chars": 加上 哪些prefix 也會對齊,例如 + 會讓 += 也進行對齊

3. Bracket Highlighter

顧名思義是用來 Highlight Bracket、Tag 的 Plugin,例如:[], {}, (), "", '', <tag></tag>,比較容易看到開關的 Bracket、Tag 在哪裡。

可以參考這張官方 Github 的圖:
687474703a2f2f646c2e64726f70626f782e636f6d2f752f3334323639382f427261636b6574486967686c6967687465722f4578616d706c65312e706e67

4. DocBlockr

用來產生註解的 Plugin

/**

按 Enter 就能自動生成註解區塊


(圖片來自官方 Github)

/**

按 Enter 就能自動生成函數、參數、變數註解區塊,Shift + Enter 是單行註解


(圖片來自官方 Github)

5. Git

版本控制是現在程式開發不可避免的部分,現下最普遍的 Git 也有 Sublime 的套件

Command + Shift + P 打開 Command Palette 輸入 git 就會有相關指令
螢幕快照 2014-01-08 下午2.20.16

6. Emmet

Emmet 是 快速開發 HTML 跟 CSS 時不可或缺的工具

div>(header>ul>li*2>a)+footer>p

寫下這串並按下 Tab就會自動展開成

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

不能不學的 HTML 快速語法之一

詳細的可以參考官方 Cheat Sheet
http://docs.emmet.io/cheat-sheet/

7. SideBarEnhancements

Sublime Text 2 內建的 SideBar 選項很少

螢幕快照 2014-01-08 上午11.26.55

只有 New File , Rename File, New Folder, Delete Folder, Find in Folder …
安裝了 SideBarEnhancements 以後,SideBar 功能會差了好幾個等級:
(本圖取自官方 Github)
687474703a2f2f646c2e64726f70626f782e636f6d2f752f34333539363434392f7469746f2f7375626c696d652f536964654261722f73637265656e73686f742e706e67

8. Prefixr

基於 http://prefixr.com/ 網站的 prefixr API 的 Plugin
可以把跨瀏覽器的樣式問題解決
例如:螢幕快照 2014-01-08 下午3.33.57

按下 Mac 的快捷鍵是 Command + Ctrl + X 就會展開成

螢幕快照 2014-01-08 下午3.34.09

9. SublimeLinter

包含各種語言 Lint 檢查器,可以進行語法檢查亮出錯誤和警告,各種不同 Lint 的設定可以參考 Github
JsLint or JsHint 必須安裝 JavaScript Engine - node.js
可以在設定打開儲存時跳出錯誤訊息

{ "sublimelinter_popup_errors_on_save": true }

在 OS X 上用來在 error 之間轉換的預設快捷鍵是:
next : Control + Command + E
prev : Control + Command + Shift + E

詳細可以參考 SublimeLinter 文件
另一個選擇是:Sublime-JsLint

10.JS Minifier

用 Google Closure compiler 來壓縮 JavaScript 檔案
預設的快捷鍵是 Ctrl + Alt + M
例如:
螢幕快照 2014-01-09 上午2.02.07
壓縮成下面這樣
螢幕快照 2014-01-09 上午2.02.28

11.JsFormat

把 JavaScript 給格式化(美化)的 Plugin,是基於 http://jsbeautifier.org/ 設計出來的格式化方法
預設快捷鍵是 Ctrl + Alt + F (不過我電腦有點問題我把它改成 Ctrl + Alt + J)

就可以快速的排版
螢幕快照 2014-01-08 下午3.46.19

變成:
螢幕快照 2014-01-08 下午3.52.42

12.Trailing Spaces

把檔案自動刪除多餘的空白(有時候空白會造成一些難以找出的錯誤)
快捷鍵可以到 Preferences > Key Bindings – User 設定一下

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

我覺得更好的用法是設定存檔的時候刪除多餘的空白
把 Preferences > Settings –  User 裡的這屬性設定為 true

{ "trailing_spaces_trim_on_save": true }

13. Hayaku

CSS 必學的快速方法之一:(也是打完按 Tab 就能展開)

oh     -> overflow: hidden;
h10    -> height: 10px;
ml-1.5 -> margin-left: -1.5em;
w50p   -> width: 50%;
cF     -> color: #FFF;
bg80   -> background: #808080;

很快很變態…. 有種無蝦米輸入法的感覺

14. Tag

用來自動關閉 HTML Tag
例如

<html>
<head></head>
<body></body>

在下面打一個

/

就會自動變成

</html>

15. hex to hsl

把 轉成 HSL 或 HSLA
全檔轉換的預設快捷鍵是 Shift + Ctrl + U
選擇部分轉換我自定快捷鍵為 Ctrl + Shift + H

#bada55 -> hsl(74, 64%, 59%)
rgb(75, 96, 6) -> hsl(74, 88% 20%)
rgba(117, 149, 9, 0.65) -> hsla(74, 89%, 31%, 0.65)

16. SublimeCodeIntel

強大的語法提示
支援語法:JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

codeintel

17. ColorHighlighter

把 CSS 顏色的部分選取時當做背景色
螢幕快照 2014-01-09 下午1.19.04

18. ChangeQuotes

把選取部分外包的單引號變雙引號、雙引號變單引號
我自己設的快捷鍵是 Super + Shift + C

螢幕快照 2014-01-09 下午2.41.59
變成
螢幕快照 2014-01-09 下午2.44.42

19.BrowserRefresh-Sublime

存檔的時候自動 reload 瀏覽器 Page
記得要做這個設定

[
    {
        "keys": ["command+shift+r"], "command": "browser_refresh", "args": {
            "auto_save": true,
            "delay": 0.5,
            "activate_browser": true,
            "browser_name" : "all"
        }
    }
]

精通編輯器!Sublime Text 2 – Plugins 好用插件整理” 有 8 則迴響

  1. 請教一下,安裝時的問題

    1.SideBarEnhancements 搜尋不到,是否Sublime Text2 已經不支援這個外掛?
    2.prefix 會404,網站好像不在了?有新的可以prefix的套件推薦嗎?

    1. SideBarEnhancements 現在只支援 Sublime Text3 了
      不過依然可以自己下載來放進 Packages 資料夾

      詳細可以看 Stackoverflow 這篇的最佳解答:
      http://stackoverflow.com/questions/21630440/no-more-sidebarenhacements-in-sublime-text-2

      下面有安裝在 sublime-text-2 的步驟
      1. 下載套件https://dl.dropboxusercontent.com/u/9303546/SublimeText/SideBarEnhancements.zip
      2. 打開 Preferences -> Browse Packages
      3. 把 SideBarEnhancements 解壓縮丟進去

      ———–
      prefixr 這個服務好像關了

      目前看到兩個東西
      1. Express Prefixr
      http://expressprefixr.herokuapp.com/
      這個好像沒有 sublime 上的套件

      2. sublime-autoprefixer
      https://github.com/sindresorhus/sublime-autoprefixer
      這個套件的文檔說必須要裝 node.js

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s