2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

WordPress開発を快適に! VSCode設定+プラグイン

Last updated at Posted at 2020-11-10

はじめに

WordPressの学習やテーマ開発をしている時、インデントがズレてしまって見づらい!!!
そんな時、スペースやタブで見た目を揃えていませんか?
今回は、コード整形とテンプレートタグのインテリセンス(自動補完)について紹介します。

インテリセンス用プラグイン

WordPressのテンプレートタグはPHPの組み込み関数ではないので補完候補として出てきてくれません。
以下のプラグインを入れるだけで特別な設定はせずとも補完候補として出てきてくれるようになります。
WordPress Snippets

最初のうちはメソッド名を全て手打ちして覚えるという学習方法もアリかと思います。
ですが、慣れてくると長いメソッドをタイプするのは面倒になってきます。。。
例えば、get_template_directory_uri()
単語の頭文字を順番に入力するとインテリセンスが機能する様になっているので有効活用していきましょう!!
wordpress_snippets.gif

コード整形用プラグイン

今回は2通り紹介します。
工数はどちらもそれほど大差がないのでお好みで!

以下のどちらかのプラグインを入れてください。

  1. Format HTML in PHP
  2. PHP Intelephense

プラグインを入れ終わったら、setting.jsonを開いて以下の設定を追記してください!
settings.jsonはこちらのリンクを参照ください
settings.json内の別の場所で"editor.formatOnSave": trueが記述されていれば、以下の記述はしなくても問題ありません。

settings.json
  "[php]": {
    "editor.formatOnSave": true
  }

これでファイルを保存するたびに自動でコード整形してくれるようになります!

PHP Intelephenseを入れた方対象

PHP Intelephenseはテンプレートタグが組み込み関数ではないので、エラーのように存在しないメソッドは赤い波線が表示されます。
これを解決するにはこちらのサイトをご参照ください。

おわりに

インデントが揃うだけでもかなり気分的にスッキリするのでお試しあれ!

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?