今回は「 Drupal 開発におすすめな Sublime Text 2 の設定とパッケージ」と題して、私の最近の Sublime Text 2 開発環境をご紹介したいと思います。
Sublime Text とは
具体的な内容に入る前に、まずは「 Sublime Text って何なの？」という方のためほんの少し Sublime Text のご紹介を。
Sublime Text とは、 Mac / Windows / Linux 上で使えるテキストエディタの名前です。 主にプログラミング・開発用途の機能が優れており、ウェブ・軽量言語のプログラミングで利用されることが多いようです。 数年くらい前にウェブ上で大きく話題になり、現在は Mac を代表するエディタ TextMate の実質的な後継ソフトというような位置づけで現在多くの方に使われています。
ちなみに、 2014 年現在の最新バージョンは「 Sublime Text 3 」です。 ただ、大きく利用者が増えたのが「 Sublime Text 2 」のときで、この完成度があまりに高かったためか 3 に移行せず 2 のままで使っている方が一般には多いように思います。
またまたちなみに、最近は Adobe から Brackets 、 Github から ATOM と、 Sublime Text 似のエディタがあちこちからリリースされています。 私はこういった「仕事道具」に目がなくて、このあたりのエディタも知ったらひととおり触ってみる感じなのですが、これらのエディタを触るとエディタ界にもまだまだ伸びしろの余地があっておもしろいなぁと感じます。
Sublime Text の公式サイトはこちら。
Sublime Text そのものについては解説記事がすでにたくさんありますので、さらに詳しく知りたい方は検索してみてください。
Drupal 開発におすすめの Sublime Text 環境
では本題の Drupal 開発におすすめな Sublime Text 2 環境のご紹介に入りたいと思います。 まず最初にグローバルな「設定」について、つづいて「パッケージ」について見ていきましょう。
設定
Sublime Text 本体の設定としては次の内容がおすすめです。
"translate_tabs_to_spaces": true,
"tab_size": 2,
"shift_tab_unindent": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true,こちらの設定を Sublime Text の設定ファイルに書き込みます。
設定ファイルへのアクセス方法は OS によって若干異なります。
Mac の場合は Sublime Text 2 -> Preferences -> Settings - User で開くことができます。
各行の意味合いをコメントでかんたんにご説明します。
"translate_tabs_to_spaces": true, // タブをスペースに変換
"tab_size": 2, // タブをスペースに変換するときのスペースの数（インデント幅）を 2 に設定
"shift_tab_unindent": true, // Shift + タブでインデントを減らす
"trim_trailing_white_space_on_save": true, // ファイルの保存時に行末の空白をすべて自動で削除
"ensure_newline_at_eof_on_save": true, // ファイルの保存時にファイル末尾に改行を自動挿入基本的な設定はこのあたりでしょうか。 ちなみに設定ファイルは valid な JSON 形式で入力する決まりになっていて、 JSON が崩れていると設定を保存することができません。
ですので、設定をゼロから記入する場合は次のとおり、最初と最後に { } を追加し、最後のプロパティの末尾の , は削除するようにしましょう。
{
"translate_tabs_to_spaces": true,
"tab_size": 2,
"shift_tab_unindent": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true
}すでに何らかの設定が書き込まれている場合はそれらを削除してしまわないように注意しましょう。
私自身はほかにもいろいろと設定を加えていますが、特に Drupal 向けではないものや個人的な好みによるものも多かったため、ここではひとまず定番的なものだけをピックアップしてみます。
Drupal.org やその他の記事でもおすすめの設定が紹介されているので、よろしければこのあたりも参考にしてみてください。
パッケージ
つづいて Drupal 開発におすすめな Sublime Text 2 のパッケージをご紹介します。
「パッケージとは何ぞや」という方のために、こちらも手短に解説を。
Sublime Text のパッケージ とは、 Drupal でいうところの「コントリビュートモジュール」です。 第三者によって開発された Sublime Text の拡張機能が「パッケージ」と呼ばれています。 また、「 Package Control 」という、 Drupal でいえば Drush に相当するたいへん便利なツールもありますので実際にパッケージをインストールする際にはまず最初に Package Control をインストールしてみてください。
「 Drupal 開発」をざっくり分解してみると、おおよそ次のような形で分けられます。 ですので、たとえば PHP のコーディングを快適にしてくれるパッケージがあれば、それはそのまま Drupal の開発にも役立ちます。
> Drupal 開発 = HTML + CSS + PHP + JavaScript + jQuery + Drupal
では、以下、特に Drupal 開発におすすめなものを 10 個ほどご紹介したいと思います。
01. Emmet (Zen Coding)
Emmet は HTML を素早く記述できる Emmet (旧名 Zen Coding) が Sublime Text で使えるようになるパッケージです。 外部ライブラリなどは特に必要なく、 Package Control で Emmet と入力すると使いはじめることができます。
Mac の場合 ctrl + e もしくはタブキーで Emmet 書式を HTML に展開してくれます。
02. HTML5
HTML5 は HTML5 を記述するのに便利なスニペットやシンタックスハイライトが含まれたパッケージです。 Sublime Text 2 にデフォルトでついてくる HTML は（おそらく） HTML4 ベースのものですが、これを入れると HTML5 ベースの HTML が快適に書けるようになります。
03. HTML-CSS-JS Prettify
HTML-CSS-JS Prettify は、名前が示唆するとおり「 HTML と CSS と JavaScript をきれいに整形」してくれるパッケージです。 パッケージを入れて、 Sublime Text のコマンドパレットを呼び出して（ Mac の場合は shift + cmd + p ）「 HTMLPrettify 」というコマンドを選択すれば現在閲覧中のコードを自動で整形してくれます。
対象ファイル・タブ幅・改行位置など、採用するコーディング規約や個人的な好みにあわせて細かな設定が可能です。
04. Drupal
Drupal は Drupal コア関連のスニペットや info ファイルのスニペットがまとめられたパッケージです。 上述のパッケージは Drupal 以外のウェブ開発でも一般的に使えるものですが、この Drupal と次にご紹介する Drupal snippets は Drupal 開発ならではのパッケージです。
この Drupal パッケージがあれば Aptana や NetBeans などの重量級 IDE （統合開発環境）での開発を長年している方でも、 Sublime Text への移行がわりとスムーズに行くのではないでしょうか。
05. Drupal snippets
Drupal snippets はフック関数周りを中心に、膨大な数の Drupal のスニペットを提供してくれるパッケージです。 hook_me などと打つとフック関数の候補を複数あげてくれて、その中からひとつを選ぶと Doc コメントと API ファイルに記述されているサンプルコードをあわせてフック関数のテンプレートを展開してくれます。
なんと Drupal の規約にあわせて hook の部分には自動的に編集中のファイル名（＝モジュール名）を入れるところまでやってくれるので、中身のロジックに集中してコーディングを行うことができます。
06. Phpcs
Phpcs は、 PHP 用のコードチェッカ / リンタである PHP_Code_Sniffer を Sublime Text 上で使えるようにしてくれるパッケージです。
コードの品質向上 / チェックの手間削減に一役買ってくれます。
PHP_Code_Sniffer そのものは Drupal にかぎらず PHP 全般に使えるものですが、 Drupal 用には Drupal コーディングスタンダードに沿った設定ファイルが Coder パッケージで公開されていますので、こちらを使うように設定すれば Drupal コーディングスタンダードの準拠チェックが行えるようになります。
設定には少し手間がかかるので最初は少したいへんですが、それ以降は自動チェックがずっと走ってくれるので、その費用対効果を考えれば導入の価値は十分にあるかと思います。
07. jQuery
jQuery は JavaScript のライブラリ jQuery のためのパッケージです。 jQuery 関連の膨大なスニペットを提供してくれます。 Drupal で JavaScript コードを書くときに避けては通れないのが jQuery ですので、特に Drupal のフロントエンド周りの開発を行う方にはおすすめです。
08. SublimeLinter
SublimeLinter は Sublime Text の代表的パッケージのひとつで、さまざまな言語のコードチェッカ / リンタを提供してくれます。 とりわけ Drupal 開発におすすめというわけではありませんが、 Drupal 開発では HTML CSS PHP JavaScript など複数の文法を使いまわすことになるので、各種言語で使える自動コードチェッカがひとつ入っていると開発がぐんと楽になります。
09. BracketHighlighter
BracketHighlighter も Sublime Text の代表的パッケージで、かっこ（ブラケットなど）のペアのハイライト機能を提供してくれます。
[] だけでなく () や {} など JavaScript や PHP に使うかっこはひととおりサポートしているので、かっこの閉じに起因するケアレスバグを未然に防いでくれます。
こちらも Drupal に特におすすめということではありませんが、入れておいて間違いはないかと思います。
10. GitGutter
GitGutter は Sublime Text 上での Git の利用をサポートしてくれるパッケージです。 Drupal 開発を行うのであれば、 SVN や Git を使ってコード管理をされる方が多いかと思います。 こちらはどちらかというと Git の方をよく使う「 Git 派」の方におすすめのパッケージです。 機能は「直前のコミットから変更のある行にマーク（ gutter ）をつける」というたいへんシンプルなものですが、その効果は絶大です。
ただ、常に動すようにしていると Sublime Text がじゃっかんもたつくようになったりもするので、保存時にだけチェックをかける（差分を確認してマークを更新する）ような設定をしておくのがおすすめです。
"git_gutter_live_mode": false, // GitGutter の更新を保存時だけに制限する
以上です。
終わりに
いかがだったでしょうか？
Drupal 開発に Sublime Text をお使いの方にはぜひご参考にしていただければと思います。 また、最近は特に開発環境の発展には目覚ましいものがあるので、ふだん Sublime Text 以外のエディタを使っている方にとっても多くの発見 / 改善ポイントがあるのではないかと思います。 ご参考にしていただけますと幸いです。
今回はさまざまな Drupal 開発を行っている方を想定してやや定番的・王道的なパッケージを取り上げましたが、マニアックな設定やパッケージが他にもたくさんあります。 また機会を見つけてそのあたりのところもご紹介していければと思います。
Drupal 開発の魅力はやはり第一には費用対効果の高い形でスピーディにお客様に価値 / 機能を提供できるところですが、それと表裏一体で生産性の高い形でサクサクものができていく「作り手のものづくりの楽しみ」にも大きいものがあります。 「作り手がイキイキしながらものを作れば、完成したもののクオリティも上がる」ところもあるかと思いますので、「よりよい開発環境の追求」そして「よりよいものづくり」。 このあたりのところは引き続き追求していければと思います。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。