最近流行のSublime Text 2をいろいろ設定してみました。
ダウンロード
ユーザー設定
Sublime text2class=kbd>→Preference→Settings Userを選択し、以下のコードをコピペ。
{
"color_scheme": "Packages/Color Scheme - Default/Solarized (Light).tmTheme",
"draw_white_space": "all",
"font_size": 16,
"highlight_line": true,
"ignored_packages":
[
"Vintage"
],
"line_padding_top": 5,
"bold_folder_labels": true,
"scroll_past_end": true,
"disable_formatted_linebreak": true,
"tab_size": 4,
"draw_minimap_border": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}Package Controlをインストール
View→Show Consoleを選択し、下部にある入力エリアに以下のコードを実行し、Sublime Text 2を再起動。
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())Packageをインストールする
command + Shift + pで「Command Palette」を開き、installと入力。
「Package Control:Install Package」が絞り込まれるのでリターンキーで決定。これでパッケージを検索出来るようになります。インストールしたパッケージは以下。
ちなみにいらないパッケージ消すときは、command + Shift + pで「Command Palette」を開き、removeと入力。「Package Control:remove Package」が絞り込まれますので、そこからインストールしたパッケージを選択し、リターンキーで削除できます。
インストールしたパッケージ
| Emmet(PyV8) | 次世代ZenCoding。セットでPyV8というパッケージもインストールされます。 |
|---|---|
| Emmet CSS Snipets | 次世代ZenCodingのCSS版。css、less、scss、sassの拡張子を認識。シンタックスはCSSで行います。 |
| Bracket Highlighter | タグの開始タグと閉じタグをハイライト表示 |
| AutoFileName | imgタグのパス入力時にファイル名を補完 |
| WordPress | WordPressのコード補完。でもなんか良い感じに使えていない気がする。 |
| jQuery | jQueryの自動補完。シンタックスにjQuery（javascript）が追加されます。要素を全入力してtabキーで発動。 |
| html5 | html5の自動補完。シンタックスにHTML5が追加されます。 |
| sublimecodeintel | 通常ctrl+spaceで出す入力候補をオートコンプリートにする |
| CSSComb（※後述） | 記述したCSSプロパティを一定のルールに並び替える。但し、純粋なCSSでしか反応しません。（scss、sassなどでは無反応） |
| Browser Refresh（※後述） | ブラウザで対象のファイルを開いておき、修正後、実行することで、ブラウザが再読み込みをしてくれます。 |
一部についてキーバインドを変更
Browser Refresh、CSSCombについて、コマンドが微妙に違っていてややこしかったので、ctrl+shift+*に変更しました。
Sublime text2→Preference→Package Setting→css Comb→Key Binding – Userを選択し、以下のコードをコピペします。
どうやらPackage Settingの中で、Key Binding – Userは共通化されているようですので、1つのファイルに両方のキーバインド設定を記述すればよいみたいです。
[
{
"keys": ["ctrl+shift+r"], "command": "browser_refresh", "args": {
"auto_save": true,
"delay": 0.0,
"activate_browser": true,
"browser_name" : "all"
}
},
{
"keys": ["ctrl+shift+c"], "command": "css_sorter"
}
]最後に
Sublime Text 2はプラグインが非常に便利なのですが、機能が重複することによって微妙に挙動が変わったりするのがちょっとややこしいかもしれません。
例えば、SASS、SCSSシンタックスのパッケージなども入れたかったのですが、内部に独自のスニペットをもっているためなのか？、Emmetと記述方法が変わったりして、ちょっとややこしかったです。入れる時は、何をインストールしたら挙動が変わったのかなどをメモしながら調整した方がいいかもしれませんね。