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ファイルを開くと文字化け
|
1 2 |
???????{???? ShiftJIS?t?@?C?????? |
プラグイン導入後に開くと
|
1 2 |
これは日本語です ShiftJISファイルだよ |
EditorConfig
インデントの種類、インデントの幅、末尾のスペースを除去するなど
様々なエディタ間でプログラムの記述方式を共有することができるので、
互いの開発環境設定を変更しなくても平和的に解決できるプラグイン。
プロジェクトフォルダ直下に.editorconfigの設定ファイルを
配置しておくとその内容に応じてよしなにしてくれる。
.editorconfig設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
# .editorconfigは.htaccessのように各フォルダに配置する事もできるので # この設定ファイルがルートフォルダである事を記述しておく # とりあえずtrueにしておけば問題ない root = true # 全ファイルに対する設定 [*] # ファイルエンコード方式(Shift-JIS非対応) charset = utf-8 # インデントサイズ indent_size = 4 # インデントがスペースかタブか indent_style = space # EOF(ファイル末尾)に改行を入れるか insert_final_newline = true # 行末尾の空白を除去するか trim_trailing_whitespace = true # 改行コード設定 end_of_line = lf # 指定した拡張子だけ別の設定にする [*.{css,js}] indent_size = 2 |
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で
|
1 2 3 4 |
{ "trailing_spaces_highlight_color": "comment", "trailing_spaces_regexp": " |[ \t]+" } |
整形プラグイン
綺麗に書けると気分が盛り上がります。
AlignTab
https://packagecontrol.io/packages/AlignTab
選択範囲内を指定した文字でインデントを揃えてくれます。
特にLivePreviewModeはリアルタイムにプレビューされて便利です。
基本的な使い方は位置揃えしたい箇所を選択して、
Ctrl+Shift+Pでコマンドパレットを呼び出してAlignTabを実行するか
右クリックからAlignTabを実行します。
デフォルトだとショートカットが設定されていないため、
Preferences>Key Bindings-Userに下記のようなキーバインドを作成しておくと、
Ctrl+Alt+AでLivePreviewModeが起動するのでより使いやすくなると思います。
|
1 |
{ "keys": ["ctrl+alt+a"], "command": "align_tab", "args" : {"live_preview" : true} }, |
LivePreviewModeを実行すると下に「Align By RegEx」の入力ウィンドウが
表示されるので位置を揃えたい文字を打ち込んで実行するだけで位置を揃えてくれます。
「=」で位置を揃えた場合、次のようになります。
|
1 2 |
$aaa = 100; $b = 200; |
|
1 2 |
$aaa = 100; $b = 200; |
次のような時に「=」で位置を揃えると、
|
1 2 |
$aaa = {'a1' => 100, 'b2' => 200, 'c3' => 300}; $b = {'a1' => 100, 'b2' => 200, 'c3' => 300}; |
「=>」まで反応してしまいうまくいきません。
|
1 2 |
$aaa = {'a1' = > 100, 'b2' = > 200, 'c3' = > 300}; $b = {'a1' = > 100, 'b2' = > 200, 'c3' = > 300}; |
こんな時には、「Align By RegEx」に「=/f」を記述して変換することで
一番最初の「=」で位置を揃えることができます。
|
1 2 |
$aaa = {'a1' => 100, 'b2' => 200, 'c3' => 300}; $b = {'a1' => 100, 'b2' => 200, 'c3' => 300}; |
HTML-CSS-JS Prettify
https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
html、css、javascriptを見やすい形式に自動フォーマットしてくれます。
ただあまり複雑だとうまくいかない事がある。
|
1 |
<html><head><meta charset="utf-8"><title>タイトル</title></head><body><div>本文</div></body></html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <div>本文</div> </body> </html> |
Pretty JSON
https://packagecontrol.io/packages/Pretty%20JSON
こちらはJSONを見やすくフォーマットしてくれるプラグイン。
|
1 |
[{"id":1,"name":"test1","age":23},{"id":2,"name":"test2","age":16},{"id":3,"name":"test3","age":56}] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[ { "id": 1, "name": "test1", "age": 23 }, { "id": 2, "name": "test2", "age": 16 }, { "id": 3, "name": "test3", "age": 56 } ] |
uroboroSQL Formatter
https://packagecontrol.io/packages/uroboroSQL%20Formatter
SQLを見やすくフォーマットしてくれるプラグイン。
ログなどに出力されるSQLは一直線に繋がっていて見づらいので
複雑なSQLであるほど解析する時に役に立ちます。
一瞬でフォーマットしてくれるのでこれがあるとかないとで作業効率が結構違います。
カンマを先頭に持ってきてくれるのもコメントアウトしたりしやすくていいです。
|
1 |
SELECT id,name,date FROM user AS u INNER JOIN permission AS p ON u.id = p.user_id WHERE id=2; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
SELECT id , name , date FROM user AS u INNER JOIN permission AS p ON u.id = p.user_id WHERE id = 2 ; |
便利プラグイン
その他のプラグイン。便利って言葉、便利。
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を・・・
|
1 2 3 |
id,name,age 1,name1,age1 2,name2,age2 |
→JSON化
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[ { "age": "age1", "name": "name1", "id": "1" }, { "age": "age2", "name": "name2", "id": "2" } ] |
→PHP配列化
|
1 2 3 4 |
array( array('id'=>1, 'name'=>'name1', 'age'=>'age1'), array('id'=>2, 'name'=>'name2', 'age'=>'age2') ); |
→SQL化
|
1 2 3 4 5 6 7 8 9 10 11 |
CREATE TABLE IF NOT EXISTS DataConverter ( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, id INT, name VARCHAR(255), age VARCHAR(255) ); INSERT INTO DataConverter (id, name, age) VALUES (1, 'name1', 'age1'), (2, 'name2', 'age2'); |
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を選択してインストール
このプラグインを使うと様々なフォーマットが指定できます。
アルファベットまで対応しているのは驚きです。
指定フォーマット例
|
1 2 3 4 5 6 7 8 |
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」を実行するだけ。
|
1 2 3 |
C:\hoge\file1.txt C:\hoge\file2.txt C:\hoge\folder\file3.txt |
フォーカスしているファイルからパスを読み取って開くようなので
既存ファイルではなく、新規ファイルにファイルリストだけを記載して使います。
開くのに失敗した行はハイライトで表示してくれるのでわかりやすいです。
まとめ
SublimeTextはそのままではちょっと軽いテキストエディタですが
自分に合ったプラグインを追加していくことで驚くほどの拡張性を見せてくれます。
まだまだ便利なプラグインはたくさんあるので皆さんも探してみてください。
by Kat
