Web制作環境を整える その2 – Sublime Text 3 の外観をカスタマイズする

Sublime Text のアピアランス

モチベーションは見た目から。私はカタチから入る性質なので、まずは色とフォントをカスタマイズするとします。
とりあえず、ダミーテキストを流し込んだ状態をチェック。文字間が詰まりすぎで、途中で切れてしまっていますね。

フォントを設定する

[Preference] – [Font] を選びたいところですが、ここは文字の拡大・縮小だけです。なので、[Preference] – [Setting – User] を開きます。すると、次のようなファイルが表示されます。

予備知識のない人は「ナニコレ?」って感じになりますが、これはJSON(ジェイソン)という形式の記述法です。JavaScriptのオブジェクト表記の方法ですが、JavaScript のみならず、いろいろなシーンで利用されています。
このファイルに設定項目を書き加えていく事で、機能をカスタマイズしていきます。

試しに、この設定ファイルを一度閉じて [Preference] – [Font] – [Larger] を選択した後、もう一度設定ファイルを開いてみましょう。すると、内容が次のようになりました。

「font_size」ってのが追加されました。もっと文字を大きくしたければ、この値を大きくすればいいです。他にはどんな設定項目があるかは、[Preference] – [Setting – Default] を開いて確認できますが、わかりやすく解説されている方がいますので、そちらをチェックしてみるといいでしょう。

Windows – SublimeText 3の基本設定 – Qiita

基本設定には Default, User, More の3つがあります。基本設定を変更したい場合は、Default には手をつけず、[Setting – User] を変更するようにしましょう。Sublime Text 3 では Default は編集不可になっていますしね。

私なりに編集した設定は、次のようになりました。

Webのコーディング作業では、文字コードや改行コードって結構気を使います。Sublime Text 3 では、基本設定で「show_encoding」と「show_line_endings」という設定が追加されました。
Default では無効(false)になっていますが、これを有効(true)にすると右下に表示が追加され、クリックする事で変更する事もできます。
「Windows」とか「Unix」という表記になっていますが、Windowsが「CR+LF」、Unixが「LF」、Mac OS 9が「CR」の改行コードになります。

ちなみに、Default に記載されていない「detect_slow_plugins」の項目は、追加パッケージで動作が遅くなる場合に表示される警告ダイアログを抑制する設定です。

カラースキームを変更する

黒背景じゃなくて白背景がいいなって人も居るでしょう。Sublime Text ではカラースキームやテーマというもので、背景の色や、文字の色などを変更できます。標準でも22個のカラースキームが用意されています。試しに [Preference] – [Color Scheme] から変更してみましょう。

色の設定が変更されると同時に、設定ファイルの「color_scheme」の項目が変更されているのがわかります。

テーマは他にも、有志の方が公開してくれているものが無数にあります。
Colorsublime というサイトでは Sublime Text のテーマをまとめてあります。眺めているだけでも楽しいです。

今回は、その中でも人気のテーマである「Flatland」を Package Control からダウンロードしちゃいます。

Ctrl + Shift + p を押して「Package Control: Install Package」から「Theme – Flatland」を選択してインストールします。インストールが完了したら、 [Preference] – [Color Scheme] に「Theme – Flatland」が追加されました。私は「Flatland Dark」をチョイスします。ただし、メニューから変更できるのは、設定ファイルの「color_scheme」の項目だけです。ボタンやタブのデザインも変更したい場合は、設定ファイルに

を追加してください。

パッケージの動作が怪しかったり、気に入らなかったときは、コマンドから「Package Control: Remove Package」で削除してください。

シンタックス別に外観を変更する

先ほどまでの設定は、コーディングの為のエディタとしてのカスタマイズを施してきましたが、通常のテキストを読む場合なんかは行番号とか必要ないですよね。
という事で、Plain Text シンタックスの時の外観を変更してみます。

適当なテキストファイルを用意して開きます。右下のシンタックスが 「Plain Text」なのを確認。別のシンタックスだったら変更してください。その状態で、メニューの [Preference] – [Settings – More] – [Syntax Specific -User] をクリックしてください。

まっさらなタブが開いたら、そこに基本設定と同じ様にJSON形式で設定を書いていきましょう。 Default -> User -> Syntax の順番で設定ファイルが読み込まれるってことですので、上書きが必要な項目だけ追加していきます。

こんな風に、作業によってカラーやフォントを使い分けるのも楽しく作業する助けになるでしょう。

次回は、Vimライクな操作感に変更する「Vintage」パッケージを導入してみます。