Sublime Text で利用しているパッケージという記事を書いてから 2 年あまり経過し、設定や利用パッケージも変化したため現時点の構成を記録しておく。

最近は Atom の進歩がめざましく、部分的には Sublime Text を超えている。そのため Atom との併用を始めたのだが、双方の使用感を一致させるためにも互いの環境が資料化されていたら便利なはず。近く Atom 環境についてもまとめる予定。

Sublime Text 3 と Package Control

Sublime Text の公式な安定版は現時点で v2 系である。しかしリリースが 2013/7/8 と古い。また、ベータ版ではあるが v3 がリリースされて久しく、安定もしている。

そのため本記事で扱う Sublime Text は v3 の最新版である Build 3083 とする。 v2 と v3 でパッケージ管理用の Package Control が異なるので注意すること。念のため、Package Control のインストール手順も書いておく。

1. Installation - Package Control から Sublime Text 3 用のスクリプトをクリップボードにコピー
2. Sublime Text のメニューから View - Show Console を選択
3. Console 下段の入力欄にコピーしたスクリプロを貼り付けて Enter を押す
4. Package Control のインストールが開始される
5. インストールが終了すると Sublime Text の再起動を促されるので、再起動する

Package Control がインストールされると Command Palette からパッケージの追加、削除、一覧表示を実行できるようになる。Command Palette はメニューから Tools > Command Palette... を選択するかショートカット キーで表示する。

Command Palette 上で install、remove、list と入力するとコマンドが絞りこまれる。その中の Package Control: で始まるものを選択して Enter を押すことでパッケージの追加、削除、一覧表示を実行できる。

利用パッケージ

Sublime Text で利用しているパッケージをまとめる。パッケージごとに Package Control 上のページをリンクしているので、スクリーンショットや機能の詳細についてはそちらを参照のこと。

AutoFilename

AutoFileName は HTML や JavaScript でパスの入力補完を提供してくれる。

• AutoFileName
• BoundInCode/AutoFileName

例えば HTML の href や src、JavaScript 内で引用符に囲まれた箇所でキー入力が開始されたとき、入力されたパスにあわせて選択候補が表示される。入力を進めると候補の絞り込みもおこなわれる。相対パスも受け付けている。

HTML はもとより、Node の require や ES6 の import を宣言するときにも非常に便利。

Babel

JavaScript の Compiler として普及している Babel の Sublime Text 用パッケージ。ES6 以降の JavaScript に対する Syntax Highlight 機能などを提供する。

• Babel
• babel/babel-sublime

Syntax Highlight を利用する場合は、Sublime Text のメニューから View > Syntax > Babel を選択する。JavaScript ファイルを開いているとき、常に Syntax Highlight を有効にする場合は .js ファイルを開いた状態でメニューから View > Syntax > Open all with current extension as... > Babel を選択する。

この操作は同一ファイルに複数の Syntax Highlight を適用可能な場合のデフォルトを決めるためのものなので、覚えておくと他の Syntax Highlight 系パッケージを有効にするときに役立つ。

本家 Babel では v6 より ES6 と React JSX の解析が別のパッケージに別れ、これらに関する設定を追加する必要があるのだけど、Sublime Text のパッケージでは現在も標準で解析可能なようだ。

Syntax Highlight については、Sublime Text のエディタ部分に適用する Color Scheme の対応も必要になるが、これは後述する。

BracketHighlighter

BracketHighlighter は括弧の対応を強調するためのパッケージ。

• BracketHighlighter
• facelessuser/BracketHighlighter

インストールするとコード中の括弧を解析し、括弧の開始〜終了が強調される。行番号の当該行に括弧がカラー表示され、コードの当該部分には下線が引かれる。

見た目も美しく実用性もあって、かなりお気に入りのパッケージである。

標準の解析範囲は 5,000 文字のテキストになっている。そのため長大な HTML とかで body などのルートに近い階層の括弧対応が ? になりがち。これを防ぐには Customizing - BracketHighlighter Documentation に解説されている search_threshold という値を変更すればよい。ただし範囲を広げすぎるとパフォーマンスに影響する。

私は標準設定で特に困っていないため、そのままにしている。

ConvertToUTF8 & Codec33

ConvertToUTF8 は Sublime Text で文字エンコーディングが Shift-JIS や EUC-JP のテキスト ファイルを開くためのパッケージ。Windows 以外 ( OS X や Linux ) では Codecs33 もセットで必要。

• ConvertToUTF8
• seanliang/ConvertToUTF8
• Codecs33
• seanliang/Codecs33

近年 UTF-8 や UTF-16 以外のテキストを扱う機会はすっかり減ったが、たまに古い環境からファイルを持ってくると Shift-JIS になっていたりする。そうした時、これらのパッケージを入れておけば慌てずに済む。

Color Highlighter

Color Highlighter はコード内の色指定を検出して強調表示したり、カラー パレットを呼び出して色指定を挿入するためのパッケージ。

• Color Highlighter
• Monnoroch/ColorHighlighter

標準設定だと色を指定している箇所を選択したときだけ強調されるのだが、常に強調されたほうが便利なの Sublime Text のメニューから Tools > Color Highlighter > Highlight all style > Filled を選択しておく。

他に Outlined (枠線のみ)、Underlined (下線のみ) といった設定もあるけれど、視認性では Filled がよい。Filled が目立ちすぎると思ったら他の外観にするとよいだろう。

色の表示は Stylus の変数にも有効である。以下の例だと color_red の定義、値、参照してる箇所がそれぞれ強調表示される。

color_red = #f00

.red-text {
  color color_red

この機能により色の定義を独立した Stylus ファイルに定義しておくと、それ自体がアプリの配色リストとなり、資料として有用である。

Emmet

Emmet は HTML や CSS のスニペットを提供するパッケージ。

• Emmet
• sergeche/emmet-sublime

Emmet は Sublime Text 以外のテキスト エディタにも対応しており、既に広く普及していると思われるため、特別、ここでは機能について解説しない。記法も共通なので、どこかで覚えれば Sublime Text でもそのまま通じる。

私の場合、HTML を直に書く機会は少なく CSS も Stylus で記述しているため、あまり恩恵にあやかれていない感じだが、サンプル的な HTML をサクッと作成するときに重宝している。

GitGutter

GitGutter は Git リポジトリ上のファイルを編集したときに変更行を強調表示したり、commit などの操作を Sublime Text 上から実行する機能を提供するパッケージ。

• GitGutter
• jisaacks/GitGutter

強調表示は行番号の左になる。そのため BracketHighlighter や Linter の表示と競合するのが難点である。とはいえ、編集対象を Git リポジトリで管理するなら必ず入れておきたいパッケージといえる。

Git リポジトリ操作は Command Palette から実行する。Palette を表示して commit などの入力をおこなうと GitGutter 用コマンドが絞り込まれるので、それを選択する。

私はリポジトリ操作を Terminal 上の Git CLI や SourceTree などの専用ツールから実行するほうが好みなので、この機能は利用していない。

Oceanic Next Color Scheme

ES6 の Syntax Highlight に対応した Color Scheme パッケージ。

• Oceanic Next Color Scheme
• voronianski/oceanic-next-color-scheme

解析はかなり細かい。キーワードだけでなく関数や引数、標準型と自己定義型も区別してくれる。私が確認した限りだと対応が漏れているのは static キーワードぐらいだが、これは Syntax Highlight に指定している Babel が原因の可能性もある。

このパッケージは Babel のページでも Suggested Resources として紹介されており、私もそれで知った。配色はダーク系なので、好みが別れるかもしれない。

OmniMarkupPreviewer

OmniMarkupPreviewer は Markdown や Textile を Web ブラウザでプレビューするためのパッケージ。

• OmniMarkupPreviewer
• timonwong/OmniMarkupPreviewer

インストールすると、Markdown *.md と Textile *.textitle を開いているときに以下のショートカット キーを押すことでプレビューが開始される。

プレビューにはエディタ上の編集内容がほぼリアルタイムに反映される。Web ブラウザー上のアドレスをみると http://127.0.0.1:51004/view/102 のようになっている。ローカルに簡易 HTTP サーバーを起動して変更検知と反映を実現しているようだ。

Atom と異なり Sublime Text は組み込みの Markdown プレビュー機能を持たないため、このパッケージはありがたい。

SideBarEnhancements

SideBarEnhancements は Sublime Text のサイドバーにおける、コンテキスト メニューを拡張するパッケージ。

• SideBarEnhancements
• titoBouzout/SideBarEnhancements

インストールすると、ファイル操作系の機能と、選択されているファイルやフォルダーを別のアプリケーションで開く機能などがメニューとして追加される。後者は選択フォルダーを Finder や Explorer、Terminal で閲覧するためによく使う。

Stylus

Stylus の Syntax Highlight やコンパイル機能を提供するパッケージ。

• Stylus
• billymoon/Stylus

OS X 環境で利用する場合、Stylus ファイルのコメントを書くとき、日本語の入力などで IME による変換を実行するとテキストが消える問題がある。これを回避するためには以下のように対応する。

1. Package Control からインストールした Stylus パッケージをアンインストールする
2. GitHub から Sublime 用 Stylus パッケージ ZIPをダウンロードする
3. ZIP を展開してフォルダ名を Stylus-master から Stylus に変更
4. Sublime Text のメニューから Preferences > Browse Packages... を選択
5. Finder、Explorer などでパッケージ置き場フォルダが開かれる
6. パッケージ置き場フォルダに手順 3 で名前変更した Stylus フォルダを移動
7. Stylus フォルダ内の Default.sublime-keymap を Sublime Text で開く
8. ファイル内に "keys": ["enter"] という箇所があるので "keys": ["shift+enter"] に変更してファイルを保存する
9. ファイルを閉じてから Sublime Text を再起動

コメントを書く予定がないとか、英語のみで書くのであれば、この対応は不要。

DocBlockr

DocBlockr はコード ドキュメント用のコメントを自動生成するためのパッケージ。

• DocBlockr
• spadgos/sublime-jsdocs

コード中の変数や関数の真上で /** と入力した後に

Enter を押すと自動的にコメントが生成される。言語によって書式も使い分けてくれるようだ。JavaScript の場合、代入されている値による簡易な型推測もおこなわれる。

以下は生成例。

/**
 * [str description]
 * @type {String}
 */
var str = 'My String';

/**
 * [num description]
 * @type {Number}
 */
var num = 1024;

/**
 * [test description]
 * @param  {[type]} str [description]
 * @param  {[type]} num [description]
 * @return {[type]}     [description]
 */
function test( str, num ) {
}

私は Doxygen や ESDoc などのコード ドキュメント生成ツールを愛用している。そのためこれらに対応したコメントを自動生成してくれるのはありがたい。

便利だがこのパッケージにも Stylus と同様に IME の変換でテキストが消える問題がある。対応方法もほぼ同様。詳しくは以下の記事を参照のこと。

• MacのSublimeText3で日本語が消えるバグを回避する

Stylus より前にこのパッケージで IME 問題に遭遇、この記事で解決した。つまり Stylus 側の対応はこの方法の応用である。

SublimeLinter & SublimeLinter-contrib-eslint

SublimeLinter は様々な言語の構文チェックを実施するためのパッケージ。

• SublimeLinter
• SublimeLinter/SublimeLinter3
• SublimeLinter-contrib-eslint
• roadhump/SublimeLinter-eslint

SublimeLinter がランタイムとなり、その上で言語別の構文チェッカーが動作する仕組みになっている。私は ESLint による ECMAScript (JavaScript) のチェッカーを利用している。このパッケージは ESLint 本体に依存しているため別途インストールが必要。詳しくは過去記事の ESLint を試す で解説している。

Theme - Cobalt2

Cobalt2 は Sublime Text の Theme パッケージ。

• Theme - Cobalt2
• wesbos/cobalt2

外観のよさは当然としてサイドバーに Atom 風のファイル種別に応じたアイコン表示を提供してくれるのが嬉しい。外部プラグインも含め Sublime Text の現行機能を追従できている Theme はあまりないようなので外観に抵抗がなければとりあえず入れておいて損はない。

IMESupport

Windows 環境で IME を利用したインライン入力をサポートするためのパッケージ。Windows 以外では不要。

• IMESupport
• chikatoike/IMESupport

インストールしてから再起動すると日本語なども適切にインライン入力できるようになる。このパッケージの機能は標準となるべきだと思うのだがパッケージ管理が独立しているためだろうか Sublime Text v3 になってもバンドルはされない。残念ながら問題は依然として残っている。

英語圏のように IME を利用しない開発者の作成したアプリケーションではしばしば IME の問題が起きる。自身の環境で試しにくい機能だと検証がおろそかになるのはよくある話で私も例外ではない。そういえば SourceTree の Windows 版も IME が絡むとコミット メッセージのフォーカスがおかしくなって、離れた位置に変換窓が表示されたりする。

環境設定

パッケージの次は環境設定についてまとめる。

Ricty Diminished

Ricty Diminished はプログラミングを目的としてデザインされたフォントである。

• yascentur/RictyDiminished

上記ページから ZIP をダウンロードして展開すると TTF フォントを入手できる。これらの内、私は Ricty Diminished Regular を Sublime Text の表示フォントに採用している。ゼロにスラッシュ、全角空白を可視するためにグリフを割り当てるなどプログラミング向けというだけあって気の利いた工夫がなされている。

Preferences.sublime-settings

Sublime Text のユーザー設定ファイルは以下のようにしている。このファイルを編集する場合はメニューから Preferences > Settings - User を選択する。

{
  "color_scheme": "Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme",
  "draw_white_space": "all",
  "enable_tab_scrolling": false,
  "folder_exclude_patterns":
  [
      ".git",
      "node_modules"
  ],
  "font_face": "Ricty Diminished Regular",
  "font_size": 16,
  "highlight_line": true,
  "ignored_packages":
  [
      "Vintage"
  ],
  "show_encoding": true,
  "show_full_path": true,
  "show_line_endings": true,
  "tab_size": 2,
  "theme": "Cobalt2.sublime-theme",
  "translate_tabs_to_spaces": true,
  "word_wrap": true
}

各種設定とその内容を表にまとめる。

まとめ

改めて書き出してみると、以前の記事からあまり変更がない。ただし LineEndings のように標準機能で事足りるものを見つけるなど、棚卸しもおこなえた。

Sublime Text と Atom の併用を始めてから、Sublime Text のパッケージ管理が組み込みでないことへ不満を感じるようになった。パッケージを紹介するとき前提条件として Package Control に言及するのはいかにも冗長だ。とはいえ省くと、それはそれで分かりにくくなる。私はこの種の記事を書くとき、なるべく初見の読者を想定するようにしているため、前提知識の説明はいつも悩む。

あと Sublime Text にも、以下の記事で触れている apm による一括インストールみたいな仕組みがほしい。

設定ファイルはテキストなので共有しやすいけど、パッケージは地道にメモってインストールするか実体を Dropbox などに置くぐらいしか共有する方法がない。パッケージのインストール設定をファイルとして管理できれば便利だと思う。

• 【超おすすめ！！】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる（※随時更新）

Sublime Text の開発は停滞しつつも継続されているそうだから次期バージョンに期待している。冒頭でも触れたように最近の Atom が非常によくなってきたので、あと半年ぐらい更新がなければ Atom をメインにするかもしれない。