Sublime Text 2に登録できるCSSのスニペット集が配布されてます

テキストエディタはSublime Text 2
が最高に自分に馴染むので去年、正式
に乗り換えたんですが、Sublime Text
2に登録出来るスニペットのCSSのが
沢山配布されていたのでご紹介。

テキストエディタの個人の好みはOSと同じくらい布教活動が盛んな、宗教染みた部分が垣間見えるので、~~正直言って心底ウザい~~言葉にするだけで不快に感じる方もいるかもと思ってからTwitterで言ったり記事にしたりとかにはしないようにしてるんですけど・・・（宗教が悪いと言ってるわけじゃないですよ。押し付け感や比較対象を貶す行為が嫌なだけです。）

折角なのでスニペットの紹介ついでに簡単にご紹介します。あ、もちろんWindows版もMac版もあります。僕はWindowsユーザーなのでその目線で書いていきますね。

Sublime Text 2

エディタは1に起動スピード、2に使いやすさ、カスタマイズ性もあると嬉しい、といった視点で選ぶので、さくさく起動、メモリもさほど食わず落ちることもほぼ無い、便利なパッケージ機能、テキストエディタで簡単にスニペットを登録できる、などの理由からSublime Text 2に落ち着いてます。

折角なので軽く機能をご紹介。

手軽に追加可能なスニペット

Sublime Text 2はトリガーとなる文字を入力してtabを押すだけで登録したスニペットが展開されます。

例えば<header>と書きたければ、headerと入力してtabを押すだけで

<header></header>

上記のように登録したコードが展開されます。

このスニペットの登録もエディタ内で簡単に追加可能です。↓

tool→New snippetでスニペット用のテンプレートが呼び出されますので登録したいスニペットコードを書いて保存すればフォルダ内にファイルが追加されます。

<snippet>
	<content><![CDATA[$1:active {
	$2
}

]]></content>
	<tabTrigger>act</tabTrigger>
    <description>CSS - :active</description>
    <scope>source.css</scope>
</snippet>

スニペットは上記のような感じで登録できます。

<content>は実際に展開されるコード。
<tabTrigger>はスニペットを呼びだす文字
<description>はスニペットの説明
<scope>はソースの種類です。PHPとかHTMLとか。

これで登録すると、「act」と打ってtabを押せば

:active {
	
}

という感じで展開されます。

↑ 登録したスニペットはコマンドパレット(tools→Command palette)から確認出来ます。

Package Controlが便利

パッケージを管理するPackage Controlが凄く便利です。これを入れれば様々な機能を手軽に自動で追加出来る様になります。

導入方法です。

まずSublime Text 2を起動してCtrl+@でコンソールを立ち上げます。

↑ んで、公式サイトに書いてあるコードをコンソールに貼り付けてEnter押せばインストール完了です。再起動すればPackage Controlが使えるようになります。

↑ 使えるようにしたらCtrl+Shift+pで検索窓を立ち上げてinstallと入力すればPackage Control: Install Packageに絞り込んでくれるのでそこから使いたいパッケージを探すだけ。インストールも削除も楽々です。尚、インストールしたパッケージを使う前に再起動する必要が有ります。

どんなパッケージがあるかは、Sublime Text Packageとかでググって下さい。以前、Nettuts+でもまとめ記事があったのでここから試してみるのもいいんじゃないでしょうか。また、パッケージのコミュニティも存在しますので入れたパッケージの挙動が怪しいときは見てみるといいかもしれません。

テーマも色々

テーマも色々あるので黒い画面が怖い方でも安心です。

Replaceとかもできるよ

置換機能も当然あります。Find→Replaceでもいいし、Alt+3で同じ文字列を選択出来るのでそのまま入力すれば一括で文字列を変更できます。

他にもいろいろ素敵な機能が備わってるんですけどもう面倒になってきたので終わりにします。好きなの使えばいいと思う。エディタ変えたから技術があがるわけじゃないですしね。僕も特にSublime Textをオススメしてないです。