テキストエディタのSublimeText3ってとっても便利ですよね。特に「プラグイン(パッケージ)」で機能を自分好みにカスタマイズ出来る点が素晴らしいです。
ただ、いざSublimeText3のプラグインを使おうと思っても、プラグインが山ほどあってどれを選んで良いのかわからないですよね。さらにプラグインだけでなく、色々なWEBサービスやショートカットなどのテクニックも抑えると、よりSublimeText3を活用することができちゃうんです。
そこで今回は、様々な立場にあわせて作業がはかどるプラグインとテクニック、「計19種」をご紹介します! ぜひどんどん活用して、快適なSublimeText3ライフをお送りください。SublimeText3の導入方法やプラグインの使い方がわからない方はこちらの記事もご覧ください。
まず絶対入れておくべきSublimeTextプラグイン11選
タグなどの開始/終了をハイライトしてくれるプラグイン
BracketHighlighter
[]、()、{}、””、”、などの開始、終了をハイライトしてくれる非常に便利なプラグインです。タグや括弧の閉じ忘れ防止に必須です。
複雑になったショートカットキーを確認できるプラグイン
BoundKeys
Sublime Textは、様々なキーボードショートカットを使用できるため、プラグイン同士で競合することもしばしばあります。
そんな悩みを解消してくれるのがこのプラグインです。どのキーにどのコマンドが割り当てられているかを一覧にしてくれるので、ショートカットの調子が悪いと思ったらこのプラグインを導入してみましょう。
コード補完を補強してくれるプラグイン
All Autocomplete
Sublime Textのコード補完を補強するプラグインです。自分で定義した定数や関数も自動的に補完してくれるので、導入しておいて間違いなしです。
選択範囲をまとめて修正できるショートカットキー
Alignment
選択範囲をまとめて修正出来るので、選択した単語と同じ単語を選択出来るコマンドcommand + Dと組み合わせて使うと効率的です。
コードをまとめて綺麗にしたい場合は特におすすめです。
自動でバックアップをとってくれる機能
Local History
編集中のファイルが消えてしまったり、誤って削除してしまったりしたら大変ですよね。そんな悲しい事故が起こる前に防衛策として入れておきたいのが、このLocal Historyです。
ローカルにバックアップを取ってくれたり、差分比較などができる優れものです。ユーザー用の設定ファイル内では保存期間も設定できるので融通が効いていいですね。
文字エンコードをUTF8に変換してくれるプラグイン
ConvertToUTF8
これを入れておけばShift_JISなどUTF-8以外のファイルを自動的にUTF-8に変換してくれます。人から渡されたファイルを開く時など、もしShift_JISに出くわしてしまっても安心ですね。
最近開いたファイルをリスト表示してくれるプラグイン
RecentActiveFiles
最近開いたファイルをリスト表示してくれるので、消した後にもう一回開きたい時等にオススメです。
末尾のスペースを自動で消してくれるプラグイン
TrailingSpaces
末尾にスペースが入っている時にハイライトしてくれて、保存する時に削除してくれます。地味ですが入れておくと便利です。
主要ブラウザの対応状態を確認できるWebサービス
Can I Use
CSS3やHTML5の各主要ブラウザの対応状態を確認できるWebサービスです。このプラグインを導入すれば、選択した単語をすぐにCan I useで検索できて便利です。
あらゆる言語のシンタックスハイライトと自動補完をしてくれるプラグイン
SublimeCodeIntel
JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit、PHP、とありとあらゆるもののシンタックスハイライト、自動補完を行ってくれる優れものプラグインです。これは導入しておいて間違いなしでしょう。
閉じタグを自動生成してくれるプラグイン
Tag
Sublime Textのコード補完を補強するプラグインです。かゆいところに手が届くプラグインです。例えば、<aside>と入力した後、</と入力するだけで、</aside>と閉じタグを自動生成してくれます。
デザイナー向けSublimeText3プラグイン4選
選択した色をハイライトしてくれるプラグイン
ColorHighlighter
CSSを書いてる時などに、選択した色でハイライトしてくれるので視覚的に判断できてとてもわかりやすいです。
編集中のファイルをブラウザでレンダリングしてくれるショートカット
View In Browser
HTMLやCSSで編集作業をして、ブラウザに移動してリロードして、という一連の面倒な作業が簡単になります。
「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれます。ユーザー用の設定ファイルの「”browser”: “chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動させるのができる点も特筆ポイントですね。
色の指定ができるMacOSの機能
ColorPicker
スタイルシートやHTML定義時に、意外に手間がかかるのが「色」の指定ですよね。「濃い青色」「薄い緑」など、イメージは沸くのに、16進数にできない、なんて時に役に立ちます。
コマンドパレット(⇧+⌘+P)から、「Color Picker」を実行すれば、OSデフォルトのカラーピッカーが開き、色を選択すれば自動的に現在編集中のファイルにペーストしてくれます。
該当スタイルの定義箇所まで移動してくれるプラグイン
Goto-CSS-Declaration
HTMLタグに指定しているクラスを選択して、コンテキストメニューから「Go To CSS Declaration」を選択すると、当該スタイルの定義箇所まで飛んでくれるので非常に便利です。
エンジニア向けSublimeText3プラグイン4選
2つのファイルを比較してくれるプラグイン
Diffy
2つのファイルを比較してくれるプラグインです。使用する場合は、メニューから「View」→「Layout」→「Columns: 2」(⌥+⌘+2)でレイアウトを2列にした上で、比較したいファイルを左右に並べて、⌘+K、⌘+Dの順に押します。
2つのファイルの差異がハイライトされて表示されるので、コード修正後に正しく表示されなくなったけど、どこを修正したかが思い出せない!という時に便利です。
WordPress独自のコードを補完してくれるプラグイン
wpseek.com WordPress Developer Assistant
WordPress独自のコードを補完してくれるプラグインで、WordPress開発に携わっているなら導入しておいて間違いなしです。コード補完時に定義を表示してくれたりするのでとても便利です。
質問サイトへすぐ移れるプラグイン
Search Stack Overflow
エンジニアのエラー解決には欠かすことのできない質問サイト。その中でもユーザー数が多く、質問解決率が高い「Stack Overflow」で選択した単語を検索してくれる便利なプラグインです。
Gitを扱えるようになるプラグイン
Git
GitをSublimeのみで扱うことができるようにできます。ターミナルに戻るが面倒くさい!という人におすすめです。
まとめ
いかがでしたか?
Sublime Text3にまず入れておきたい超便利プラグインと、活用してほしいツールをご紹介しました。
PCで作業をする人の「テキストエディタ」は、料理人で言う所の「包丁」のようなものです。なのでSublime Text3の使い勝手にもこだわりを持っていきたいですね。この機会に1つでも導入してみて、Sublime Text3をより活用してみてください。