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

vscode + phpcs + wpcs

概要

Visual Studio Codeを用意する（あるいは、PHPStorm）
PHP関連の拡張機能をインストール
phpcs (コード規約チェック）をインストール by homebrew
wpcs (WordPress）をインストール by composer

前提

homebrew というパッケージ管理ソフトを入れておく
composer というPHP専用のパッケージ管理ソフトを入れておく

(1) Visual Studio Code

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

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

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

Google検索

おすすめは以下。

HTML関連

Format HTML in PHP (HTMLを整形する）
HTML CSSサポート
HTML Snippet
HTML Hint
IntelliSense for CSS class

PHP関連

PHP Debug
PHP DocBlocker
PHP Intelephence (IntelliSenseより高機能なので）
phpcs (次の phpcs を行わないとエラーが出ます）

WordPress用

WordPress VS Code Extension Pack（これを入れると、他の諸々がインストールされる）

(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公式ドキュメント(日本語）のPHP Code Snifferの解説

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

3月 18, 2019 -- ITサポート