クリエイティブなWeb制作に
役立つ情報メディア

Sublime Textプラグインまとめ

テキストエディタの中でも高い人気を誇るSublime Text。
プラグインも豊富に備えており、便利なプラグインを導入すれば飛躍的に使い勝手が向上します。
今回は普段使用しているプラグイン一覧をいくつか紹介したいと思います。

Sublime Textのダウンロードはこちらから!
PackageControlのインストールはこちらから!

プラグインのインストール手順は
1.PackageControl(Ctrl+Shift+P)を開く。
2.Install Packageを実行する。
3.プラグインを探す。
と簡単にできます。


基本プラグイン

とりあえず入れておいて損はないリストです。

BracketHighlighter

https://packagecontrol.io/packages/BracketHighlighter

開始タグに対応した終了タグをハイライト表示してくれます。
デフォであって当然なくらい必須なプラグインですね。


ConvertJaZenHan

https://packagecontrol.io/packages/ConvertJaZenHan

選択文字列の全角と半角を変換する
デフォルトであってもよさそうな機能なのに・・・
以下の4つの変換モードが使えるようになります。

  • LowerCase : 小文字に変換
  • UpperCase : 大文字に変換
  • SwapCase : 小文字は大文字に、大文字は小文字に変換
  • TitleCase : 1文字目だけ大文字であとは小文字に変換
    単語単位、いわゆるパスカルケースには対応していない点に注意

ConvertToUTF8

https://packagecontrol.io/packages/ConvertToUTF8

標準ではShiftJISに対応していないため、ShiftJISファイルを開くと全角部分が文字化けします。
うっかり保存すると文字化けしたまま保存されてしまうので
このプラグインを入れるとShiftJISファイルが文字化けせず開いて保存もできるようになります。
UTF8で統一しておけばいいので普段はDisable Packageで切ってますが、
csvなんかはShiftJISじゃないと機能しない状況もありますので・・・

ShiftJISファイルを開くと文字化け

プラグイン導入後に開くと


EditorConfig

http://editorconfig.org/

インデントの種類、インデントの幅、末尾のスペースを除去するなど
様々なエディタ間でプログラムの記述方式を共有することができるので、
互いの開発環境設定を変更しなくても平和的に解決できるプラグイン。

プロジェクトフォルダ直下に.editorconfigの設定ファイルを
配置しておくとその内容に応じてよしなにしてくれる。

.editorconfig設定例


GitGutter

https://packagecontrol.io/packages/GitGutter

Gitリポジトリと現在のソースの変更点をエディタ上に表示してくれるプラグイン。
公式のサンプル画像を見ればなんとなく便利さがわかると思います。

変更点の左側にガターアイコンを表示

ガターアイコン付近にマウスを合わせると差分詳細がポップアップ

各アイコンの意味は下記のようになっている

× 左から閉じる 最初の変更点へ移動
前の変更点へ移動 次の変更点へ移動
前と現在の差分を表示 差分内容をコピー
前の状態へ戻す

IMESupport

https://packagecontrol.io/packages/IMESupport

標準では全角文字を入力すると変換候補が入力位置とは
関係ない位置に出てくるためどこに書いているのかわかりづらいです。
このプラグインを入れるとちゃんと入力している位置に表示されるようになります。
日本語入力機能が弱いのがSublimeTextの欠点です。


SyncedSideBar

https://packagecontrol.io/packages/SyncedSideBar

サイドバーを表示している時、開いているファイルにフォーカスを自動で移動してくれるプラグイン。
視覚的に今どこのファイルを開いているのかわかりやすくなります。


TrailingSpaces

https://packagecontrol.io/packages/TrailingSpaces

行末尾の空白スペースやタブを除去するプラグインですが、
オプション設定により標準では見えない全角スペースを視覚的に見えるようにできるので重宝します。
むしろこっちがメインです。

全角スペースを視覚化するには、
「Preferences>Package Settings>Trailing Spaces>Settings – User」に設定を追加します。
trailing_spaces_regexpで

整形プラグイン

綺麗に書けると気分が盛り上がります。

AlignTab

https://packagecontrol.io/packages/AlignTab

選択範囲内を指定した文字でインデントを揃えてくれます。
特にLivePreviewModeはリアルタイムにプレビューされて便利です。

基本的な使い方は位置揃えしたい箇所を選択して、
Ctrl+Shift+Pでコマンドパレットを呼び出してAlignTabを実行するか
右クリックからAlignTabを実行します。

デフォルトだとショートカットが設定されていないため、
Preferences>Key Bindings-Userに下記のようなキーバインドを作成しておくと、
Ctrl+Alt+AでLivePreviewModeが起動するのでより使いやすくなると思います。

LivePreviewModeを実行すると下に「Align By RegEx」の入力ウィンドウが
表示されるので位置を揃えたい文字を打ち込んで実行するだけで位置を揃えてくれます。

「=」で位置を揃えた場合、次のようになります。

次のような時に「=」で位置を揃えると、

「=>」まで反応してしまいうまくいきません。

こんな時には、「Align By RegEx」に「=/f」を記述して変換することで
一番最初の「=」で位置を揃えることができます。


HTML-CSS-JS Prettify

https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify

html、css、javascriptを見やすい形式に自動フォーマットしてくれます。
ただあまり複雑だとうまくいかない事がある。


Pretty JSON

https://packagecontrol.io/packages/Pretty%20JSON

こちらはJSONを見やすくフォーマットしてくれるプラグイン。


uroboroSQL Formatter

https://packagecontrol.io/packages/uroboroSQL%20Formatter

SQLを見やすくフォーマットしてくれるプラグイン。
ログなどに出力されるSQLは一直線に繋がっていて見づらいので
複雑なSQLであるほど解析する時に役に立ちます。
一瞬でフォーマットしてくれるのでこれがあるとかないとで作業効率が結構違います。
カンマを先頭に持ってきてくれるのもコメントアウトしたりしやすくていいです。

便利プラグイン

その他のプラグイン。便利って言葉、便利。

Color Helper

https://packagecontrol.io/packages/ColorHelper

cssの色を視覚的に表示してくれるプラグイン。
さらに色のプレビュー部分をクリックすると
各種情報の表示や色のブックマーク、別形式への変換も行えるので便利です。


DataConverter

https://packagecontrol.io/packages/DataConverter

csvやtsvからJSON形式、PHP配列、SQL文など様々な形式に変換してくれる。
Excelでデータを作って、JSONやSQLにしたい時に使ってます。
変換した時、数値だと数値型として自動判別されるので
100ではなく”100″としたい時とか文字列としての数値を使いたい時は注意。
#100と書いておいて後から変換するとか。他にいい方法はあるのだろうか?

元となるCSVを・・・

→JSON化

→PHP配列化

→SQL化


InputSequence

https://github.com/kazu1107/InputSequence

マルチセレクトと組み合わせることで選択している位置に
0始まりか1始まりか、ゼロ埋めをするかなど細かく指定して、
連番を自動生成することができるプラグインです。

デフォルトショートカットが「ctrl+shift+0」になっているようですが、
私の環境では反応しなかったので、下記のようなキーバインドを作りました。
{ “keys”: [“ctrl+alt+0”], “command”: “input_sequence” },

連番を挿入したい位置をマルチ選択状態にして、「InputSequence」を実行

「Sequence Format」に連番を指定してEnter

注意点として、このプラグインはPackageControlで管理されていないので
インストールするには次のように手動で行う必要があります。

1.「Ctrl+Shift+P」から「Add Repository」を選択して下記のURLを追加
https://github.com/kazu1107/InputSequence.git
2.「Ctrl+Shift+P」から「Install Package」でInputSequenceを選択してインストール

このプラグインを使うと様々なフォーマットが指定できます。
アルファベットまで対応しているのは驚きです。

指定フォーマット例

05     : 05から2桁で連番(桁は増えない)
$5     : 5からの連番(桁が増える)
aa     : アルファベット連番
$a0    : a0, a1, … a9, b0, b1, … z9, aa0の順
$01+5  : 5が足されていく(四則演算対応)
$1,2   : 同じ数字2回づつで連番。1,1,2,2,3,3…
1~5   : 1,2,3,4,5,1,2,3,4,5…を繰り返す
1~5@3 : 1,2,3,4,5,1,2,3,1,2,3….5まで1度ふられた後は3~5が繰り替えされる

Open File In List

https://packagecontrol.io/packages/Open%20File%20In%20List

ファイルパスのリストを一斉にエディタで開くプラグイン。
このように開きたいファイルの絶対パスのリストをエディタ上に用意して
コマンドパレットから「Open File In List」を実行するだけ。

フォーカスしているファイルからパスを読み取って開くようなので
既存ファイルではなく、新規ファイルにファイルリストだけを記載して使います。
開くのに失敗した行はハイライトで表示してくれるのでわかりやすいです。

まとめ

SublimeTextはそのままではちょっと軽いテキストエディタですが
自分に合ったプラグインを追加していくことで驚くほどの拡張性を見せてくれます。
まだまだ便利なプラグインはたくさんあるので皆さんも探してみてください。

Kat by