SublimeTextと言えばコーダーやWeb系プログラマーに人気のコードエディター。開発も盛んに行われ、非常に多くのパッケージ（便利なプラグインみたいなもの）が公開されています。
最近僕もCoda2からSublimetext2へ乗り換えたのですが、コーディングをメインに行う人ならやっぱりこっちかな〜と思います。ただ、できることが多くて、慣れるまでは普通のテキストエディターとの違いがなく別に乗り換えるほどでもないかと思いがち。
そこでこの記事では人気の高いコードエディターを使いこなすためのテクニックを厳選してお届けしたいと思います。
SublimeTextを使いこなす10のテクニック
1.選択範囲の使い方
コーディングの際に修正箇所が出てくるのはよくあることです。これまで使っていたエディターでは置換機能を使って書き換えていましたが、ちょっとした単語の変換などでは逆に効率が悪く感じてました。
SublimeTextではそんな置換機能も大変便利になっています。特に便利なのは選んだ範囲を同時に修正できるところ。普通のエディターなら１つずつ修正する必要があるのですが、SublimeTextなら同時修正可能。選択範囲には以下のようなものがあります。
- command + D : 単語の選択、command押したままdを連打すると同じ単語を選択
- command + L : 列の選択、command押したままLを連打で次の列も選択
- command + クリック : 任意の場所にカーソルを置く、異なる単語を同時に修正可能
2.Emmetコーディングの使い方
Emmetとは特定の記述ルールに従って短いコードを書き、それを展開して使うもの。HTMLとCSSに対応しており、例えばmb10と書いてTabを押すと、margin-bottom:10px;と出力されます。
このように全て記述すると長くて大変なコードを短縮して書けるようになるのが大変便利。コード一覧は公式サイトをチェックして下さい。EmmetをSublimeTextで使うにはTools->Command PaletteからEmmetのパッケージをインストールするだけです。
CSSの方はスニペットの数が多く、覚えるのが大変でHTMLの展開のみ使用していましたが、最近はCSSでもよく使うようになっています。一旦覚えればすごく便利。
3.CSSのソートの使い方
CSSの記述順って気をつけていても、ついつい適当になってしまいがち。SublimeTextではソートしたい範囲を選択してF5を押すだけでアルファベット順にソートできます。
アルファベットじゃちょっと・・・というときはCSSCombというパッケージをインストールしましょう。CSSCombを使えばソートの細かい設定が可能になります。CSSCombでソートするには、ctrl + shift + c を押せばOK。CSSを見やすく整理したいときに是非。
4.パッケージコントロールの使い方
SublimeTextの醍醐味と言えばやっぱりこれ。豊富なプラグインをインストールすることで標準にはない様々な機能を追加することができます。
パッケージコントロールをインストールするにはPackageControlのページにアクセスし、インストールしたSublimeTextのバージョン（２か３）を選んでコードをコピーします。
その後SublimeTextを起動し、conrol + ‘ もしくはview->Show Consoleからコンソールを起動。コンソールの入力欄にコピーしたコードを貼付けてEnterを押せば完了です。
プラグインをインストールするには、command + shift + p かTools->CommandPaletteでコマンドパレットを開きinstallと入力。一覧に出てくるinstall Packageを選びます。
次に出てくる入力欄でインストールしたいパッケージ（プラグイン）名を入力し、出てきた候補のなかから必要なものを選んでインストールします。
5.SublimeTextのスニペット機能の使い方
よく使うコードのパターンを登録できます。また、HTMLのときだけ、PHPのときだけのようにシンタックスを指定してスニペットを使用することも可能。Wordpressの独自タグやコメントの挿入などでよく使ってます。
登録方法はとっても簡単。view->new snippetでスニペット設定画面を出します。
スニペットで設定できるのは以下の通り。
- content : スニペットの中身、${}で囲むとプレースホルダーになる
- tabTrigger : スニペットを展開するためのトリガーを設定
- scope : どの言語で使用するかを設定
実際に作ってみるとこんな感じ。CSSではよくmediaクエリを使うのでスニペットに登録してみました。プレースホルダーを２カ所指定し、トリガーも設定しています。scopeにはCSSとSCSSを指定。scopeの文字列は言語ごとに違うのでPreferences->Brows Packagesからパッケージを開き、各言語パッケージのtmLanguageファイルにあるstringを調べます（一番下にある）。
また、スニペットのファイル名は何でも良いですが、拡張子に必ずsublime-snippetと入れるようにします。
6.CommandPalettの使い方
CommandPalettではコマンドの入力でファイルのリネームやスニペットの呼び出しなど大抵のことができるようになっています。こちらもEmmetと同じで一度覚えると大変便利な機能。
まず、command + shift + P でコマンドパレットを呼び出します。入力欄にrenameと入力するとファイルのリネームができます。その他よく使う機能はこんな感じ。
- duplicate : ファイルの複製
- delete : ファイルの削除
- move : ファイルの移動
- syntax : ファイルのシンタックスを変更
- snippet : スニペットの呼び出し
7.セレクター検索機能の使い方
この機能はHTMLやCSSを編集する際によく使います。command + R を押すと入力欄が出てくるので、文字列を入力します。この機能を使えば目的のセレクターに素早くアクセスできます。
8.SublimeTextのアイコンを変更する方法
いつも同じアイコンで飽きてきた方におすすめ。SublimeTextなら簡単にアイコンを変更することができます。
アイコンはGoogle検索でも良いですが、おすすめはDribbble。ここでsublimetextやicnsで検索するとハイクオリティなアイコンがたくさん出てきます。
ダウンロードしたアイコンは拡張子が.icnsになっていることを確認。それ以外の場合はiConvert iconsで変換できます。
アイコンを変更するにはアプリケーション->sublimetext(アプリ名)->右クリックからパッケージの内容を表示->Resourcesにある.icnsファイルを新しいものに置き換えるだけ。このときファイル名はスペースも含めて全く同じものにします。
9.SublimeTextのテーマ変更する方法
デフォルトのデザインも気に入ってるのですが、Sublimetextではテーマを変更することも可能。手順は以下の通りです。
- CommandPletteのinstallからテーマパッケージをインストール
- Preference->Settings – Userでセッティングファイルを開く
- “theme”: “テーマ名.sublime-theme”と入力
10.SublimeTextを日本語化する方法
英語のままだとどこに何があるかわからない！という方は日本語化してみましょう。パッケージをインストールすることで簡単にできます。
- CommandPaletteのinstallからJapanizeをインストール
- インストール後にでてくる説明文通りにファイルを移動
まとめ
CodaからSublimeTextに切り替えた理由はCodaよりもコーディング向けの機能が揃っているというところです。とくに選択範囲の機能はものすごく使いやすいですね。
さらに細かい環境設定やカラースキームの変更方法、もっと便利なパッケージを知りたい！という方はこちらの書籍がおすすめ。最近出版されたばかりで、SublimeTextの最新版である3にも対応しています。
