2013-04-11 23:00

Sublime Text 2を使おう(2)

前回の続きです。
前回までに

 1. ビジュアルがかっこいい
 2. カスタマイズや拡張が簡単

を記しました。
前回はこちら ⇒ Sublime Text 2を使おう(1)

今回は、

 3. Packageの種類が豊富
 4. プロジェクトの管理ができる

を進めます。

3. Packageの種類が豊富

私が使用しているPackageです。

Package名 機能
BracketHighlighter タグの開始タグと閉じタグをハイライト表示
Browser Refresh Sublime Text2を開いたままcommand + shift + rでブラウザ更新  
ConvertToUTF8 Shift_JISやEUC等、UTF-8以外の文字コードを扱う
CSS Snippets CSSの自動補完
CSScomb shift + control + cでCSSのプロパティを自動整列
ERB-Sublime-Snippets   ERBタグの簡易入力支援
HTML5 HTMLの自動補完
jQuery jQueryの自動補完
Sass Sassの自動補完
SCSS Scssの自動補完
SideBarEnhancements Side Barの右クリックに機能を追加
sublemacspro キーバインドをEmacs風に
SublimeLinter HTML,CSS,JSのエラーをリアルタイムで指摘
Tag HTMLをoption + control + fでフォーマット
Theme-Soda お気に入りのColor Theme
ZenCoding ZenCodingの実装&自動補完

Emacsを使っていた私にはsublemacsproは手放せません。

sublemacsproのキーバインドについてはこちら
ST2-sublemacspro-のキーバインド一覧 for Mac

当然、日本語入力するのでConvertToUTF8も必須ですね。

他にもたくさんの便利なPackageがあるので色々探してみてください。

4. プロジェクトの管理ができる

Sublime Text 2の画面の左側にサイドバーがあります。
サイドバーの表示/非表示の切り替えは、

command + k , command + b
または、
メニューバー View > Sidebar

です。

Finderから任意のディレクトリをサイドバーにDrag&Dropすると、、、

Sublime Text 2 - Sidebar

という感じでサイドバーでプロジェクトの管理ができます。

けれど、これだけだとSublime Textを起動し直したときに、サイドバーがクリアされちゃう。

ので、メニューバー > Project > Save Project As ... でProjectを保存します。

保存ダイアログが出るので名前を付けます。
保存するファイル名は「#######.sublime-project」といったように拡張子を「.sublime-project」にすること。

場所はどこでもおけ。

こうして保存しておけば、メニューバー > Project > Open Project ... で保存したProjectをサイドバーに呼び出すことができます。
Projectを切り替えて使うこともできますね。

参考にさせて頂いたサイトです♪
Mnemoniqs Web Designer Blog

ありがとうございました!