WordPress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

今回は、Sublime Textと組み合わせて利用すると、Wordpressのテーマ編集などで便利なパッケージをまとめてみました。

普段から利用しているものと、今回あらためて調べてみて便利そうだったものを27個紹介しています。(※WindowsユーザーなのでWindows版のものの紹介になります。)

Sublime Textの日本語化やパッケージのインストール方法については、以下を参照してください。

簡単5分!WindowsでSublime Text3ポータブル版を日本語化する方法
僕は、HTMLやCSSを書くとき、Sublime Textを利用しています。 というのも、Emmetという少ない文字入力で、素早く大量...

以下に紹介するものの見出し部分がパッケージインストーラーの検索ワードになっています。

スポンサーリンク
レクタングル(大)広告

Emmet

Cheat Sheet

sergeche/emmet-sublime

少ないコード記述でHTMLやCSSをサクサク記入できるパッケージです。使い方がわからなくてもチートシートを見ながら使っているうちに.手放せなくなります。

All Autocomplete

All Autocomplete

alienhard/SublimeAllAutocomplete

ただえさえ便利なSublime Textのコード補完機能を、さらに強化するパッケージです。自分で記入した関数や変数なども補完してくれます。

AutoFileName

AutoFileName

AutoFileName – Packages – Package Control

こちらは、プロジェクトフォルダ内のファイル名などを補完してくれるパッケージです。images/のようにサブフォルダを指定しても保管してくれ、画像の場合は幅と高さまで表示&保管してくれます。

wpseek.com WordPress Developer Assistant

wpseek.com WordPress Developer Assistant

wpseek.com WordPress Developer Assistant – Packages – Package Control

WordPressで定義されている独自関数も補完してくれるパッケージです。Wordpressのテンプレートファイルなどを編集する場合に重宝します。Wordpressの補完パッケージだとWordPressなどもあります。

SublimeCodeIntel

SublimeCodeIntel

SublimeCodeIntel

とりあえずインストールしておけば、JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHPの強調表示、コードの自動補完を行ってくれます。

また、関数などはコンテキストメニューから「Jump to Symbol Definition」を選択することで定義箇所に飛ぶこともできます。

Jump to Symbol Definition

定義場所。

関数の定義場所に飛ぶ

BracketHighlighter

BracketHighlighter1

facelessuser/BracketHighlighter

カッコやクォート、タグなどにカーソルを置くと開始と終了を強調表示してくれるパッケージです。強調表示されることで不具合を発見し易くなります。

特に、以下のような開始・終了がわかりづらいタグなどのハイライトはありがたいです。

BracketHighlighter

Goto-CSS-Declaration

Goto-CSS-Declaration

HTMLのIDやクラス名の指定箇所から、CSSのスタイルの定義場所まで飛んでくれる死ぬほど便利なパッケージ。

通常は定義場所をCSSの中から探したりする必要がありましたが、コンテキストメニューから「Go To CSS Declaration」を選択するだけで目的の場所に飛んでくれます。

Goto-CSS-Declaration css

ただ、設定が書かれているCSSファイルは開いておく必要があります。

Alignment

Alignment

Sublime Alignment – a Sublime Text Package by wbond

変数や、連想配列を定義する際に=の位置を手軽に揃えるパッケージです。設定位置を選択して、「Ctrl+Alt+A」を押すだけで手軽に揃えることができます。同じような機能を持ったAbacusというパッケージもあります。

例えばこんなウィジェットに定義を

ウィジェットの定義を揃える前

ショートカットキー一発で、こんな感じに綺麗に揃えることができます。

ウィジェットの定義を揃えたあと

AlignTab

AlignTab

randy3k/AlignTab · GitHub

イコールやカンマやコロンのカラムを綺麗にそろえることのできるパッケージです。

こんな感じでCSSのプロパティーと値をそろえることもできます。

AlignTab After

HTML5

HTML5

mrmartineau/HTML5

HTML5のコード補完を補強するパッケージです。

jQuery

jQuery

SublimeText/jQuery

jQueryのコード補完を補強するパッケージです。

Tag

tag

titoBouzout/Tag

例えば「<side></」まで入力したら、「<side></side>」まで記入してくれるパッケージです。

SublimeLinter

SublimeLinter

SublimeLinter/SublimeLinter3

サブプライムテキスト上でリアルタイムに文法チェックなど、公文のエラーを表示してくれるパッケージです。

ただ、このパッケージをインストール出しただけでは使えません。使うには、ちょっとした設定を行う必要があります。

設定方法は以下を参照してください。

参考 Sublime TextとSublimeLinterっていいよね。 | ツクメモ

参考 Sublime Text3で構文エラーをチェックするプラグインが超絶便利 | 株式会社LIG

Color Highlighter

ColorHighlighter

Monnoroch/ColorHighlighter

CSSプロパティー値の色指定部分をクリックすると、設定されている色を視覚的に見ることができます。

また、設定で以下のように設定すると、クリックしなくても色指定部分の背景色が設定値になります。

Color Highlighter(背景色を塗り潰す)

Color​Picker

Color​Picker

Color​Picker

編集部分で「Ctrl+Shift+C」でカラーピッカーが開いて色指定をすることができます。

HTML-CSS-JS Prettify

HTML-CSS-JS Prettify

HTML-CSS-JS Prettify – Packages – Package Control

HTMLやCSS、JavaScriptを綺麗に整形してくれるパッケージです。ただし、利用するには「Node.js」にパスが通っている必要があります。

CSS Format

CSS Format

CSS Format – Packages – Package Control

こちらもCSSを整形してくれるパッケージです。CSSの圧縮・展開なども行えます。

CSS snippets

CSS snippets

joshnh/CSS-Snippets · GitHub

CSSのスニペット集です。

「act」と入力すると以下のように展開されたりします。

HTML snippets

HTML snippets

joshnh/HTML-Snippets · GitHub

HTMLのスニペット集です。フォームの入力などに便利。

スニペットを用いたフォームの入力

TrailingSpaces

TrailingSpaces

SublimeText/TrailingSpaces

末尾にスペースが入っていると、ハイライト表示してくれます。また保存時には、自動でき削除もしてくれます。地味だけど便利。

ApacheConf.tmLanguage

ApacheConf.tmLanguage

colinta/ApacheConf.tmLanguage

Apache設定の強調表示を行ってくれるプラグインです。ブラウザキャッシュの設定や、リソースの圧縮などのような高速化に関する.htaccessファイルなどを書くときに見やすくなります。

DocBlockr

DocBlockr

spadgos/sublime-jsdocs · GitHub

JavaScriptやPHP関数の手前の行で「/**」と入力してエンターを押せばコードを解析して関数の説明コメントが記入されます。

以下のようなコメントが記入されるので、あとは説明を書くだけです。

SideBarEnhancements

SideBarEnhancements

titoBouzout/SideBarEnhancements

サイドバーの機能を強化します。

Can I Use

Can I Use

Azd325/sublime-text-caniuse

CSSのプロパティーなどを右クリックしたコンテキストメニューから「Can I Use」を選択することにより、Can I use…からブラウザの対応状況を調べることができます。

Can I use... Support tables for HTML5, CSS3, etc

Search Stack Overflow

Search Stack Overflow

ericmartel/Sublime-Text-2-Stackoverflow-Plugin

選択したテキストをStack Overflowで検索してくれるパッケージです。

問題箇所が出てきたら、とりあえず検索してみると解決策が見つかるかもしれません。

SublimeCodic

jQueryの関数名をSublimeCodicで変換

SublimeCodic

codicサービスを利用して.入力した日本語を英語の関数名や変数名に変換してくれるパッケージです。

ちょっと設定が面倒ですが、設定してしまえばネーミングの大きな助けになります。

設定方法は以下。

ネーミング時にナイスな英語関数名を一発生成してくれるSublime Text拡張「SublimeCodic」の使い方
先日、日本語から、英語の関数名や変数名に変換してくれるサービスのcodicを紹介しました。 そのcodicを久しぶりに...

Online Search

サーチオンラインメニューを選択

rajeshvaya/sublime-online-searcher · GitHub

検索用のパッケージを利用してcodicにて、英語関数名などを取得する方法もあります。

設定方法は以下。

Sublime Textでネーミングに悩んだ時などに!codicで英語関数名を手軽に取得する方法
先日、日本語名を入力すると英語の関数名などを出力してくれるcodicについて書きました。 このサービス、ネーミングで悩...

Google Search

Google Search

nwjlyons/google-search · GitHub

コンテキストメニューから選択文字をGoogle検索してくれるパッケージです。なんだかんだで、まず頼るところはGoogleです。

ConvertToUTF8

ConvertToUTF8

seanliang/ConvertToUTF8 · GitHub

Sublime Textで扱える文字コードは、「UTF-8」のみなので「ShiftJIS」などで書かれたファイルは文字化けしてしまいます。このパッケージは、そういったファイルを自動的に「UTF-8」に変換してくれます。

IMESupport

IMESupportは、Windows の Sublime Text で IME を利用した文字入力をサポートするパッケージです。 IME でインライン変換の入力文字が正しい位置に表示されない問題をある程度解決できます。

chikatoike/IMESupport · GitHub

IMESupportは、Windows の Sublime Text で IME を利用した文字入力をサポートするパッケージです。 IME でインライン変換の入力文字が正しい位置に表示されない問題をある程度解決できます。

まとめ

これらをインストールすると、デフォルトのSublime Textと比べてWordpress開発がかなりはかどります。

今回紹介したパッケージのユーザーセッティングはこんな感じになっています。

※機能がかぶるものもあります。

この中で、「個人的に特に必要な7つ道具」を選ぶとすると以下です。

  1. Emmet(入力補助)
  2. All Autocomplete(入力補助)
  3. AutoFileName(ファイル名入力補助)
  4. wpseek.com WordPress Developer Assistant(Wordpress入力補助)
  5. SublimeCodeIntel(関数の定義場所に飛ぶ機能)
  6. Goto-CSS-Declaration(クラスの定義場所に飛ぶ機能)
  7. Color Highlighter(色がわかりやすい)

僕はキーボード入力があまり得意ではないので、入力補助系のものが必須です。

パッケージの削除方法

いろいろインストールすると、現在お使いのパッケージとの機能やショートカットキーの衝突(コンフリクト)が発生することもあります。

そういった場合は、以下の手順でパッケージを削除するなどして対処してください。

  1. コマンドパレットを開く「ツール→コマンドパレット(Ctrl+Shift+P)」
  2. 「Package Control: Remove Package」と入力しエンター
  3. 不要なパッケージを削除

『WordPress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ』へのコメント

  1. 名前:ケイタ 投稿日:2014/12/24(水) 23:51:45 ID:427721212

    「ApacheConf.tmLanguage」をインストールしてみました。
    .htaccessはちょくちょく修正するので、地味に便利ですね。

  2. わいひら 名前:わいひら 投稿日:2014/12/25(木) 14:35:28 ID:e956b3cff

    一番編集を失敗したらダメなファイルなので、見やすくなるのは良いですよね。