WordPressのテーマ開発にオススメのSublime Textのパッケージ22選
もう高価な統合開発環境は不要？！WordPressのテーマ開発で管理人が使用している、恋に落ちる最強エディタ「Sublime Text」のオススメパッケージをご紹介します。
オススメのパッケージ22選
Sublime Textにパッケージを導入するにあたって、事前に「Package Control」を導入しておきましょう。「Package Control」については、Bootstrapベース「Bootflat」のSassファイルをコンパイルする方法 – Maciousで詳しくご紹介していますので、こちらもご参照ください。
なお、パッケージ名の横に ST3 とあるものは、Sublime Text 3限定ですのでご注意ください。
All Autocomplete
Sublime Textのコード補完を補強するパッケージ。自分で定義した定数や関数も自動的に補完してくれます。導入しておいて間違いなし。
AutoFileName
All Autocompleteと同様に、Sublime Textのコード補完を補強するパッケージ。
例えば、編集中のファイルと同一階層に「img」ディレクトリがあるとして、その中の「favicon-152.png」というファイルを <img> タグに指定したい場合、 <img src="./" と打つだけで、「img」ディレクトリ、「favicon-152.png」を自動補完してくれます。絶対パスでの指定も可能。
使いどころはあまり多くないが、導入しておくといざという時に便利なパッケージ。
BoundKeys
Sublime Textは、様々なキーボードショートカットを使用するため、パッケージ同士で競合することもしばしば。そんな悩みを解消してくれるのがこのパッケージ。どのキーにどのコマンドが割り当てられているかを一覧にしてくれます。ショートカットの調子が悪いと思ったら、このパッケージを導入してみよう。
BracketHighlighter
[]、()、{}、""、''、<tag></tag>の開始、終了をハイライトしてくれる非常に便利なパッケージ。まず、導入しておいて間違いなし。タグや括弧の閉じ忘れ防止に必須です。
Can I Use
Can I useは、弊サイトにもたびたび登場する、CSS3やHTML5の各主要ブラウザの対応状態を確認できるWebサービス。このパッケージを導入すれば、選択した単語をすぐにCan I useで検索できて便利です。
検索結果はこのようにブラウザで表示されます。
CSS3 ST3
Sublime Textのコード補完を補強するパッケージ。CSS3のコード補完。
ColorPicker
スタイルシートやHTML定義時に、意外に手間がかかるのが「色」の指定。「濃い青色」「薄い緑」など、イメージは沸くのに、16進数にできない、なんて時に役に立ちます。
コマンドパレット（ ⇧ + ⌘ + P ）から、「Color Picker」を実行すれば、OSデフォルトのカラーピッカーが開き、色を選択すれば自動的に現在編集中のファイルにペーストしてくれます。
Diffy
2つのファイルを比較してくれるパッケージ。使用する場合は、メニューから「View」→「Layout」→「Columns: 2」（ ⌥ + ⌘ + 2 ）でレイアウトを2列にした上で、比較したいファイルを左右に並べて、 ⌘ + K 、⌘ + D の順に押します。
2つのファイルの差異がハイライトされて表示されるので、コード修正後に正しく表示されなくなったけど、どこを修正したかが思い出せない！という時に便利。忘れん坊の管理人には必須のパッケージ。
DocBlockr
メソッドやクラスの定義をリバースエンジニアリングして、Javadocスタイルのコメントを自動生成してくれる便利なパッケージ。メソッドやクラス定義の1行前にカーソルを置いて、 /* と打った後、↵ を押すだけ。ただし、そのまま使用すると日本語変換時に文字が消失してしまうという残念なパッケージ。私はこれで日本語をやめました。
- DocBlockr – Packages – Package Control
- Mac上でDocblockr Pluginとgoogle日本語入力を使っていてコメント内でENTERを押したら入力内容が消える問題を回避（とりあえず）
Goto-CSS-Declaration
OZPAの表4さんでも紹介されていた素晴らしく便利で泣けてくるパッケージ。HTMLタグに指定しているクラスを選択して、コンテキストメニューから「Go To CSS Declaration」を選択すると、当該スタイルの定義箇所まで飛んでくれて、非常に便利。
ただし、Sublime Textで定義の存在するCSSファイルを開いておくことが条件です。
- Goto-CSS-Declaration – Packages – Package Control
- Sublime Textのプラグイン「Goto CSS Declaration」が素晴らしく便利で泣けてきた | OZPAの表4
HTML5
Sublime Textのコード補完を補強するパッケージ。HTML5のコードを補完してくれる。導入しておいて間違いなし。
jQuery
Sublime Textのコード補完を補強するパッケージ。JQueryのコードを補完してくれる。導入しておいて間違いなし。
SCSS
Sublime Textのコード補完を補強するパッケージ。SCSSのコードを補完してくれる。導入しておいて間違いなし。
Search Stack Overflow
分からないことがあればStack Overflowへ、というくらい同サイトにはWordPressをはじめとしたWebサイト構築のノウハウが濃縮されています。
選択した単語を同サイトで検索してくれる便利なパッケージ。
SublimeLinter
SublimeLinterシリーズのフレームワーク。同フレームワークについては、Sublime TextにSublimeLinter-phpcsを導入しWordPressコーディング標準に従ってテーマ開発を行おう – Maciousで詳細をご紹介していますので、ぜひこちらも参照してみてください。
SublimeLinter-contrib-jslint ST3
JavaScriptのシンタックスチェッカー。
SublimeLinter-csslint ST3
CSSのシンタックスチェッカー。
SublimeLinter-hlint ST3
HTMLのシンタックスチェッカー。
Tag ST3
Sublime Textのコード補完を補強するパッケージ。かゆいところに手が届くパッケージ。例えば、 <aside> と入力した後、 </ と入力するだけで、 </aside> と閉じタグを自動生成してくれる。まず、導入しておいて間違いなし。
Theme – Nexus
Sublime Textのテーマ。Theme – Flatland – Packages – Package Controlに飽きたら、導入してみよう。目に優しい配色のお気に入りのテーマ。（スクリーンショットは、全て同テーマによるものです）
TrailingSpaces
気が付けば、無駄な空白やタブによるスペースが生まれてしまうのは仕方がないこと。一つ一つ手動で綺麗にしておくと日が暮れてしまうので、このパッケージで一網打尽にしちゃいましょう。
コマンドパレット（ ⇧ + ⌘ + P ）を開いて、「Trailing Spaces: Delete Trailing Spaces」を選択すれば、無駄なスペースとはさようなら。
wpseek.com WordPress Developer Assistant
Sublime Textのコード補完を補強するパッケージ。WordPress独自のコードを補完してくれるパッケージで、WordPress開発に携わっているなら導入しておいて間違いなし。WordPressの補完といえば、WordPressが有名だが、こちらのパッケージの方がコード補完時に定義を表示してくれたりするので便利。
まとめ
あなたのお気に入りのパッケージは見つかりましたか？まだ導入していないパッケージがあれば、ぜひ使ってみてください。また、便利なパッケージをご存じの場合は、コメントや @Maciouscom で教えてくださいね♪