Windows 版の Sublime Text 2 を使う

Eclipse → Aptana Studio → NetBeans と、IDEを乗り換えながら使っていたのですが、どれもしっくりこなくて、大学卒業以来となる emacs にいよいよ乗り換えるときかなぁと考えていました。

コーディングしていて何が嫌かというと、別の行に移動するときに右の小指で矢印キーを押しているときや、マウスでソースコードをスクロールしているとき。Mac であれば、大抵のエディタでデフォルトキーバインドが emacs風になっているのであまりストレスは感じませんが、Windows で作業しているときは本当にストレスを感じていました。

そんな折、去年末に Sublime Text 2 の存在を知って使い始めてからは、他のIDEに乗り換える気が全くなくなるほど気に入ってしまいました。

とても素晴らしいエディタなのですが、Windows環境で使っているという情報があまりないので、紹介したいと思います。マルチプラットフォーム対応なので、Macユーザ向けに書かれている設定なども基本的にはそのまま使えますが、Windows版ユーザからの情報もあればそれはそれで有意義かと思ったので。

情報源

• 公式サイト：www.sublimetext.com
  
• 公式ドキュメント：www.sublimetext.com/docs/2/
  
• 非公式ドキュメント：docs.sublimetext.info/en/latest/

特徴

• 有料の製品（無料試用可能で、試用中の機能制限はなし）
  
• マルチプラットフォーム対応（Windows、OS X、Linux）
  
• パッケージ管理システムで機能拡張可能

大きなところは上記かなと思います。本当はもっといろいろと書きたいのですがキリがなくなりそうだし、とても便利そうなのにまだ私が使っていないというだけでリストから漏れた機能があったりしたら嫌なのでやめました。

公式に謳っている特徴は、公式サイトの特徴のページを参照してください。

欠点

個人的には気になりませんが、本格導入を見合わせる原因になりそうな点を挙げます。

• インターフェースが英語
  
• 日本語がインラインで変換できない（たぶんWindows版だけ）

上記ではかろうじてウィンドウ内で変換されていますが、環境によってはウィンドウの外にいってしまう場合があります。SSは Google IME でのものですが、Microsoft IME でも同様でした。

日本語変換については今では気になりませんが、導入当初は Sublime Text 2 が本当に便利なのかどうか懐疑的に使っていたため余計に気になっていました。

導入

公式サイトの「Download」から、自分の環境に合わせてファイルをダウンロードします。 ファイルサイズは10MBもありません。

なお、まだこのツール自体がBeta版ということもあり、どうせ正式版でないのなら少しでも最新のものを使いたい！ということで、私は 開発版ビルドのページ からダウンロードしています。 また、私の場合は、開発環境を Dropbox にそのまま突っ込んでどこでも使えるようにしたいので、portable version を使っています。

インストーラの場合は普通にインストール、portable version の場合には、ファイルを解凍すれば導入完了です。

実行してみると、現時点では以下のような状態です。

 

簡単な使い方

プロジェクト登録

IDEっぽく、プロジェクト単位でファイルを閲覧できるようにします。

まず、「View」→「Side Bar」→「Show Open Files」をクリックしてサイドバーを表示します。

上記のように左側のバーが表示されない場合には、サイドバー本体が非表示になっているので、「View」→「Side Bar」→「Show Side Bar」をクリックします。

次に、管理したいプロジェクトの単位（通常はgitのリポジトリ単位かと思います）で、フォルダをサイドバーにドロップします。適当なサンプルがなかったので、ここでは ECCUBE を放り込んでいます。

あとは編集したいファイルを左から選んで編集するというおなじみのスタイルです。触ってみると動きが軽快で、コーディングが楽しくなること請け合いです。

ではこれをプロジェクトとして保存します。メニューの「Project」→「Save Project As…」を選んで、プロジェクトファイルを保存すればOKです。

無視ファイルの設定

今回は CMS のソースを放り込んだので、ソース一覧に画像ファイルも表示されます。また、ローカルでCMSの動作確認などしたあとでは、Smarty のキャッシュファイルなども表示されるようになります。その他、上記で保存したプロジェクトファイルも見えてしまうので、これを非表示にします。

メニューの「Project」→「Edit Project」をクリックして、設定ファイルを開きます。

その中に以下のような形式で、非表示にしたいファイルを列挙します。

{
    "folders":
    [
        {
            "path": "/D/W0.WORK/eccube-2.11.5",
            "file_exclude_patterns": ["*.jpg","*.gif","*.tpl.php","*.sublime-*"]
        }
    ]
}

もしくは、以下のようにフォルダを指定して、フォルダごと非表示にすることもできます。両方同時に指定することも可能です。

{
    "folders":
    [
        {
            "path": "/D/W0.WORK/eccube-2.11.5",
            "file_exclude_patterns": ["*.jpg","*.gif","*.tpl.php","*.sublime-*"],
            "folder_exclude_patterns": ["img","templates_c"]
        }
    ]
}

ファイルを保存すると、設定が瞬時に反映されます。

なお、プロジェクトの設定に限らず、Sublime Text 2 での設定ファイルはこのようにJSON形式になっています。

※設定行を追加する際には、その前の行の終端にカンマをつけ忘れない様にしてください。

テーマの変更

エディタを変えたら自分好みのテーマに変えたいので、早速変更します。メニューの「Preferences」→「Color Scheme」からお好みで選択します。私は Twilight を使っています。

フォントの変更

テーマと同じくらいやる気に直結するので、変更したいのがフォントです。私は 以前の記事で紹介した等幅のメイリオ を使っています。

メニューの「Preferences」→「Setting – User」をクリックして設定ファイルを開き、以下のように設定します。

{
    "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
    "font_face": "MeiryoKe_Console",
    "font_size": 10
}

最初の行は、先程設定したテーマの設定です。3行目でフォント名、4行目でフォントサイズを設定しています。これもファイルを保存すると、即座に設定が反映されます。

vi 設定 「Vintage」

私にとってはこれが決め手でした。これがないと右手の小指で矢印キーを押す作業が必要になってしまいます。この vi 設定ではVisualモードも使えます。

また、このviが良い感じにゆるく、Windowsの標準操作と共存しています。viのyank (yy & p) と同時にWindowsのクリップボード (Ctrl+C & Ctrl+V) も使え、それぞれ別の内容を保持します。Ctrl+V での貼付けは、インサートモードでなくても使えます。ファイルの保存は Ctrl+S でOKです。Ctrl+Z で Undo もできます。

開発環境を全面的に vi に移行するか、と言われると躊躇してしまいますが (その程度のvi経験)、これなら無理なく扱えます。

設定はフォント設定と同じで「Preferences」→「Setting – User」をクリックして、以下を追記します。

{
    "color_scheme": "Packages/Color Scheme - Default/Twilight.tmTheme",
    "font_face": "MeiryoKe_Console",
    "font_size": 10,
    "ignored_packages": [],
    "vintage_ctrl_keys": true,
    "vintage_start_in_command_mode": true
}

「Preferences」→「Setting – Default」を見ると分かるのですが、最終行で viの設定である「Vintage」が無視パッケージに指定されています。

上記のように設定することで無視しないように変更、つまり有効化しています。

vintage_ctrl_keys は、Ctrlキーと組み合わせた操作を有効化する設定です（Ctrl+Fキーでページ送り、など）。

vintage_start_in_command_mode は、ファイルを開いた時のデフォルトモードをインサートモード（テキスト入力モード）にするか、コマンドモードにするかの設定です。ここでは通常のviに近い設定とするため、コマンドモードに設定しています。

ファイルを保存すると、即座にviモードに変わります。

ただ、viモードには弊害もあり、あとから導入したパッケージの機能が、デフォルトのショートカットキーのままでは使えないこともたまにあります。

コーディング中のファイルの開き方

左のツリーから開いてももちろんいいのですが、ファイルパスやファイル名が分かっている場合には、それを入力して呼び出した方が速いことがあります。

たとえば、今回利用しているECCUBEでの例ですが、PC向けの商品詳細画面のテンプレートを編集したいとします。目的のファイルパスは以下です。

eccube-2.11.5\data\Smarty\templates\default\products\detail.tpl

この場合、まず Ctrl+P を押してファイル検索モード (goto anything) にします。そこにファイル名らしきものを入力していきます。脱字があってもちゃんと検索されます。

「detailtpl」と入力してみると、以下のように検索されます。

するとファイル名のみでなく、パス名全体でどこかしら合致しているものが表示されます。今回は一番上に目的のファイルが表示されているので、このままEnterを押せば開きます。

より高い精度で検索したければ、特徴的なフォルダ名も入力します。「default」「mobile」「sphone」の3つのフォルダにそれぞれ同名ファイルが存在するので、そのフォルダ名も入力することで対象を絞り込みます。でも入力するのは中途半端な内容でOKです。

「defdetatpl」と入力してみると、以下のように目的のファイルだけに絞り込めました。

パッケージ管理システム 「Sublime Package Control」導入

Sublime Text 2 を使っていく上でこれは必須です。以下のサイトの「Install」からコードをコピーしてきて Sublime Text 2 のコンソールに貼り付けて実行します。

• Sublime Package Control – a Sublime Text 2 Package Manager by wbond

貼り付けるコードは現時点 (2012.05.06時点) では以下です。

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

これをコピーします。Sublime Text 2 で  Ctrl+@ を押すとコンソールが表示されるので、入力欄に貼り付けます。

そのまま Enter を押して、実行します。以下の様に「Please restart …」と表示されるので、一度 Sublime Text 2 を終了して、再度立ち上げます。

見た目は変わりませんが導入完了です。

パッケージを追加する

現在、よく使っているのは以下のパッケージです。Git や SFTP のパッケージなどもありますが、まだ導入していません。便利そうなのでいずれ入れたいとは思っています。

• IndentGuides: インデントに合わせてガイド線を表示。見やすい！
• SublimeBlockCursor: Vintageモード時のカーソルをブロック表示にする。見やすい！
• DocBlockr: 関数を書いたあとに関数コメントを自動記述！楽チン便利！
• SublimeCodeIntel: より賢いコード補完、宣言へのジャンプ。定番らしい。でも遅い
• CTags: あまり賢くないけど速い宣言へのジャンプ

IndentGuides

パッケージ導入方法はどれも同じですが、稀にPackage Controlに対応していないパッケージがあり、その場合には手動で導入する必要があります。IndentGuides は対応しています。

まず Ctrl+Shift+P を押して、「install」と入力します。すると「Package Control: Install Package」に絞り込まれるので、Enter を押します。もしくは「Preferences」→「Package Control」をクリックして、一覧から「Package Control: Install Package」をクリックします。

パッケージ情報を読みに行くので、しばしそのまま待ちます。別ウィンドウなどをクリックするとキャンセルされるので、その場合は再度 Install Package を実行します。

すると インストール可能なパッケージが一覧で表示されるので、目的のパッケージを探します。ここでも、目的のパッケージ名を入力していくことで絞りこまれますので、「indentg」と入力しましょう。対象が１つだけに絞り込まれるので、Enter で確定します。

すると、ステータスバーにインストール中の表示が出ますので、終了するまで待ちます。今回のような小さなパッケージならすぐに終わると思います。終わると、早速インデント部分にガイドラインが表示されるようになります。

インストール直後は、線が太く表示されることがあるようですが、立ち上げ直せば直ります。

SublimeBlockCursor

こちらは、パッケージ対応と謳っているのですが、選択肢に出てこないので手動でインストールします。GitHub の SublimeBlockCursor のページから、右側にある「Downloads」をクリックし、zip か tar.gz か好きな方を選んでダウンロードします。

解凍したら、Sublime Text 2 のインストールフォルダの以下の場所にファイルを格納します。

Sublime Text 2 インストールフォルダ
　└─Data
　　　└─Packages
　　　　　└─SublimeBlockCursor
　　　　　　　　　.gitignore
　　　　　　　　　package-metadata.json
　　　　　　　　　README.md
　　　　　　　　　SublimeBlockCursor.py

すると、自動的にpycファイルが生成され、設定が反映されます。

DocBlockr

パッケージ管理から導入できます。

phpの例ですが、使い方を簡単に説明します。以下のような関数を書いたあと

宣言の上の行で「/**」と入力して Enter すると、以下のようにコメントが自動で生成されます。

Tabキーを押すことで、[]で囲まれた入力欄にフォーカスが移っていきます。

CTags

CodeIntel か CTags か。両方とも導入することもできますが、最近では主に CTags を使っています。これもパッケージ管理から導入できます。

CTags を使うには、パッケージの他に ctags コマンドが必要です。GitHub のページには、Windows 向けの情報はありませんが、以下から ctags をダウンロードすれば利用可能です。

• ctags日本語対応版

Win32版のバイナリをダウンロードし、解凍したら、パスの通っているフォルダ（C:\Windows や C:\Windows\System32 など）に置くか、任意の場所に置いてパスを通します。

パスを追加したくない場合には、以下のファイルを開いて、ctags をパス込みで指定します → 「SublimeText2インストールフォルダ\Data\Packages\CTags\CTags.sublime-settings」

{
    "debug"           :  false,
    "ctags_command"   :  "C:\\path\\to\\ctags\\ctags -R -f .tags",
    "filters"         :  {
        "source.python": {"type":"^i$"}
    },
    "definition_filters": {
        "source.php": {"type":"^v$"}
    },
    "definition_current_first": true,
    "show_context_menus": true,
    "extra_tag_paths" :  [ [["source.python", "windows"], "C:\\Python27\\Lib\\tags"]],
    "extra_tag_files" : [".gemtags"]
}

上記ハイライト行のようにパス指定にすればOKです。

Sublime Text 2 の 「Find」→「CTags」→「Rebuild Tags」をクリックすると、開いているプロジェクトのファイルをスキャンして .tags ファイルが生成されます。

宣言元へジャンプするには、調べたい関数などの上にカーソルがある状態で、Ctrl+Alt+]  Ctrl+T→Ctrl+T を入力します。呼び出し元に戻ってくるには Ctrl+Alt+[  Ctrl+T→Ctrl+B です。なお、複数の同名の定義がある場合、どの宣言に飛ぶべきかまでは判断できないので、飛び先を自分で選ぶ必要があります。

【2012.08.13修正】 2012.08.07に Ctrl+Alt+[]のショートカットが削除された ので修正しました。

このあたりは CodeIntel の方が賢いですが、Ctags のように任意のタイミングでスキャンさせるということができず（たぶん）、ジャンプしたいときにガーっとスキャンし始めるので、私はストレスを感じます。

生成された.tagsファイルは、プロジェクトの無視リストと.gitignoreに追加しておきましょう。

参考情報

本当は、コードの自動ビルドや、キーワードの複数同時選択など、目玉機能とされるものがあるのですが、使っていないので紹介できません。

最後に、Sublime Text 2 を使い始めるにあたって参考にしたサイトを以下にご紹介します。やはり Mac な情報が多いので、ショートカットキーなどは適宜読み替える必要があります。

• Sublime Text 2 Tips and Tricks (Updated) | Nettuts+
• プログラミングエディタ Sublime Text2 を使ってみよう！ - mizchi log
• readyStudyGo: Sublime Text 2のカスタマイズ

細かなカスタマイズは 公式ドキュメント や 非公式ドキュメント が参考になります。「Preferences」→「Settings – Default」を眺めるだけでも面白いと思います。