ITサポート

Visual Studio Code (PHPStrom) で WordPress開発環境を作る

vscode + phpcs + wpcs

概要

前提

(1) Visual Studio Code

とても便利なエディタ。情報も非常に多い。インストール情報を探して、インストールする。

(2) PHP関連の拡張機能をインストール

様々なプラグインが紹介されている。

おすすめは以下。

HTML関連

PHP関連

WordPress用

(3) phpcs インストール

homebrew を使ってインストールする。

brew install php-code-sniffer

これにて /usr/local/bin/phpcs にコマンドがインストールされる。

(4) wpcs

composer でインストールする。

composer global require  wp-coding-standards/wpcs

.composer/vendor/wp-coding-standards/wpcs/ にファイルが保存されます。

(5) phpcs に wpcs を追加する

まず、 ~/.composer/vendor/bin にパスを通す。.bash_profile を以下にように編集し、ターミナルを再起動。phpcs コマンドが使えたらOK。

export PATH=$HOME/.composer/vendor/bin:$PATH
source ~/.bashrc

phpcs --config-set installed_paths ~/.composer/vendor/wp-coding-standards/wpcs

これによって、以下のようになる。

$ phpcs -i
The installed coding standards are MySource, PEAR, PSR1, PSR12, PSR2, Squiz, Zend, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

(6) settings.json (vscode) を編集

ギアアイコン > 設定 > phpcs検索 > setting.js を編集する。

{
    "..." : "....",
    "phpcs.standard" : "WordPress"
}

追記するときは、, を直前に追加する(javascript の連想配列として定義する)

PHPStormの場合

PHPStormを使う場合は、以下の通りです。

まず、メニューバーで、PHPStorm > Preference を開き、検索ボックスで Code Sniffer と検索します。

Language & Frameworks > PHP > Quality Tools の中に「Code Snifferセクション」があります。ここで設定をします。「…」をクリックし、phpcs へのパスを設定します。

さらに、Editor > Inspections > Quality Tools > PHP Code Sniffer validation にチェックを入れ、Coding Standardの再読み込みボタンを押して、WordPressをリストから選びます。

PHPStormは、コピー&ペーストすると自動インデントします。それを利用して、タブなどは一気に修正できます。