WordPressちゃんとやろうと思ってVScodeにphpcs入れたらめっちゃ怒られた

7731 ワード
phpcs PHP WordPress HTML CSS PHP テキストリンク

この記事は

久しぶりにWordPressに触れる機会があったのでちゃんとしようと思ってVScodeにphpcsていうプラグイン入れたら早速めっちゃ怒られたので一個ずつ解決していくぅ

エラーメッセージで検索かけたところマジでサイトが出てこなくて凹んだので備忘録的に書き残す！

ちなみに普段ほとんどWordPress触らないからマジで初心者向けです。

phpcsはこれ
https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs

エラー内容と解決方法

共通

1. 改行前スペース

Whitespace found at end of line

改行前に半角スペースが入っていたりするとこう怒られる。
半角スペースを消すと怒られなくなる。

2. コード後の改行

File must end with a newline character

コードのあとに改行がないときの怒られ方。改行を足すと機嫌は直る。

3. コメントの下の空改行

There must be no blank lines after the function comment

コメントの下に空の改行があるとこれが出る。空改行を消すとエラーが消える。

4. ドットの左右は半角スペースを

Contact operator must be surrounded by a single space

ドットの左右に半角スペースを入れないとこうなる。入れると直る。

5. コメント文の最後には.か!か?をつける

Inline comments must end in full-stops, exclamation marks, or question marks

文章の最後に.か!か?がついてない時の怒り方。日本語と一緒で文章は句読点で終わらせよう

6. コメントが見つからない

Missing file doc comment

WordPressのファイルは、それぞれがなんのファイルなのかをコメントで記す必要があるらしい。
それがないって怒っているのが上記のエラーメッセージ。

/**
 * Header

 * @package ThemeName
 */

こんな感じで、概要と@package ほにゃららを入れてあげると直る。
@package以下はなんでもよいらしい。テーマの名前。

このサイトわかりやすかった
WordPress コーディングスタンダードの正式な書き方をまとめてみる – ミルログ

7. ループ系

Newline required after opening brace

改行の仕方で怒られてる場合。

//怒られる
<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
...
  <?php endwhile; ?>
<?php endif; ?>

//怒られない
<?php
if ( have_posts() ) :
  while ( have_posts() ) :
    the_post();
    ?>
...
  <?php endwhile; ?>
<?php endif; ?>

functions.php

1. コメントが見つからない　その2

Missing file doc comment

一個前のエラーと一緒だけど、関数を作成している場合には関数ごとにもコメントが必要

//functions.phpのDoc
/**
 * Functions
 *
 * @package ThemeName
 */

//関数$my_enqueue_scripts(任意の関数名)のDoc
/**
 * $my_enqueue_scripts.
 */

2. バージョン記載

Resource version not set in call to wp_enqueue_style(). this means new versions of the style will not always be loaded due to browser caching.

読み込んだCSSファイルにバージョン記載がない場合の内容。何らかバージョン情報を記載してあげると機嫌が直った。

//怒られる
wp_enqueue_style( 'common-css', get_template_directory_uri() . '/assets/css/styles.min.css', '');

//怒られない
wp_enqueue_style( 'common-css', get_template_directory_uri() . '/assets/css/styles.min.css', '', '1.0.0' );

header.php

1. スタイルシート等の読み込み方法

Stylesheets must be registered/enqueued via wp_enqueue_style

スタイルシートはwp_enqueue_styleで読み込んでねという。
JSもwp_enqueue_scriptsで読み込んでないと同じように怒られる。

2. 読み込みはfunctions.phpに

All output should be run through an escaping function (see the Security sections in the WordPress Developer Handbooks), found 'get_template_directory_uri.'

JS,jQuery,CSS周りの記述をheadに入れていたら言われた。
これは主にURLをエスケープ処理してない場合に出る文言らしい。
そもそもfunctions.phpに入れてしまえば怒られなくなったから大人しくfunctions.phpにほっぽった。

関数周り

1. in_arrayの第3引数にはtrueを

Not using strict comparison for in_array; supply true third argument.

in_array関数を使うときは第3引数（ true ）を指定する。

in_arrayを使うときは黙って第三引数を付けること

2. 等号を揃える

Equals sign not aligned with surrounding assignments. Expected 6 spaces but found 1space.
//6とか1とかは例

これわからなさすぎて？？？ってなってたけど超簡単で、ただ位置をスペースで揃えてきれいにしようねってことだった。。

//NG
$hoge = うんたらかんたら
$fugafuga_id = うんたらかんたら
//OK
$hoge        = うんたらかんたら
$fugafuga_id = うんたらかんたら

まとめ

とりあえずここまで。まだいっぱい出る気がするのでそのときは追記していくぅ（2021/05/07）