More than 3 years have passed since last update.

[WordPress]PHPCodeSniffer(phpcs)でWPコーディング規約をチェック＆自動整形できるようにする

Last updated at 2021-06-23Posted at 2019-12-23

ちゃんとしようと思い、WordPressコーディング規約をちゃんと学び始めました。
でも自分で間違いを探し出すのはとっても大変だとうなだれてたら、構文エラーをチェックでき、自動整形もしてくれる方法を知ったので忘れないうちにまとめておきます。
野性味のあるまなちゃんも貼っておきます。

かわいい。
#WordPressコーディング規約（WordPress Coding Standard）とは
WordPressには、コーディング規約がある。
コーディング規約はCSS、HTML、JavaScript、PHPと言語ごとに存在する。

コーディング規約を理解するのに、よく参考にさせていただいてるサイト
WordPress コーディングスタンダードの正式な書き方をまとめてみる – ミルログ

#はじめに
VScodeを使用している場合は設定を確認する必要がある。
設定でなおせる規約違反もあるため。

Editor: Detect Indentation　→チェックを外す
Editor: Insert Spaces　→チェックを外す
Editor: Tab Size　→**4に設定**

command+;+,で設定を開き、Editor: Detect Indentationと検索

``
#準備
コマンドからもろもろインストールして、チェック＆自動整形の準備をしていく。
##★PHP CodeSniffer(phpcs)をインストール

###１．まずはcomposerをインストール
Homebrewを使ってcomposerをインストールする。（Homebrewが入ってて良かった）
phpのインストールも必要なので入ってなかったら、brew install php70でインストール。

$ brew install composer

###２．composerでPHP CodeSniffer(phpcs)をインストール

$ composer global require "squizlabs/php_codesniffer=*"

####インストールされたことを確認する

$ .composer/vendor/bin/phpcs --version

下記が表示されればインストールOK!

$ .composer/vendor/bin/phpcs --version
PHP_CodeSniffer version 3.5.3 (stable) by Squiz (http://www.squiz.net)

###3．phpcsのみでコマンド実行出来るように、パスを登録

$ echo 'export PATH=$HOME/.composer/vendor/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

####※パスが登録されたかバージョンを表示させるコマンドで確認

$ phpcs --version

下記が表示されればパスの登録OK!

$ phpcs --version
PHP_CodeSniffer version 3.5.3 (stable) by Squiz (http://www.squiz.net)

##★WordPressコーディング規約をインストールし、設定
PHP CodeSnifferがインストールできたら、使用する規約であるWordPressコーディング規約（WordPress Coding Standard）をインストール。
デフォルトでは PEAR, PHPCS, PSR1, PSR2, Squiz, Zend がインストールされてる。

###１．Composerのディレクトリにコーディング規約を配置する。

$  git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

###２．PHP CodeSniffer(phpcs)にコーディング規約を設定

$ phpcs --config-set installed_paths ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

####インストールされたことを確認

$ phpcs -i

#####下記が表示されたら、インストールOK！

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

##★普段PHPはWordPressでしか使わないのならデフォルトのコーディング規約として設定しておく

$ phpcs --config-set default_standard WordPress

#実行
準備が整ったので、コマンドラインで実行する。

##★エラーチェックの実行(phpcs)

(例)

$ phpcs wp-content/themes/theme-name/page.php

※↑パスとファイル名を指定
###エラーがあるとこんな感じで表示される

(例)

$ phpcs wp-content/themes/theme-name/page.php

FILE: ~{省略}~/wp-content/themes/theme-name/page.php
------------------------------------------------------------------------------------------------------
FOUND 1 ERROR AND 1 WARNING AFFECTING 2 LINES
------------------------------------------------------------------------------------------------------
 11 | WARNING | [ ] Found precision alignment of 3 spaces.
 14 | ERROR   | [x] Tabs must be used to indent lines; spaces are not allowed
------------------------------------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY
------------------------------------------------------------------------------------------------------

Time: 120ms; Memory: 8MB

※~{省略}~には絶対パスが出力される
WARNINGとERRORが一つずつでてることが確認できる。

例のエラーは２つのエラーだが、たくさんエラーが出てしまっては一つずつ読んで治すのは骨が折れる。
PHP Code Beautifier and Fixer(phpcbf)も同時にインストールされてるので、これを実行すれば自動整形ができる。
##★自動整形の実行(phpcbf)

(例)

$ phpcｂｆ wp-content/themes/theme-name/page.php

※↑パスとファイル名を指定
###自動整形され、こんな感じで表示される

(例)

$ phpcbf wp-content/themes/theme-name/page.php

PHPCBF RESULT SUMMARY
---------------------------------------------------------------------------------------------------------------------
FILE                                                                                                 FIXED  REMAINING
---------------------------------------------------------------------------------------------------------------------
~{省略}~/wp-content/themes/theme-name/page.php     1      1
---------------------------------------------------------------------------------------------------------------------
A TOTAL OF 1 ERROR WERE FIXED IN 1 FILE
---------------------------------------------------------------------------------------------------------------------

Time: 239ms; Memory: 8MB

※~{省略}~には絶対パスが出力される
WARNINGで出てた部分は整形されてない、、、。

###自動整形だけでは修正されない部分もあるので、エラーを見ながら修正していく。

##.を指定すると、ディレクトリ内すべてにチェック（または自動整形）される

(例)

$ phpcs wp-content/themes/theme-name/.

(例)

$ phpcbf wp-content/themes/theme-name/.

#まとめ
実は、PHPのPSR2とWordPressコーディング規約のルール同士が喧嘩しててうまく行かずはまりました。
でもデフォルトにWordPressコーディング規約を設定することでうまく行ったので、大事であります。

$ phpcs --config-set default_standard WordPress

#参考サイト
PHP CodeSniffer を使ってWPコーディングスタンダードのエラーをチェック&自動修正しよう [3.x 対応] – ミルログ
 macOSのVisual Studio CodeでPHP CodeSniffer & WordPressコーディング規約によるコードチェック環境を構築 | taxaboxo.com

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up