じっくり解説！Sublime Text 2 プラグイン「Goto-CSS-Declaration」 - フロントエンドとかPCとかスマホとか

Sublime Text 2 での作業楽しいですね。
そんな作業をもっともっと楽しくするプラグインの紹介。

今回は、本当に便利なプラグイン「Goto-CSS-Declaration」です。

f:id:fushimik:20130420170222g:plain

htmlを編集中に、ショートカットキー一発でcssの該当idやclass、要素にジャンプできるという、ほんとに便利なプラグインです。

例えば、htmlのid="head"のところにカーソルを合わせ、ショートカット一発で、cssの#headに飛んでいくことができます。
条件は、該当するcssファイルを開いておくことです。
classや要素の場合はcss中に何度も記述されますがそれでも大丈夫！ショートカットを押すだけで、次々とジャンプしてくれます。（行きすぎたら戻るショートカットもあります）
そして、なんと、scssにも対応です。Sass使ってる人にもとっても便利です。

では、インストールから始めましょう。

インストール

f:id:fushimik:20130420170301g:plain

メニューバーの「Preferences」から、「Package Control」を選択します。
次に、「Package Control:Install Package」を呼び出します。

f:id:fushimik:20130420170338g:plain

“goto-c”まで入力すると、「Goto-CSS-Declaration」が出てきますのでそれを選択してインストールします。

※Package Controlがインストール背れていない方は、
Sublime Text 2 に Package Control をインストールする
をご覧ください。

Windowsの方は、ショートカットの設定

Windows8で試したところ他のキーバンドと当たってしまっていました。
ここでは、Ctrl+Alt+. にcssに移動（移動後は次の候補）を割り当て、
Ctrl+Alt+, に前の候補を割り当てます。

f:id:fushimik:20130420170357g:plain

メニューバーの「Preferences」から、「Key Bindings - User」を選択します。
設定ファイルが開きます。
初めての設定の場合には、中身はカラですので下記のコードを張り付けてください。
既に何か記述がある場合は、[の中の部分を、[に入れてください。
その時、行末の , に注意してください。
最終行以外には、区切りの , が必要です。

[
 {
    "keys": ["ctrl+alt+."], "command": "goto_css_declaration",
    "args": {"goto": "next"}
 },
 {
    "keys": ["ctrl+alt+,"],  "command": "goto_css_declaration",
    "args": {"goto": "prev"}
 }
]