Sublime Text 3

今回はSublime Textのさまざまなパッケージの中から、個人的にもよく使っているおすすめのものを紹介します。

バージョン管理システム

よく使われるバージョン管理システム対応パッケージとして以下が挙げられます。

  • SVN(有料パッケージ(無期限の評価利用可能))
  • TortoiseSVN
  • Git
  • TortoiseGIT

Mac/LinuxはSVN、WindowsはTortoiseSVNがある。
TortoiseSVNは同名のソフトウェアのラッパーとして動作します

また、Gitに対応したパッケージでは、 Git、TortoiseGITがあります。
TortoiseGITは同名ソフトウェアのラッパーとして動作します。

マテリアルデザインテーマ

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

Material Themeサンプル画像

既存のシンプルすぎるテーマに飽きてきた方は是非試してみてください。

インストールの際、テーマで使用する【A File Icon】というアイコンパッケージのインストールも求められるので、インストールしておきましょう。

インストール後、以下のようにテーマを反映します。

  1. Preferences -> Package Settings -> Material Theme -> Activate
  2. いくつかのカラーパターンが表示されるので、お好みを選択してEnter

テーマ反映後、Sublime Textを再起動します。

再起動後は、タブのサイズなどの細かいオプションは、以下から設定できるようになります。

Preferences -> Package Settings -> Material Theme -> Configuration

マテリアルデザイン用パネル

Material Themeを入れたら【Material Theme – White Panels】も入れておきましょう。
コマンドパレットで表示されるパネルを、マテリアルデザインにしてくれます。

Material Theme - White Pannel 画面サンプル

インストール後、Sublime Textを再起動すると、コマンドパレットのデザインが変わっています。

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

[Ctr + shift + F]を実行してみるとわかりやすいですが、入力フォーム全体が見えないバグです。

境界線が見えないのでわかりにくいですが、入力フォーム上部にカーソルを合わせてリサイズしSublime Textを再起動すると、以降このバグは発生しなくなります。

参考

サイドバーの右クリックメニューを拡張

「SideBarEnhancements」はサイドバーにある「プロジェクトエリア(※1)」のファイルやフォルダーをクリックした際に表示されるメニューを拡張するプラグインです。

インストールしたら、サイドバーで右クリックしてみましょう。

Before After
プロジェクトの右クリックメニュー(デフォルト) SideBarEnhancementsのプロジェクト右クリックメニュー

メニューがかなり充実しました。

  • 補足
    プロジェクトエリアとは、任意のフォルダをSublimetextの左端にドラッグ&ドロップすることで、サイドバーとしてディレクトリが表示されます。
    その他に、上部メニューの「Project」 -> 「Add Folder To Project」からでもフォルダ追加が可能です。
    そこからファイルの名前の変更、ディレクトリ内検索、画像のプレビューなどができるようになるわけです。

ファイルの簡単新規作成

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

【AdvancedNewFile】というパッケージを利用すると、【Ctr + alt + N】のあとにルートディレクトリからのパスとファイル名を入力すると、新たに作成するファイルと一緒に、作成されていないディレクトリも同時に作成してくれてとても便利です。

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

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

【Ctr + alt + N】でSublime Textウィンドウの下部に入力フォームが表示されます

文字化け解消

SublimeText3を使う際にShift_JISを文字化けしないようにする【ConvertToUTF8】を紹介します。
Shift_JISで書かれているcsvファイルをSublimeText3で開くと文字化けするので、こちらのプラグインを入れましょう。

Markdown対応

2017/08/31時点でインストールした[build 3126]では、Markdown用のシンタックスハイライトが標準で用意されています。

私は.txtファイルもmarkdownのシンタックスで開きたいので、以下のように設定します。

.txtファイルを開く -> View -> Syntax -> Open All with current extension as… -> Markdown -> Markdownを選択

こうしておけば、txt拡張子のファイルも、すべてmarkdownのシンタックスが適用されます。

Markdownをブラウザでリアルタイムプレビュー

【OmniMarkupPreviewer】はマークダウンで編集中のテキストをブラウザでリアルタイムプレビューするプラグインです。
マークアップされた形式で表示されるので、レイアウトを確認しながらテキストを編集することができます。

ただ、こちらSublimeのBuild 3126のOmniMarkupPreviewerで書いたテキストをブラウザでプレビューしようとしたら、ブラウザに以下のようなエラーが表示されました。

Error: 404 Not Found
Sorry, the requested URL ‘http://127.0.0.1:51004/view/28’ caused an error:
‘buffer_id(28) is not valid (closed or unsupported file format)’
NOTE: If you run multiple instances of Sublime Text, you may want to adjust the server_port option in order to get this plugin work again.

調べたところ、OMPに組み込まれているMarkdownエクステンション「strikeout」が悪さをしているらしいので、これを無効にすればいいみたいです。

https://github.com/timonwong/OmniMarkupPreviewer/issues/85

↑でscumlさんが提示している「Quick Fix 1」の方法で解決しました。

Preferences → Package Settings → OmniMarkupPreviewer → Settings – User に以下のコードをコピペする。

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

日本語入力

Sublime Textは、デフォルトだと日本語入力をするとき、入力文字がインライン上に表示されません。
【IMESupport】はSublime Textで日本語入力をする際に、IMEを利用した文字入力をサポートするパッケージです。
IME でインライン変換の入力文字が正しい位置に表示されない問題をある程度解決できます。

特定の記号で列を揃える

【Alignment】は”=”などの特定の記号で、選択範囲のコードの列をそろえてくれます。

整列させたい範囲を選択して、「Ctr + Alt + A」を押すと、整列します。

デフォルトでは“=”“:”だけが対象になっているようですが、他の文字にも対応させたい場合は以下のように設定します。

Preferences → Settings -> Userを開いて、以下の箇所に対応させたい文字を追加します。

今回は例として”-“を追加しています。

"alignment_chars": [ "=", ":", "-"],

以上が、私がおすすめするSublime Text3のおすすめプラグインでした。
ぜひ活用してみてください。