職業別!SublimeText3の作業が超捗る便利プラグインとテクニック19選

テキストエディタのSublimeText3ってとっても便利ですよね。特に「プラグイン(パッケージ)」で機能を自分好みにカスタマイズ出来る点が素晴らしいです。

ただ、いざSublimeText3のプラグインを使おうと思っても、プラグインが山ほどあってどれを選んで良いのかわからないですよね。さらにプラグインだけでなく、色々なWEBサービスやショートカットなどのテクニックも抑えると、よりSublimeText3を活用することができちゃうんです。

そこで今回は、様々な立場にあわせて作業がはかどるプラグインとテクニック、「計19種」をご紹介します! ぜひどんどん活用して、快適なSublimeText3ライフをお送りください。SublimeText3の導入方法やプラグインの使い方がわからない方はこちらの記事もご覧ください。

GIF付解説!恋に落ちるエディタ、SublimeText3の使い方/日本語化/設定方法まとめ
更新日 : 2019年4月27日

この記事の目次

まず絶対入れておくべきSublimeTextプラグイン11選

タグなどの開始/終了をハイライトしてくれるプラグイン

BracketHighlighter

スクリーンショット 2016-06-21 11.00.24

[]、()、{}、””、”、などの開始、終了をハイライトしてくれる非常に便利なプラグインです。タグや括弧の閉じ忘れ防止に必須です。

複雑になったショートカットキーを確認できるプラグイン

BoundKeys

スクリーンショット 2016-06-21 11.10.04

Sublime Textは、様々なキーボードショートカットを使用できるため、プラグイン同士で競合することもしばしばあります。

そんな悩みを解消してくれるのがこのプラグインです。どのキーにどのコマンドが割り当てられているかを一覧にしてくれるので、ショートカットの調子が悪いと思ったらこのプラグインを導入してみましょう。



コード補完を補強してくれるプラグイン

All Autocomplete

template.php_

Sublime Textのコード補完を補強するプラグインです。自分で定義した定数や関数も自動的に補完してくれるので、導入しておいて間違いなしです。

選択範囲をまとめて修正できるショートカットキー

Alignment

選択範囲をまとめて修正出来るので、選択した単語と同じ単語を選択出来るコマンドcommand + Dと組み合わせて使うと効率的です。
コードをまとめて綺麗にしたい場合は特におすすめです。

自動でバックアップをとってくれる機能

Local History

0218efccfa565d4d2ee80984bd2a639e

参考

編集中のファイルが消えてしまったり、誤って削除してしまったりしたら大変ですよね。そんな悲しい事故が起こる前に防衛策として入れておきたいのが、このLocal Historyです。

ローカルにバックアップを取ってくれたり、差分比較などができる優れものです。ユーザー用の設定ファイル内では保存期間も設定できるので融通が効いていいですね。

文字エンコードをUTF8に変換してくれるプラグイン

ConvertToUTF8

3aa9e5f91d132a9eb1d7f49812cd70378719ba7f

これを入れておけばShift_JISなどUTF-8以外のファイルを自動的にUTF-8に変換してくれます。人から渡されたファイルを開く時など、もしShift_JISに出くわしてしまっても安心ですね。

最近開いたファイルをリスト表示してくれるプラグイン

RecentActiveFiles

8af3ed8d0546d92b6aa04d08e6f8d93407bc3f93

最近開いたファイルをリスト表示してくれるので、消した後にもう一回開きたい時等にオススメです。

末尾のスペースを自動で消してくれるプラグイン

TrailingSpaces

140915-5416b993865b4

参考

末尾にスペースが入っている時にハイライトしてくれて、保存する時に削除してくれます。地味ですが入れておくと便利です。

主要ブラウザの対応状態を確認できるWebサービス

Can I Use

スクリーンショット 2016-06-21 13.23.05

CSS3やHTML5の各主要ブラウザの対応状態を確認できるWebサービスです。このプラグインを導入すれば、選択した単語をすぐにCan I useで検索できて便利です。

あらゆる言語のシンタックスハイライトと自動補完をしてくれるプラグイン

SublimeCodeIntel

140915-5416a12c5bcc4

参考

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

69aa4c77d00ccb820f0bd59afea788cc6d5526b4

CSSを書いてる時などに、選択した色でハイライトしてくれるので視覚的に判断できてとてもわかりやすいです。

編集中のファイルをブラウザでレンダリングしてくれるショートカット

View In Browser

HTMLやCSSで編集作業をして、ブラウザに移動してリロードして、という一連の面倒な作業が簡単になります。

「control」+「alt」+「v」と入力すればブラウザが起動して編集中のファイルをレンダリングしてくれます。ユーザー用の設定ファイルの「”browser”: “chrome”」部分のブラウザ名を変更すれば任意のブラウザを起動させるのができる点も特筆ポイントですね。

色の指定ができるMacOSの機能

ColorPicker

140915-54164bc43b0b9

参考

スタイルシートやHTML定義時に、意外に手間がかかるのが「色」の指定ですよね。「濃い青色」「薄い緑」など、イメージは沸くのに、16進数にできない、なんて時に役に立ちます。

コマンドパレット(⇧+⌘+P)から、「Color Picker」を実行すれば、OSデフォルトのカラーピッカーが開き、色を選択すれば自動的に現在編集中のファイルにペーストしてくれます。

該当スタイルの定義箇所まで移動してくれるプラグイン

Goto-CSS-Declaration

b5678ac3e17d32d1819d951eea2e13e57044d925

HTMLタグに指定しているクラスを選択して、コンテキストメニューから「Go To CSS Declaration」を選択すると、当該スタイルの定義箇所まで飛んでくれるので非常に便利です。

エンジニア向けSublimeText3プラグイン4選

2つのファイルを比較してくれるプラグイン

Diffy

sublimerge-pro

参考

2つのファイルを比較してくれるプラグインです。使用する場合は、メニューから「View」→「Layout」→「Columns: 2」(⌥+⌘+2)でレイアウトを2列にした上で、比較したいファイルを左右に並べて、⌘+K、⌘+Dの順に押します。

2つのファイルの差異がハイライトされて表示されるので、コード修正後に正しく表示されなくなったけど、どこを修正したかが思い出せない!という時に便利です。

WordPress独自のコードを補完してくれるプラグイン

wpseek.com WordPress Developer Assistant

WordPress独自のコードを補完してくれるプラグインで、WordPress開発に携わっているなら導入しておいて間違いなしです。コード補完時に定義を表示してくれたりするのでとても便利です。

質問サイトへすぐ移れるプラグイン

Search Stack Overflow

スクリーンショット 2016-06-21 13.44.54

エンジニアのエラー解決には欠かすことのできない質問サイト。その中でもユーザー数が多く、質問解決率が高い「Stack Overflow」で選択した単語を検索してくれる便利なプラグインです。

Gitを扱えるようになるプラグイン

Git

GitをSublimeのみで扱うことができるようにできます。ターミナルに戻るが面倒くさい!という人におすすめです。

まとめ

いかがでしたか?
Sublime Text3にまず入れておきたい超便利プラグインと、活用してほしいツールをご紹介しました。

PCで作業をする人の「テキストエディタ」は、料理人で言う所の「包丁」のようなものです。なのでSublime Text3の使い勝手にもこだわりを持っていきたいですね。この機会に1つでも導入してみて、Sublime Text3をより活用してみてください。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説