VS Code:WordPress構築時に便利な拡張機能まとめ

VS Code:WordPress構築時に便利な拡張機能まとめ

WordPress構築時に入れておくと便利なVS Code拡張機能のまとめです。
絶対に入れておくべきとまではいきませんが、入力補完やドキュメント参照が容易にできるなど慣れると手放せなくなるようなものもいくつかあるので、VS Codeを利用していて普段からWordPressを触る機会が多い人は試してみてください。

WordPress Toolbox

WordPressの関数・クラス・定数を入力補完してくれる拡張機能で、現時点の最新版である4.9.8にも対応しています。
展開時には引数付きで出力してくれる機能もあり、展開したコード内にある引数の選択部分をtabまたはshift + tabで移動させることもできます。

例)add_filter()を引数表示有りで展開

PHP

add_filter( $tag:string, $function_to_add:callable, $priority:integer, $accepted_args:integer )

注意点としてこの拡張機能はPHP言語にバインドされているので、<?php?>の中で使用できます。

Search WordPress Docs

WordPressの関数やメソッドについてCodexやCode Referenceを参照したいときに便利な拡張機能です。
呼び出し方は下記3タイプ用意されており、検索したい関数名やメソッド名が選択されている状態で実行すると、リファレンスページをブラウザで開いてくれます。

  • 右クリックメニュー内に表示されている「Search in WordPress Docs...」を選択。
  • alt + command + Fのショートカットを使用。
  • コマンドで「wordpress」と入力すれば出てくる「Search in WordPress Docs...」を選択。

表示されるリファレンスページを変更したい場合は、「設定 > 拡張機能」内にあるSearch WordpPress Docs configuration(searchwpdocs.site)という設定項目で変更可能です。

WooCommerce - Snippets & autocomplete

約1年前にリリースされてからアップデートされていないために対応バージョンも3.2にとなっていますが、その名の通りWooCommerceの関数やフックなどの入力補完をしてくれる拡張機能です。

ACF-Snippet

カスタムフィールドを簡単に扱うことができるプラグイン「Advanced Custom Fields」のコードを入力補完してくれる拡張機能で、基本はfieldがトリガーになっており、field:{field type}field:{field type}:{type/option}のようにコロンを組み合わせた記述で各フィールドタイプの記述を展開させることができます。
ひと通りのフィールドタイプに対応しており、Repeater FieldやFlexible Content Fieldなどのアドオンのものにも対応しています。

例)fieldと入力して展開

PHP

<?php if ( get_field('field_name') ) : ?>
  <?php echo get_field('field_name'); ?>
<?php endif; ?>

例)field:repeaterと入力して展開

PHP

<?php if ( have_rows('field_name') ) : ?>

  <?php while( have_rows('field_name') ) : the_row(); ?>

    <?php the_sub_field('sub_field_name'); ?>

  <?php endwhile; ?>

<?php endif; ?>

ACS Snippets - VSCode

同じく「Advanced Custom Fields」関連の拡張機能で、こちらはEmmetのように略語からコードを出力させることができます。
使用時は<?php?>内である必要があり、特定の文字列を入力後にtabで展開させることができます。

例)tfと入力して展開

PHP

<?php the_field( 'field_name' ); ?>

例)rfと入力して展開

PHP

<?php if ( have_rows( 'field_name' ) ) : ?>
  <ul>
    <?php while ( have_rows( 'field_name' ) ) : the_row(); ?>
      <li><?php the_sub_field( 'sub_field_name' ); ?></li>
    <?php endwhile; ?>
  </ul>
<?php endif; ?>

phpcs

コード規約に沿っているかの確認に役立つPHP_CodeSnifferをVS Codeで扱うようにする拡張機能です。
使用する際は別途PHP_CodeSnifferのインストールとWordPressのコーディングスタンダードのインストール・設定が必要になり、VS Codeの設定では下記のように記述する必要があります。

settings.json

"phpcs.standard": "WordPress"

WPCS Whitelist Flags

// WPCS: XSS ok.// WPCS: sanitization ok.など、上で紹介したWordPressのコーディングスタンダード(WPCS)によって表示されるエラーを何らかの理由で非表示にしたいときに使うコメントの入力補完をしてくれる拡張機能です。

EditorConfig for VS Code

異なるエディタでも統一したコーディングスタイルを定義することができる「EditorConfig」をVS Codeで有効化する拡張機能です。
WordPressのコーディング規約にはインデントをタブにするよう記載されているのですが、普段はスペースを利用していていちいち切り替えるの面倒なときなどにindent_style = tabが記述されている.editorconfigを用意しておけば、自動的にインデント指定をタブにしてくれます。

「EditorConfig」についてもう少し知りたい場合は、以前「EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる」というエントリーで紹介しているので参考にしてみてください。

Close the search window,
please press close button or esc key.