じっくり解説!Sublime Text 2 プラグイン 「Goto-CSS-Declaration」
Sublime Text 2 での作業楽しいですね。
そんな作業をもっともっと楽しくするプラグインの紹介。
今回は、本当に便利なプラグイン「Goto-CSS-Declaration」です。
htmlを編集中に、ショートカットキー一発でcssの該当idやclass、要素にジャンプできるという、ほんとに便利なプラグインです。
例えば、htmlのid="head"のところにカーソルを合わせ、ショートカット一発で、cssの#headに飛んでいくことができます。
条件は、該当するcssファイルを開いておくことです。
classや要素の場合はcss中に何度も記述されますがそれでも大丈夫!ショートカットを押すだけで、次々とジャンプしてくれます。(行きすぎたら戻るショートカットもあります)
そして、なんと、scssにも対応です。Sass使ってる人にもとっても便利です。
では、インストールから始めましょう。
インストール
メニューバーの「Preferences」から、「Package Control」を選択します。
次に、「Package Control:Install Package」を呼び出します。
“goto-c”まで入力すると、「Goto-CSS-Declaration」が出てきますのでそれを選択してインストールします。
※Package Controlがインストール背れていない方は、
Sublime Text 2 に Package Control をインストールする
をご覧ください。
Windowsの方は、ショートカットの設定
Windows8で試したところ他のキーバンドと当たってしまっていました。
ここでは、Ctrl+Alt+. にcssに移動(移動後は次の候補)を割り当て、
Ctrl+Alt+, に前の候補を割り当てます。
メニューバーの「Preferences」から、「Key Bindings - User」を選択します。
設定ファイルが開きます。
初めての設定の場合には、中身はカラですので下記のコードを張り付けてください。
既に何か記述がある場合は、[の中の部分を、[に入れてください。
その時、行末の , に注意してください。
最終行以外には、区切りの , が必要です。
[ { "keys": ["ctrl+alt+."], "command": "goto_css_declaration", "args": {"goto": "next"} }, { "keys": ["ctrl+alt+,"], "command": "goto_css_declaration", "args": {"goto": "prev"} } ]
使ってみる
htmlファイル内で、idやclassをにカーソルを置き、
win : [ctrl] + [alt] + [.] ( >右向き不等号なので、ジャンプや進むを連想できます)
mac : [command] + [→]
どうですか?
これ、便利ですよね。
同じキーをもう一度押すと次の候補に飛びます。
何度も押して目的の場所に移動しましょう。
行きすぎても大丈夫、前の候補に戻るショートカットもあります。
win : [ctrl] + [alt] + [,]
mac : [command] + [←]
さらに楽しい Sublimeライフを!