TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

Sublime Textの基本機能(検索・置換、マクロ機能、スニペット)

お久しぶりです。HTMLコーダーの加藤です。 GWも終わり、暑い日が続いてますね。 昼は暑いのに夜はけっこう寒かったりで、服装選びに少々困っている日々です。

ではさっそく本題に入ります。 9ヶ月くらい経ってますが、前回はSublime Text(以下ST)の簡単な概要とメニューのEdit・Selection・View・Gotoについてご紹介しました。 今回は続きということで、Find(検索・置換)マクロ機能スニペットについてご紹介します。 最近Atomがすごい!という記事が出回っていたりVisual Studio Codeが出た!と聞いたりして、あれ?STの時代終わった?とか一時思いましたが、まだ乗り換えるほどではなかったので気にせず書いていきます。

目次

  1. 検索・置換
  2. マクロ機能
  3. スニペット

検索・置換

まずは非常によく使う検索・置換についてです。メニューのFindがこれにあたります。

Find… ファイル内の検索

Ctrl(Cmd) + F

※ショートカットキーは()内がMac。 メニューのFind > Find…で、STウィンドウの下部に検索用ボックスが表示されます。 find まず検索する文字列は中央の入力欄に入力して使うわけですが、直接入力する他に、入力欄内右側の下向き矢印を押すと検索キーワード履歴を利用することもできます。 Find > Use Selection for Find あるいはショートカットキー Ctrl(Cmd) + E で選択状態の文字列を入力欄に入れることもできます。 STでは検索ボックス内左側の各ボタンで検索オプションを付けることができます。 ボタンの機能は左から、
  • Regular expression 正規表現を利用する
  • Case sensitive 大文字小文字を区別する
  • Whole word 完全一致のみを検索する
  • Wrap ファイルの最後まで検索したらファイルの先頭に戻って検索する
  • In selection 選択範囲内を検索する
  • Highlight matches 検索キーワードにマッチした箇所をハイライトする
検索の際にはどのボタンがチェックされているか一応確認した方が良いかもしれません。 また、入力欄の右のFindを押すと次の候補、Find Prevは前の候補、Find Allを押すとマッチするキーワードが全て選択されます。

Replace… ファイル内の検索・置換

Ctrl + H (Cmd + opt + F)

Find > Replace…で置換用のボックスが下部に表示されます。 検索ボックスの2段目に置換用の入力欄が追加された形です。 入力欄の右のReplace Allを押せば一括置換も可能です。 Find > Use Selection for Replace あるいはショートカットキー Ctrl(Cmd) + Shift + E で選択状態の文字列を置換用の入力欄に入れることもできます。

Find in Files… 複数ファイル間の検索

Ctrl(Cmd) + Shift + F

メニューのFind > Find in Files…をクリックすると開きます。 find_in_files 検索・置換の他に2段目にWhereという入力欄が表示され、ここで検索対象ファイル・フォルダを指定します。 直接入力しても良いですし、入力欄の右側の「」から検索対象を選択することもできます。 複数のフォルダーを指定することもできます。現在開いてるファイルと特定のフォルダの中から検索といったこともできます。 3段目のReplaceで一括置換も可能です。 検索ボックス内左側のボタンの機能は左から、
  • Regular expression 正規表現を利用する
  • Case sensitive 大文字小文字を区別する
  • Whole word 完全一致のみを検索する
  • Show Context 合致部分の前後の行を表示する
  • Use Buffer 検索結果を別タブ(Find Resultsというタブ)で表示する

ページトップへ戻る

マクロ機能

STにはマクロ機能もデフォルトで備わっています。 自分が行った操作(コマンドの組み合わせ等)を記録しておける機能です。 もちろんショートカットキーを割り当てることもできます。

Record Macro/Stop Recording Macro マクロの記録を開始・終了する

Ctrl(Control) + Q

メニューのTools > Record Macro またはショートカットキーCtrl(Control) + Qでマクロの記録を開始します。 ここから記録終了までの操作がマクロとして記録されます。 Tools > Stop Record Macro かもう一度Ctrl(Control) + Qを押すとマクロの記録を終了します。 保存しない限りマクロは直近の1つしか記録できません。また、保存せずにSTを閉じると記録したマクロは消えるので注意が必要です。

Playback Macro 記録したマクロを実行する

Ctrl(Control) + Shift + Q

Tools > Playback Macro で記録した直近のマクロを実行します。

Save Macro… マクロを保存する

Tools > Save Macro… をクリックするとマクロを保存できます。拡張子は「.sublime-macro」にします。 保存する場所はPackages/User以下にします。User以下にフォルダを作って入れても構いません。 例: mymacro.sublime-macro

マクロをキーボードショートカットに登録する

保存したマクロはTools > Macros から実行できますが、よく使うものはショートカットキーを割り当てた方が便利ですよね。 キーボードショートカットはSublime Text > Preferences > Key Bindings – User で自分用にカスタマイズすることができます。 例えば、「Cmd + Shift + Opt + :」にmymacro.sublime-macroというマクロを登録したい場合は、Key Bindings – User に以下を追記します。
{
"keys": ["super+shift+alt+:"],
"command": "run_macro_file",
"args": {"file": "Packages/User/mymacro.sublime-macro"}
}
※commandキーはsuperと書きます。 これで登録したマクロをショートカットキーで使えるようになります。 マクロはプラグインなどと組み合わせることもできるので、アイディア次第でいくらでも応用可能です。

ページトップへ戻る

スニペット

スニペットはトリガーになる文字列を入力してTabキーを押すと、登録しておいたコードが展開される機能です。 STのスニペットの一番の特徴は変数を使えることだと思います。 それでは、登録の仕方を見ていきます。 Tools > New Snippet をクリックすると新規タブに下記のテンプレートが開きます。このコードを編集することでスニペットを登録できます。
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

<content></content>

展開される内容です。<![CDATA[] ~ ]内を編集します。 ${}内が変数となり、展開するとこの部分が選択状態となります。 {}内の数字がTabキーを押した際の移動順となり、数字:の後の文字列が初期値となります。 数字:の後に何も書かかない場合は、カーソルが$の部分に当たります。 同じ数を指定した箇所は同時に編集できます。 このテンプレコードの書き方の場合は、「this」が選択された状態で展開され、もう一度Tabキーを押すと次は「snippet」が選択状態になります。

<tabTrigger></tabTrigger>

トリガーとなる文字列を登録します。こちらが入力された状態で、Tabキーを押せば展開されます。

<scope></scope>

スニペットが有効になるモードを設定できます。 例えばCSSならsource.cssと書いてコメントアウトを解除することで、CSSモードでのみこのスニペットは有効になります。 HTMLならtext.htmlです。 モードを複数指定する場合は半角カンマで区切ります。 全モードで有効にしたい場合はコメントアウトされたままにします。 現在のモードを確認したい場合は、Ctrl + Shift + Alt + P (Cmd + opt + P) でSTのウィンドウ左下の方に表示されます。

スニペットを保存する

先ほどのファイルを保存すれば登録完了です。 ファイルの拡張子は「.sublime-snippet」にします。 保存場所はデフォルトでは、 Sublime Text 3/Packages/User/ が開きますが、Packages/以下ならどこでも良いみたいです。 せっかくなので僕が登録している非常に簡単なスニペットを1つ載せておきます。 CSSのborderのスニペットです。
<snippet>
<content><![CDATA[
border: ${1:1}px ${2:solid} #${3:};
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>bd</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.css, source.scss</scope>
</snippet>
このスニペットの場合、CSSファイルかSCSSファイルでbdと入力して展開すると、 border: 1px solid #; と展開され、最初は1pxの1が選択状態になります。 もう一度Tabキーを押すとsolidが選択状態となり、さらにもう一度押すと#の後ろにカーソルが移動します。 単純ですがけっこうよく使うので便利です。 この例はかなり簡単な使い方でしたが、スニペットはうまく使えばとてつもなく作業時間を短縮できる機能だと思います。

ページトップへ戻る

以上です。 今回は使いこなせば作業時間を大幅に減らせるSTの便利機能をご紹介しました。いかがでしたでしょうか。 まだまだ他のエディタとズタボロに比較されるほどの差はないと思いますよ。何せSTは速いですから! それでは、また。