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

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

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

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

簡単5分！WindowsでSublime Text3ポータブル版を日本語化する方法

僕は、HTMLやCSSを書くとき、Sublime Textを利用しています。というのも、Emmetという少ない文字入力で、素早く大量...

nelog.jp

2016-06-28 22:20

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

Emmet

sergeche/emmet-sublime

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

All Autocomplete

alienhard/SublimeAllAutocomplete

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

AutoFileName

AutoFileName – Packages – Package Control

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

wpseek.com WordPress Developer Assistant

wpseek.com WordPress Developer Assistant – Packages – Package Control

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

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」を選択することで定義箇所に飛ぶこともできます。

定義場所。

BracketHighlighter

facelessuser/BracketHighlighter

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

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

Goto-CSS-Declaration

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

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

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

Alignment

Sublime Alignment – a Sublime Text Package by wbond

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

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

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

AlignTab

randy3k/AlignTab · GitHub

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

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

HTML5

mrmartineau/HTML5

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

jQuery

SublimeText/jQuery

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

Tag

titoBouzout/Tag

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

SublimeLinter

SublimeLinter/SublimeLinter3

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

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

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

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

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

Color Highlighter

Monnoroch/ColorHighlighter

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

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

{
    "ha_style": "Filled",
}

ColorPicker

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

HTML-CSS-JS Prettify

HTML-CSS-JS Prettify – Packages – Package Control

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

CSS Format

CSS Format – Packages – Package Control

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

CSS snippets

joshnh/CSS-Snippets · GitHub

CSSのスニペット集です。

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

$1:active {
  $2
}

HTML snippets

joshnh/HTML-Snippets · GitHub

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

TrailingSpaces

SublimeText/TrailingSpaces

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

ApacheConf.tmLanguage

colinta/ApacheConf.tmLanguage

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

DocBlockr

spadgos/sublime-jsdocs · GitHub

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

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

/**
 * [twentyfifteen_nav_description description]
 * @param  [type]
 * @param  [type]
 * @param  [type]
 * @param  [type]
 * @return [type]
 */
function twentyfifteen_nav_description( $item_output, $item, $depth, $args ) {
    if ( 'primary' == $args->theme_location && $item->description ) {
        $item_output = str_replace( $args->link_after . '</a>', '<div class="menu-item-description">' . $item->description . '</div>' . $args->link_after . '</a>', $item_output );
    }

    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'twentyfifteen_nav_description', 10, 4 );

SideBarEnhancements

titoBouzout/SideBarEnhancements

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

Can I Use

Azd325/sublime-text-caniuse

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

Search Stack Overflow

ericmartel/Sublime-Text-2-Stackoverflow-Plugin

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

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

SublimeCodic

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

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

設定方法は以下。

ネーミング時にナイスな英語関数名を一発生成してくれるSublime Text拡張「SublimeCodic」の使い方

先日、日本語から、英語の関数名や変数名に変換してくれるサービスのcodicを紹介しました。そのcodicを久しぶりに...

nelog.jp

2018-11-27 18:04

Online Search

rajeshvaya/sublime-online-searcher · GitHub

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

設定方法は以下。

Sublime Textでネーミングに悩んだ時などに！codicで英語関数名を手軽に取得する方法

先日、日本語名を入力すると英語の関数名などを出力してくれるcodicについて書きました。このサービス、ネーミングで悩...

nelog.jp

2015-09-18 18:33

Google Search

nwjlyons/google-search · GitHub

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

ConvertToUTF8

seanliang/ConvertToUTF8 · GitHub

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

IMESupport

chikatoike/IMESupport · GitHub

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

まとめ

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

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

{
    "installed_packages":
    [
        "Abacus",
        "Alignment",
        "AlignTab",
        "All Autocomplete",
        "ApacheConf.tmLanguage",
        "AutoFileName",
        "BracketHighlighter",
        "Can I Use",
        "Color Highlighter",
        "ColorPicker",
        "ConvertToUTF8",
        "CSS Format",
        "CSS Snippets",
        "DocBlockr",
        "Emmet",
        "Google Search",
        "Goto-CSS-Declaration",
        "HTML Snippets",
        "HTML-CSS-JS Prettify",
        "HTML5",
        "Japanize",
        "jQuery",
        "Nodejs",
        "Search Stack Overflow",
        "SideBarEnhancements",
        "SublimeCodeIntel",
        "SublimeLinter",
        "SublimeLinter-phplint",
        "Tag",
        "TrailingSpaces",
        "wpseek.com WordPress Developer Assistant"
    ]
}

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

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