Atom を試す

2015年12月2日 0 ソフト紹介, 開発 ,

Sublime Text の利用パッケージと設定 2015で予告したとお、私の Sublime Text に近い環境を Atom で構築してみる。対象は現時点の最新である Atom v1.2.4 とする。

パッケージ管理

Atom は標準でパッケージ管理機能が組み込まれている。追加と削除、検索、設定も GUI ベースなのでわかりやすい。

紹介しているパッケージを検索する場合はメニューから Atom > Preferences を選ぶと Settings タブが表示される。その左メニューから Install を選択して検索窓にパッケージをコピペした後 Enter キーを押す。

検索結果にはパッケージ情報と共にダウンロード数も表示されるため、評価の目安になる。パッケージ情報の Install ボタンを押すことでインストールできる。

検索結果として既にインストールしたパッケージも混在して表示される。ここから設定変更とアンインストールを実行できる。同一キーワードで検索ヒット = 類似パッケージとみなせるので、もし既存より好ましいものを見つけたなら、同じ画面で入れ替えも可能。実に便利だ。

autocomplete-paths

パスの入力補完を提供してくれるパッケージ。Sublime Text の AutoFileName に相当する。

入力補完は 引用符のない箇所でも反応 する。そのためコメントやプログラミング言語ではないファイルでのパス記述がはかどる。

あいまい検索 にも対応している。例えば ./a のように入力した場合、そのファイルと同一階層にある a を含むファイルとフォルダが補完候補として表示される。適当に入力を開始して候補をみてから絞り込めるのが便利。ファイル、フォルダの存在確認にも有用。

color-picker

Atom にグラフィック ツールのようなカラー ピッカー機能を追加するためのパッケージ。

カラー ピッカーはエディタのコンテキスト メニューから呼び出す。メニューから Color Picker を選択することで表示され、上部のテキスト部分をクリックすることでエディタ上の色指定テキストが貼り付けられる。

また、CSS や Stylus 上の色指定テキストに対してカラー ピッカーを呼び出すと、その色が入力された状態で表示される。それを基準に明暗や RGB や HEX などの表記を変更して元のテキストを置換できる。

docblockr

DoxygenESDoc のようなコード ドキュメント生成ツール向けの書式指定コメントを自動生成するためのパッケージ。Sublime Text の DocBlockr に相当する。

コード中の変数や関数の真上で /** と入力した後に 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 ) {
}

Sublime Text の DocBlockr と異なり IME の問題はない。パッケージからインストールしたものをそのまま利用できる。

emmet

HTML や CSS の記述を効率化するための Emmet スニペットを提供するパッケージ。

スニペットに続けて

TAB を押すことで HTML/CSS テキストが展開される。また background-color を入力補完してくれるのも便利。この補完はあいまい検索になるので、うろ覚えのプロパティ名を確認するのにも役立つ。

Emmet 自体の機能やスニペットについては Emmet Documentation を参照のこと。多数のエディタで対応され、広く普及しているので詳細は割愛。

余談。これまで HTML5 テンプレート用スニペットを html:5 としていたのだが、最近 ! で書けることを知った。Cheat Sheet には Alias of html:5 とある。このスニペットは多用するので短縮はありがたい。

file-icons

Atom のサイドバーやタブへファイル種別に応じたアイコン表示を提供するパッケージ。

同じ機能をもつパッケージは他にもあるけれど、今のところ外観ではこれが好み。対応種別も多く Web フロントエンド開発のように多様なファイルを扱うプロジェクトでも大抵のファイルは区別してくれる。

アイコンがフォントとして定義されているのが面白い。Atom の Web アプリっぽい側面がかいま見えるようだ。フォントには標準の他、Font AwesomeIcoMoon も付属しており、User Stylesheet でそれらのアイコンを割り当てるとか、対応するファイル種別を追加するなどのカスタマイズもおこなえる。

highlight-selected

選択されているテキストと同じものを Sublime Text のようにまとめて強調する機能を提供するパッケージ。

プログラミングにおいて変数などの使用状況や Typo を確認するなど、地味ながら有効である。

keybinding-cheatsheet

Atom のキーボード ショートカット一覧を表示するパッケージ。

一覧の絞り込み選択も可能。ただし残念なことにキーワードとして指定できるのはコマンドだけ。あいまい検索をサポートしてくれるとありがたいのだが。

Atom を本格的に使い始めて日が浅いため、たまに表示して眺めている。このパッケージにより + D で Sublime Text みたいに同一複数キーワードの一括編集が実行できることを知った。

language-babel

ES201x JavaScript、React JSXFlow の強調表示やコンパイル機能を提供するパッケージ。

Atom は標準で ES2015 ( ES6 ) のキーワード強調に対応しているが JSX のタグなどを強調したい場合、このパッケージが必要。React 関係なら他に react もあるが、language-babel は JSX で JavaScript を入れ子にするときの波括弧なども強調してくれるのでこちらを採用。

babel/babel-sublime と異なり、このパッケージは Babel 運営ではなく個人開発のようだけど作者である Graham 氏は Babel 関係者なのだろうか?機能は実用十分だが、個人だと Babel の変更に追従するだけの開発リソースを維持できるか心配である。

##linter

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

このパッケージがランタイムとなり、言語ごとの linter-XXXX プラグイン が動作する仕組みになっている。

linter-eslint

linter-eslint は ESLint を利用した JavaScript の構文チェッカー。このパッケージは使用するための準備や設定をミスると JavaScript を開くたびにエラーがおきて厄介なため、細かく解説する。

パッケージを使用する前に Node と ESLint を用意する。私は Node を Homebrew で管理している。hokaccha/nodebrew や公式インストーラを利用してもよい。ESLint はプラグインも含めてグローバルにインストールしている。

$ npm i -g eslint eslint-plugin-react

これらを用意した後、Node と ESLint のパスが通っていることを確認する。コマンドライン実行してバージョン情報が表示されれば OK。エラーになった場合は環境変数を見直すなどして、パスを通しておくこと。

$ node -v
v5.1.0
$ eslint -v
v1.10.1

準備ができたら linter-eslint の設定をおこなう。以下は私の設定とその解説。

設定 解説
Disable using .eslintignore files .eslintignore を無効にする。この定義ファイルを使うことはなさそうなので無効にしておく。
Disable when no ESLint config is found (in package.json or .eslintrc) ESLint 設定がない場合、構文チェックを無効にする。設定がないときに想定外の動作をされたら嫌なので無効にしておく。
ESLint Rules Dir ESLint の追加ルールを読み込む対象となるディレクトリのパス。ESLint CLI でいう --rulesdir のことだと思われる。使用しないので空欄。
.eslintrc Path /Users/XXXX/.eslintr ESLint 設定ファイル .eslintrc のパス。私はホーム ディレクトリ直下に置いている。なお ~/ のような略記はエラーになるためフルパスで入力すること。
Global Node Installation Path /usr/local グローバルにインストールされた Node のパス。パスは解説どおり npm get prefix で取得可能。初め、Node のパスとあったので which node から取得したフルパスを設定したらエラーになってしまった。
Lint HTML Files HTML ファイルのチェックを有効にする。追加プラグインが必要なうえチェックを使うことはなさそうなので無効。
Show Rule ID in Messages 構文チェックにヒットした場合、ESLint のルール ID を表示する。どのルールで問題になったかを知りたいので表示。
Use global ESLint installation グローバルにインストールされた ESLint を使用する。Sublime Text とグローバルの ESLint を共用しているため、使用する。gulp や npm-scripts からプロジェクトのローカル ESLint を実行しているのであれば、この設定をチェックせず、そちらを使うようにしたほうがよいだろう。

環境と設定が適切ならば、構文チェックで問題となった箇所の情報がウィンドウ下部にポップアップされるはず。パッケージ自体のエラーが起きた場合はウィンドウ右上にエラー メッセージが表示される。ひとつでも設定に問題があるとエラーになるうえ、メッセージはパッケージのスクリプトに関するエラー情報なので原因を特定しにくい。

私は雑に設定してエラー解決に苦労したが、説明をよく読んで慎重に設定すれば特にハマりどころもないはず。

oceanic-next

Sublime Text で愛用していた Color Scheme の Atom 版。Atom では Theme を UI Teme、Color Scheme を Syantax Theme と呼ぶらしい。

配色は Sublime Text のものと同様で違和感もない。ちなみに UI Theme は Atom 標準の one-dark-ui にしている。標準ながら Flatland や Cobalt2 みたいなフラット系でかっこいい。

open-recent

Atom の File メニューに Open Recent を追加するパッケージ。

Open Recent とは、最近開いた項目の選択機能である。他のエディタだと標準で用意されていることの多い機能だが Atom は別パッケージになっている。いずれ標準化されそうな気もするけど。

標準設定だと Open Recent で選択した項目は別ウィンドウに開かれる。これを現在のウィンドウに変更する場合はパッケージ設定で Replace Project On Open Directory を有効にすればよい。私はなるべくウィンドウを増やしたくないのでそうしている。

pigments

色指定テキストの背景を対応する色で強調表示してくれるパッケージ。Sublime Text の Color Highlighter に相当する。

対象ファイルを変更する場合は Supported Filetypes へ明示的に拡張子を指定すること。私は面倒なのでそのままにしている。

強調方法を背景以外にすることも可能。私は標準の background が最もわかりやすいと感じる。外観は dot のほうが好みだけど、文中に色指定があると後続のテキスト上にかぶさって邪魔なので却下。

Stylus

Stylus の構文強調とスニペットを提供するパッケージ。

私は AltCSS に Stylus を採用しているので必須。機能は構文強調しか利用していない。スニペットは Emmet のもので十分。

余談。これと Sublime-Style-Column-Selection は他のパッケージと異なり名前が大文字で開始されている。そのため恐らく辞書順ソートしているであろう Packages などの並びで先頭のほうに居座ってうっとおしい。

大文字・小文字を区別せずソートするか、パッケージ名に一貫したルールを強制するなどの対応を希望する。

Sublime-Style-Column-Selection

Sublime Text でおなじみ、マウス操作によるテキストの矩形選択を提供するパッケージ。

パッケージ情報に入力方法が掲載されておらず、たまにしか使わない Windows での操作方法を忘れるので以下にメモっておく。

  • OS X
    • を押しながらマウスをドラッグ移動
  • Windows
    • Ctrl を押しながらマウスをドラッグ移動

Windows の動作は VMware FUSION 上の環境で試した。そのため Ctrl に変換されて渡される。おそらく素の Windows でも Ctrl で矩形選択になるはず。

その他

その他、気になることや備考などをまとめる。

複数環境でパッケージのインストール設定を共有する

複数の環境で Atom を利用する場合、パッケージのインストール設定を共有したくなる。そんなときは apm list コマンドで共有元のパッケージ一覧をファイル出力し、

$ apm list --installed --bare > apm.txt

共有先で一覧をもとに ‘apm install’ コマンドを実行することでパッケージを一括インストールできる。もちろん Windows でも OK。Atom をインストールすると自動的に apm コマンドが登録されるため、Windows 環境ならコマンド プロンプトや Power Shell から実行可能。

$ apm install --packages-file apm.txt

以下、参考記事。

後者の記事では sync-settings を利用して Atom 自体の設定も共有する方法が紹介されている。初期設定は面倒だが、いちど実行しておけばこちらのほうがよさそう。設定を頻繁に変更するなら検討する。

過去に外部パッケージ提供されていたもので標準化された機能

古い Atom パッケージ紹介記事を読むと現在では標準機能に取り込まれたものが散見される。それらをインストールすると問題が起きることもあるため、私が調べた範囲でまとめておく。

Developer Tools

Atom の設定やエラー UI テキストをコピーしたくなったり、User Stylesheet でカスタマイズするために UI 構造を知りたくなった場合は Developer Tools を呼び出すとよい。ショート カットキー は OS X が + + I、Windows なら Ctrl + Alt + I になる。

機能は Chrome の Developer Tools と一緒なので、特に触れない。

JavaScript 部分は Source Maps を同梱しているのだろうか、Sources をみると元の CoffeeScript によるコードが復元された状態で読める。ブレークポイントも貼れるので、Electron アプリの動作を学ぶ参考資料としてもよい。

まとめ

Sublime Text の開発が停滞する一方、Atom は頻繁に機能強化されているため、過去に何度か乗り換えを検討したことがある。しかし全体的に動作がモッサリしているとか、数 MB ほどのファイルでもエラーになるなどの問題から踏みきれずにいた。

しかし v1.1 あたりからパフォーマンスが大幅に向上し、大きなファイルを開くときのエラーも解決するなど、懸念が一気に解決された。また開発者として Electron に触れるうち、その実用例としても Atom に注目せざるを得なくなった。Electron アプリで実現したい機能があるとき、Atom のリポジトリはとても参考になる。

以上を踏まえ、Sublime Text とほぼ同等の環境を構築してみた。ここ数日、業務のプログラミングを Atom でこなしてみたが特に不満もない。むしろ Git や Markdown 対応、強力な入力補完など Sublime Text を上回っていると感じた部分もある。

というわけで本格的に Atom へ乗り換えようと思う。最後に Atom で特に気に入った機能を列挙する。

  • Git 対応
    • 標準で Git リポジトリを考慮した UI になっている
    • ファイルを追加・変更したとき、ツリービューでフォルダも強調表示してくれる
    • 行番号横とステータスバーに変更状態を通知してくれる
    • ツリービュー上でリポジトリとそれ以外のフォルダが異なるアイコンになって識別しやすい
    • ツリービュー上で .gitignore に設定したファイルとフォルダが異なる色で表示されて識別しやすい
  • inter のメッセージ表示
    • ステータスバーだけでなく、エディターの当該部分にもバルーンを表示してくれる
    • 見た目もかっこよい
  • Markdown 対応
    • リアルタイム プレビューは便利
    • プレビューは Atom 内で分割表示されるため、ウィンドウを増やさずに済む
  • ECMAScript 対応
    • 標準で ES6 構文の強調や補完が効く
  • パッケージ管理
    • 組み込みになっているので操作や設定が Atom 内で完結する
    • パッケージ一覧を標準で export/import する仕組みがあって便利
    • パッケージ設定が GUI 化されており、わかりやすい
    • パッケージ情報に Web サイトのリンクやダウンロード数が掲載されており、採用可否の目安として有用

Sublime Text 設定 & 利用パッケージ 2015

2015年11月30日 0 ソフト紹介, 開発 ,

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 上で installremovelist と入力するとコマンドが絞りこまれる。その中の Package Control: で始まるものを選択して Enter を押すことでパッケージの追加、削除、一覧表示を実行できる。

利用パッケージ

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

AutoFilename

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

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

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

Babel

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

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 は括弧の対応を強調するためのパッケージ。

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

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

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

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

ConvertToUTF8 & Codec33

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

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

Color Highlighter

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

標準設定だと色を指定している箇所を選択したときだけ強調されるのだが、常に強調されたほうが便利なの 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 は Sublime Text 以外のテキスト エディタにも対応しており、既に広く普及していると思われるため、特別、ここでは機能について解説しない。記法も共通なので、どこかで覚えれば Sublime Text でもそのまま通じる。

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

GitGutter

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

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

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

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

Oceanic Next Color Scheme

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

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

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

OmniMarkupPreviewer

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

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

Platform Shotrcut
Windows, Linux Ctrl + Alt + O
OS X + + O

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

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

SideBarEnhancements

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

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

Stylus

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

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 はコード ドキュメント用のコメントを自動生成するためのパッケージ。

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

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 ) {
}

私は DoxygenESDoc などのコード ドキュメント生成ツールを愛用しているため、これらに対応したコメントを自動生成するため、このパッケージが重宝している。

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

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

SublimeLinter & SublimeLinter-contrib-eslint

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

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

Theme – Cobalt2

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

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

IMESupport

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

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

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

環境設定

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

Ricty Diminished

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

上記ページから 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
}

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

Property Value Comment
color_scheme Packages/User/SublimeLinter/Oceanic Next (SL).tmTheme Color Scheme に Oceanic Next Color Scheme を使用するための設定。これは直に書かなくてもメニューから設定できる。
draw_white_space all 空白とタブ文字の表示設定。すべて可視化している。
enable_tab_scrolling false エディタ上部のタブにおけるスクロール設定。私はあまりタブを開かないので、スクロール用の UI が邪魔に感じるため無効にしている。
folder_exclude_patterns [ “.git”, “node_modules” ] サイドバーで除外するフォルダ名のパターン指定。Git リポジトリの設定フォルダと npm のインストール先を無効化している。後者を含めてしまうと Sublime Text のバックグラウンド解析が走ったときに対象となり、CPU 使用率が非常に高くなったりする。npm v3 で node_module がフラット化されたことにより、この問題は解決された可能性もある ( 試してない )。
font_face Ricty Diminished Regular 表示フォント。前の項で解説したものを指定。
font_size 15 フォントのサイズ。大きめにしている。
highlight_line true カレント行の強調表示。視認性が増すので有効にしている。
ignored_packages [ “Vintage” ] 無効にするパッケージ指定。デフォルトのまま。
show_encoding true 開いているファイルの文字エンコーディング表示設定。有用な情報なので表示している。
show_full_path true タイトルバーに開いているファイルのフルパスを表示する設定。たまに階層を知りたくなる時があるので表示している。
tab_size 2 タブのサイズ。昔は 4 にしていたが、Node や最近の JavaScript ライブラリとサンプルでは 2 を採用しているものが多く、それらを利用するうちにこの設定で馴染んだ。
theme Cobalt2.sublime-theme Theme に Cobalt2 を使用するための設定。
translate_tabs_to_spaces true タブをスペースに変換する設定。ハードタブ派なので変換する。
word_wrap true テキストがウィンドウ幅に収まらない場合、折り返しをするための設定。横スクロールバー操作が面倒なので有効にしている。

まとめ

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

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

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

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

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

Sublime Text で Cobalt2 と Flatland を組み合わせる

2015年1月5日 0 ソフト紹介 , ,

Sublime Text でも Atom みたいにサイドバーでファイル種別ごとのアイコンを表示したいと思っていたら Cobalt2 というテーマで実現されていた。GitGutter にも対応していたりして多機能である。

しかしエディタ部分の配色は長らく愛用していた Flatland のほうが好み。ならば組み合わせて利用しよう。さいわい Sublime Text の外観は UI 部分の theme とエディタ配色の color_scheme を個別に設定できる。

Package Control から Cobalt2 と Flatland をインストールした状態で Preferences の Settings – User に以下の設定を定義すると…

{
    /* ...中略... */
    "color_scheme": "Packages/User/Flatland Dark (SL).tmTheme",
    "theme": "Cobalt2.sublime-theme"
}

こんな感じの外観になる。なかなかいい感じ。

Cobalt2 と Flatland の組み合わせ

あと Sublime Text 3 で追加されたエディタ上部のタブ端に表示されるスクロール用の矢印が邪魔だと思っていたのだけど、これは enable_tab_scrolling を false にすることで無効化できた。今回のテーマ & 配色とあわせればかなりスッキリした外観になる。