Sublime Text で利用しているパッケージ

2013年9月29日 0 ソフト紹介 , ,

この前の記事の続き。Sublime Text で私が利用しているパッケージについて書く。

ただし言語やフレームワーク・ライブラリ ( jQuery など ) のシンタックス系については、必要に応じてインストールするものだろうから、除外してある。

もくじ

  1. Package Control
  2. Flatland
  3. BracketHighlighter
  4. SublimeLinter & JSHint
  5. Emmet
  6. YUI Compressor
  7. LineEndings
  8. ConvertToUTF8
  9. IMESupport

Package Control

Package Control は、パッケージを管理するためのパッケージ。

PackageControl

PackageControl

前回も書いたけど、Package Control はユーザーのほぼ全員がインストールするだろうから、標準バンドルしてほしいものだ。しかしどうやら Sublime Text 3 でも独立したパッケージ扱いのようなので、インストール手順を掲載しておく。

  1. Web ブラウザで Installation – Package Control にアクセス
  2. ページ内に掲載されたインストール用コマンド ( Sublime Text 2 と 3 で異なる点に注意 ) をコピー
  3. Sublime Text のメニューから View → Show Console を選択して、コンソールを表示させる
  4. コンソールのテキストボックスに、Package Control のインストール用コマンドを貼りつけて Enter キーを押す
  5. コンソールに Please restart ~というメッセージが表示されるまで待つ
  6. Sublime Text を再起動する
  7. コマンドパレットを表示して、Package Control 系のコマンドが存在することを確認する

インストールするとコマンドパレットに Package Control: ~ が追加されるので、package と入力して機能を調べておくとよい。私の場合、Install Package や Remove Package の利用頻度が高いので、コマンドパレットに install や remove と入力すると、これらが選択されるようになっている。

なにか足りない機能があったら、とりあえず Package Control でそれらしい名前 ( プログラミング言語やライブラリ名など ) を入力しておけば、目的のものはだいたい見つかる。どうしても見つからない場合は、検索対象とするリポジトリの追加も可能。といっても、今のところ私は標準で事足りている。

以降に紹介するパッケージはすべて Package Control の標準リポジトリに公開されている。よってインストールする場合は、Package Control: Install Package で名称をそのまま入力すれば候補にあがる。

Flatland

Sublime Text のテーマやカラースキームはかっこよいデザインが多くて嬉しい。中でも Flatland が特に気に入ってる。

Flatland

Flatland

名前のとおりフラットな外観をもつテーマで、特にタブの形状を四角にするとかっこいい。サイドバーのフォルダ アイコン表示もスッキリしていてよい感じ。カラースキームは DarkMonokai から選べるが、おすすめは前者。暗めの配色だけど配色のセンスがよく、かなり見やすい。

インストールしたら Sublime Text のメニューから Preferences → Settings – User を選び、以下の設定を追加してから Sublime Text を再起動しておく。タブを四角に変更した場合、いちど再起動しないと描画がおかしくなるようなので。

{
    // テーマ
    "theme": "Flatland Dark.sublime-theme",

    // カラースキーム
    "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",

    // エディタのタブを四角にする
    "flatland_square_tabs": true,

    // その他の設定…
}

Sublime Text の外観はテーマとカラースキームの組み合わせによって決まる。テーマはアプリ全般、カラースキームがシンタックス ハイライトに対応している。よって Flatland を利用しながら、カラースキームに標準の Cobalt などを指定することも可能。

BracketHighlighter

BracketHighlighter は、ソースコード中におけるカーソル位置の括弧の対応表示を追加してくれる。

BracketHighlighter

BracketHighlighter

よくある括弧の対応表示だと、括弧部分の文字や色を強調するものが多いけど、このパッケージではそれに加え、行番号の横にアイコンを表示してくれる。また、括弧の種類によってアイコン表示も切り替わる。

実用的なうえ、見た目もかっこよいので、かなりオススメ。

SublimeLinter & JSHint

SublimeLinterソースコードの構文チェック機能を追加してくれるパッケージ。JSHint はその上で動作する JavaScript 用チェッカーである。

SublimeLinter & JSHint

SublimeLinter & JSHint

JSHint は独立したアプリケーションで、Sublime Text のパッケージはそれを利用する形になる。よって、まずは JSHint 本体を用意する。

JSHint 本体は node.js に付属してる npm からインストールするのがよいだろう。もし node.js がない場合は、Mac なら homebrew あたり、Windows は公式サイトのインストーラから入れておくこと。

node.js をインストールできたら、Mac なら Terminal、Windows はコマンドプロンプトから以下のコマンドを実行する。

npm install -g jshint

JSHint 本体を用意したので、Package Control から SublimeLinter と JSHint をインストールすれば準備完了。

試しに JavaScript を開き、わざと構文エラーになるような記述をすると、リアルタイムに警告される。エディタの行番号の横に警告アイコンが表示され、マウスオーバーするとステータスバーに説明が表示される。実に便利だ。

なお、JavaScript の構文チェッカーとしては他にも JSLint というものがある。しかし、こちらは構文だけでなくコーディング スタイルについても細かくチェックするため、少々、押し付けがましさを感じる。

ちなみに JSHint はこの点が気になって JSLint から fork したそうだ。私もはじめ JSLint のほうを入れて、警告の多さにびっくりした。その際、JSLint スタイルへの改修 ( むしろ改宗? ) も考えたが、JSHint 作者の記事に共感を覚えたので、こちらを選ぶことにした。

Emmet

Emmet は、HTML や CSS のコーディングを補助してくれるパッケージ。Zen-Coding の後継にあたるそうだ。

Emmet をインストールすると、エディタ上で Emmet のシンタックスを入力してから Ctrl + E または Tab キーを押すことで、HTML タグや CSS プロパティなどが展開される。例えば html:5 と入力して展開すると、HTML5 の基本的なテンプレートが出力される。div は div、div>div ならばネストされた div が、閉じタグとワンセットで出力される。

Emmet

Emmet

詳細は以下を参照のこと。

学習コストが高そうにみえるけれど、シンタックスは単純で法則性もつかみやすい。なにより数文字タイプしただけで一挙にコーディングされてゆくのは、非常に気持ちよい。

Emmet は Vim や Coda2 など様々なエディタが対応しているので、覚えおいて損はないと思う。そのうち、正規表現のようにエディタの標準的な機能になるかもしれない。

YUI Compressor

YUI-Compressor は、YUI Library の機能を利用して JavaScript や CSS を Minify してくれるパッケージ。

Minify というのはソースの構文を維持しつつ、ファイル中に含まれる空白などの冗長部分を削除して、ファイルを必要最小のサイズへ圧縮する処理のこと。

このパッケージは Sublime Text のビルドシステムとして組み込まれ、JavaScript や CSS を開いていると自動的に選択される。よって Minify は Command + B で実行できる。

ビルドすると対象ファイルと同じフォルダに、元のファイル名.min.元の拡張子 という Minify されたファイルが出力される。例えばファイルが test.js なら test.min.js ができあがる。同名のファイルが存在していた場合は、自動的に上書きしてくれる。

LineEndings

LineEndings改行コードに関する機能を強化してくれるパッケージ。

LineEndings

LineEndings

これを入れると、Sublime Text のステータスバーに改行コードを表示したり、指定された改行コードへの変換などがおこなえる。GitHub の readme.md によれば、以下の機能をサポートしているそうだ。

  • 改行コードをステータスバーに表示する
  • コマンド パレットから改行コードを変更する
  • タブ サイズ メニューから改行コードを変更する
  • ファイルの改行コードがおかしい場合、警告を表示する
  • 表示されている全てのウィンドウのインデントをスペース、またはタブに変換する
  • 表示されている全てのウィンドウの改行コードを変換する
  • ファイルの保存時に改行コードを変換する

ちなみに変換メニューは Sublime Text のステータスバー右側にある Tab Size: や Speces: と表示されている部分をクリックすることで表示できる。

ConvertToUTF8

Sublime Text は標準だと Shift_JIS を扱えないらしく、そのようなファイルを開くと文字化けしてしまうのだが、ConvertToUTF8 を入れることで UTF-8 へ自動変換して読み込んでくれる。

Mac や Linux だけで作業していると気にならないのだけど、Windows では Shift_JIS に出くわす機会が多い。また、人から渡されたファイルが Shift_JIS になっていることもあるだろうから、そうした時に困らないよう、このパッケージを入れておくとよい。

IMESupport

Sublime Text の Windows 版では、テキスト入力時における IME 変換ウィンドウの表示位置がおかしくなる問題がある。通常なら入力位置の下部あたりに表示されることを期待するけど、ウィンドウの下部などに飛んでしまうのだ。

IMESupport を入れると、この問題が解決される。Windows 版を利用するなら必須のパッケージといえる。

そういえば、IME を利用しない言語圏で開発されたソフトウェアだと、たまにこの問題へ遭遇するのだけど、原因はなんなのだろう。前に MonoDevelop のエディタ部分で起きたときには、コメント入力に苦労させられたものだ。

…とりあえず、現時点で入れてるパッケージはこんな感じ。今後、面白いものを見つけたら、改めて紹介記事を書くかもしれない。


REPLY

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です