LoginSignup
317
310

More than 5 years have passed since last update.

@saltyshiomix(Yoshihide Shiono)

いま話題のSublime Textのテーマやおすすめの設定・使用例を醸す

Last updated at Posted at 2015-06-15

前提

以下を対象読者として想定しています。

  • Sublime Textを利用したことのある方
  • Sublime Textのテーマをいくつか試してみたがいまいちパッとせん方ｗ
  • あんまりカスタマイズしたことないが、いつかはやってみたいと思っていた方

また、作業環境として以下数点を前提としています。

  • パッケージのインストールに利用するPackage Controlの設定は完了している
  • Macユーザー（Windowsの方はコマンドや設定方法などが多少異なります）
  • PHPユーザーでHomebrew / Composerなどの用意がある（任意）

Material Theme

注記：Material ThemeはSublime Text 3のみのサポートです。
（Sublime Text 2でも手動でインストールすることができますが、せっかくのMaterialなファイルアイコンが表示されないので、あまりおすすめできません。）

いまDribbbleやRedditなどで話題のSublime Textのテーマです。
GoogleのMaterial Designを採用しており、シンプルかつ見やすく、洗練されたデザインで気に入っています。

つい先日Package Controlでインストールできるようになったばかりなので、既存のシンプルすぎるテーマに飽きてきた方は是非試してみてください。

Material Theme Image

GitHubもWatchしていますが、わりと活発に修正や意見が交わされています。
GitHub Star数も、数日前は500程だったのが2015/06/15現在で800を超える2015/06/23現在で2500を超えるほど人気が上昇しています。リロードする度にStar数が増えている印象です笑。

今後Lightカラーやタブのサイズ調整機能などの多くの修正・改善が加わるようですので、注目のテーマです。

インストール

  • Package Controllで「Material Theme」を検索し、インストール
    • コマンドパレット（⌘ + shift + P）で「Package Controll: Install Package」を入力
    • 「Material Theme」を検索し、インストール
  • テーマを反映させる
    • ⌘ + ,で設定を開き、以下をペースト
    • Sublime Textを再起動する

Default Theme

Preferences.sublime-settings
{
    "theme": "Material-Theme.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}

※Package Controlからのインストール時に上記は自動で書き換えてくれるのですが、color_schemeのパスが間違っているバグが以前ありました。もしこのバグが出た場合は、上記と同じパスに修正すれば解決できます。

Darker Theme

Preferences.sublime-settings
{
    "theme": "Material-Theme-Darker.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme"
}

Lighter Theme

Preferences.sublime-settings
{
    "theme": "Material-Theme-Lighter.sublime-theme",
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Lighter.tmTheme"
}

Optional Theme Settings

オプションで以下の設定を追加できます。

Preferences.sublime-settings
{
    "material_theme_small_tab": true,                // タブを小さくする
    "material_theme_disable_fileicons": true,        // サイドバーのファイルアイコンを隠す
    "material_theme_disable_folder_animation": true, // フォルダのアニメーションを無くす
    "material_theme_small_statusbar": true,          // 下部ステータスバーを小さくする
    "material_theme_disable_tree_indicator": true,   // サイドバーの「現在開いてるタブ」の指標を無くす
    "material_theme_bold_tab": true,                 // タブを太字にする

    // タブやフォルダなどのアクセントカラーをデフォルト以外に5色から選択可能
    "material_theme_accent_lime": true,
    "material_theme_accent_purple": true,
    "material_theme_accent_red": true,
    "material_theme_accent_orange": true,
    "material_theme_accent_yellow": true,
}

White Panel

  • コマンドパレット（⌘ + shift + P）で「Package Controll: Install Package」を入力
  • 「Material Theme - White Panels」を検索し、インストール

White Panel

開発者おすすめの設定

{
    "overlay_scroll_bars": "enabled",
    "line_padding_top": 3,
    "line_padding_bottom": 3,
    "font_options": [ "gray_antialias" ], // RetinaのMacの場合
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
}

Recommended Settings for Material Theme

font_optionsは設定しないほうが、RetinaではないMacでは見やすいかもしれません。
Recommended Settings 2 for Material Theme

あとはフォントサイズ変えたりと自分好みの設定を追加すればいいと思います。
Recommended Settings 3 for Material Theme

バグを修正する

開発者の方曰く、Sublime Text自身のバグの影響で生じているバグがいくつかあるので、それらを修正する方法を紹介します。

⌘ + Fや⌘ + shift + Fなどの入力ボックスが正しく表示されないバグ

⌘ + shift + Fでわかりやすいですが入力フォーム全体が見えないバグです。

境界線が見えないのでわかりにくいですが、上記のGIFのように、入力フォーム上部にカーソルを合わせてリサイズしSublime Textを2回再起動ｗすると、以後このバグは発生しなくなります。
（なんだかコナミコマンドみたいな裏ワザチックなバグは久々に見ました。。ｗ）

Markdownファイルの中央寄せをなくす

これはバグではないのですが、Material Themeでは.mdファイルがデフォルトで中央寄せになっています。
通常の見た目に慣れていた私は一瞬表示のバグかなと思いました。好みの問題ですが、修正したい方は以下のようにしてください。

  • .mdファイルを開いた状態で、Preferences > Settings - More > Syntax Specific - Userを開く
  • { "draw_centered": false }を追記する
Markdown.sublime-settings
{
    "draw_centered": false
}

おまけ: Sublime TextのアイコンをMaterial Themeにする

アプリケーションアイコンまでMaterial Themeにしたい方向けｗ

  • ここからアイコンをダウンロード
  • Finder > アプリケーション > Sublime Text.appを右クリック > 情報を見る
  • .icnsファイルを「情報を見る」ウィンドウ左上のアイコン上にドラッグ&ドロップ

STでよく利用するコマンド群

ファイル新規作成 : ⌘ + alt + N

Sublime Textのデフォルトのファイル新規作成コマンド⌘ + Nでは、ファイルを作成後いちいちファイル名や保存先パスの指定を行わなければならず、意外と不便です。

AdvancedNewFileというパッケージを利用すると、⌘ + alt + Nのあとにルートディレクトリからのパスとファイル名を入力すると、新たに作成するファイルと一緒に、作成されていないディレクトリも同時に作成してくれてとても便利です。
（なぜこの機能がないのか逆に疑問ですがｗ）

Material Themeを利用する場合、上で紹介した入力フォームが表示されないバグがあるので、同様に入力フォームのリサイズとSublime Textの再起動を行ってください。

正しく設定されると、⌘ + alt + NでSublime Textウィンドウの下部に入力フォームが表示されます。

Create sample file

一応インストール方法も書いておきます。

  • コマンドパレット（⌘ + shift + P）で「Package Controll: Install Package」を入力
  • 「AdvancedNewFile」を検索し、インストール

ファイル検索 : ⌘ + P

Sublime Textにデフォルトで備わっているコマンドで、⌘ + Pのあとに検索したいファイル名を入力し選択すると、ルートディレクトリ以下のあらゆるファイルを一発で開けるコマンドです。

Material Themeを導入している場合、下記のような見た目になります。

プロジェクトのディレクトリ構造がある程度把握できてくると、サイドバーからいちいちディレクトリをたどって目的のファイルを開くよりも、はるかに高速かつ簡単に目的のファイルに到達できるようになります。

検索の候補も複数表示してくれるので、ソースコードを追う際や、ディレクトリ的に離れたファイルの編集などにとても重宝します。

このコマンドと上記の新規ファイル作成コマンドに慣れてくると、サイドバーの必要性がほぼ皆無になってくるので、私は⌘K, ⌘Bでサイドバーを閉じたままあらゆるファイルを開き、コーディングしています。
（またサイドバーを開きたくなったときは、同じ⌘K, ⌘Bでサイドバーを開くことができます。）

メソッド検索 : ⌘ + R

正確にはメンバ検索と言ったほうがいいかもしれませんね。

現在開いているファイルに記述されているメソッドや変数の一覧を表示・選択(ジャンプ)できるコマンドです。

上で既に紹介した⌘ + Pでファイルを開いてから、どんなメソッドあったかなーと考えながら⌘ + Rをすることが多いです。

コーディングスタイルの適用 : ⌘ + B

いわゆるビルドコマンドというやつですね。

現在開いているファイルに対し、ある特定のコーディングスタイル(要設定)を適用してくれるコマンドです。
（PHPのファイルを開いてる場合、例えばのコーディングスタイルにこのコマンド一発で修正してくれます。）

今回はPHPでPSR-2のコーディングスタイルを⌘ + Bで実行できるようにする方法を紹介します。

まずphp-cs-fixerコマンドが実行できることが必要なので、以下のコマンドで導入してください。

  • Composerの場合
    • $ composer -g require fabpot/php-cs-fixer
    • .bashrcなどにexport PATH="$PATH:$HOME/.composer/vendor/bin"を追記してパスを追加
  • Homebrewの場合
    • $ brew install homebrew/php/php-cs-fixer

導入方法の詳細はPHP-CS-FixerのGitHubを参照してください。

このphp-cs-fixerコマンドの使用例は以下のようになります。

// PSR-0でファイルを変換
$ php-cs-fixer fix /path/to/file --level=psr0

// PSR-2でディレクトリを一括変換
$ php-cs-fixer fix /path/to/dir --level=psr2

このphp-cs-fixerコマンドを、Sublime Textの⌘ + Bにマッピングするには以下のようにします。

  • Tools > Build System > New Build System...を選択
  • 以下を入力して、PHP.sublime-buildというファイル名で保存
PHP.sublime-build
{
    "shell_cmd": "php-cs-fixer fix $file --level=psr2"
}

これでTools > Build SystemにPHPが加わり、現在開いているファイルがPHPファイルであれば、⌘ + Bで上記のビルドコマンド(php-cs-fixerコマンド)が実行され、PSR-2に変換できます。

また、Tools > Build SystemでAutomaticが選択されていることを確認してください。
これにより⌘ + Bを叩いた際に、現在開いているファイルに基いてビルド方法が振り分けられます。

おわりに

Material Themeの布教みたいになってしまいましたが、自分はミニマリズム寄りなので、今回は以下を満たすものをピックアップしてみました。

  • なるべく多くの人に共通して役に立ちそうなもの
  • 学習コストが低く、シンプルさを損なわないもので、かつ開発効率やモチベーションを上げることができるもの

特にSublime Textをはじめ、エディタには覚えきれないほどのコマンドや機能がありますが、その中でも覚えやすく、コーディングをより楽しくしてくれるものはこのあたりなのかなと思います。

他にもこんなのあるよという方は、コメントでお知らせ頂ければ幸いです。

それではよいSTライフを！

317
310
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
317
310