記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【wordpress向け】vscodeオススメプラグイン15選

人気のCMS「wordpress」人気のテキストエディタ「vscode」。 この2つを使用しweb制作をしている方は多いと思います。 そこで今回は、wordpress向けの、vscodeオススメプラグインを紹介をします。

カテゴリ: Visual Studio Code

wordpress、vscodeを使用しweb制作をしている方も多いのではないでしょうか?
vscodeはwordpressとも相性が良く、wordpress向けの便利なプラグインが数多く用意されています。
取り入れることで、より効率的な開発をおこなう事ができるでしょう。
今回は、wordpressに便利なvscodeのオススメプラグイン15選を紹介します。

Visual Studio Codeとは?

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

vs codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

vscodeプラグイン追加方法

vscodeへプラグインを追加するには、vscodeを開き「プラグインアイコン」を押します。



検索バーに追加したいプラグイン名を記載します。
例えば「Auto Rename Tag」というプラグインを追加したかったら。
検索バーに「Auto Rename Tag」と入力し、「インストール」を押します。
これでプラグインを使用する事ができます。
※プラグインによっては、インストール後に設定を行う必要あり。



検索バーに何も記載していなければ、すでにインストールされているプラグインが表示されます。

wordpress vscodeオススメプラグイン

1.WordPress Snippet

word press専用のスニペットプラグインです。
word press最初の関数を記入すれば、あとは補完してくれます。
関数を全て覚えておく必要、調べに戻る必要なく、記述量を減らす事ができるためオススメのプラグインとなっています。

2.Auto Rename Tag

HTMLの開始タグと、終了タグを同時に編集してくれるプラグインです。
wordpressのテーマ編集では、タグ名の変更が頻繁に起きます。
開始タグだけしか直していなかったという、人的ミスを防いでくれるためオススメのプラグインとなっています。

3.IntelliSense for CSS class names in HTML

HTMLファイルとCSS ファイルが連携し、class名やidを入力すると、class名、id名の候補を出してくれます。
CSSファイルに戻り確認、コピーしなくても候補を出してくれるため効率的なコーディング、人為的ミスを防いでくれます。

4.PHP Intelephense

phpコードの補完、コードの修正、色分け、エラー検知してくれるプラグインです。wordpressはphpの記述量が多い為、必ずインストールしておいた方がよいプラグインと言えます。

5.PHP Debug

wordpressの動作確認やデバッグに便利なプラグインです。
vscodeからwordpressを起動、プログラムを指定した箇所で止め、1行ずつプログラムを実行する事ができます。

6.Search WordPress Docs

wordpressの関数やメソッドについてリファレンスを参考にしたい時に、簡単にリファレンスを参照できるプラグインです。
検索したい関数名・メソッドを選択し実行すると、すぐにリファレンスページをブラウザで開いてくれます。

7.ACF-Snippet

「Advanced Custom Fields」のコード入力を補完してくれるプラグインです。
「Advanced Custom Fields」はwordpressの管理画面上で簡単にカスタムフィールドを作成できるプラグインで、使用頻度も高いのでwordpressにはオススメのプラグインです。

8.WooCommerce – Snippets & autocomplete

「WooCommerce 」の関数などの入力補完をしてくれるプラグインです。
「WooCommerce 」とはwordpressのネットショピングを簡単に構築できるプラグインで、ショピングカートの世界シェアno.1なので使用頻度も高いです。

9. Live server

HTML/CSS/jsの変更をリアルタイムでブラウザに反映できるプラグインです。
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

10.Browser Preview

HTML/CSS/jsに加え「PHP」もリアルタイムでブラウザに反映できるプラグインです。
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。
ただしURLが必要なのと、ブラウザ「Google Chrome」のみ対応というデメリットもあります。

11. EditorConfig for VS Code

異なるエディタでも統一ルールを設定できるプラグインです。
チームで開発した場合、インデントや改行などのコーディングスタイルを統一化する事ができます。

12. phpcs

PHPコードの規約に沿っているかを、確認できるvscodeのプラグインです。
使用する際は、php_codesnifferのインストール、wordpressのコーディングスタンダードのインストール、設定、vsコードの設定が必要になります。
設定方法は下記を参照してください。
https://qiita.com/AkiraTameto/items/6f4aa8debd18024cf634

13.Trailing Spaces

行末の余計な空白をハイライトするプラグイン。
行末の余計な空白はプログラムが動かない原因となり、ハイライトで可視化してくれる事で人為的なミスを防ぐ事ができます。

14.Bracket Pair Colorizer

CSS、JavaScript、PHPなどを記述する際、対応するカッコに色付けをしてくれ見やすくする事ができ、ミスを減らしてくれます。

15.file-icons

フォルダやファイルのアイコンを、わかりやすいアイコンに表示してくれるプラグインです。
wordpressだとフォルダやファイルが多いので便利なプラグインの一つと言えます。

まとめ

今回は、「wordpressに特化したvscodeのオススメプラグイン」を15種類紹介してきました。

プラグイン名 機能
1.WordPress Snippet word press専用のスニペットプラグイン
2.Auto Rename Tag HTMLの開始タグと、終了タグを同時に編集してくれるプラグイン
3.IntelliSense for CSS class names in HTML class名やidを入力すると、 HTMLファイルとCSS ファイルが連携し、候補を出してくれるプラグイン
4.PHP Intelephense phpコードの補完、コードの修正、色分け、エラー検知してくれるプラグイン
5.PHP Debug wordpressの動作確認やデバッグに便利なプラグイ
6.Search WordPress Docs wordpressの関数やメソッドについてリファレンスを参考にしたい時に、簡単にリファレンスを参照できるプラグインです。
7.ACF-Snippet 「Advanced Custom Fields」のコード入力を補完してくれるプラグイン
8.WooCommerce – Snippets & autocomplete 「WooCommerce 」の関数などの入力補完をしてくれるプラグイン
9. Live serve HTML/CSS/jsの変更をリアルタイムでブラウザに反映できるプラグイン
10.Browser Preview HTML/CSS/jsに加え「PHP」もリアルタイムでブラウザに反映できるプラグイン
11. EditorConfig for VS Code 異なるエディタでも統一ルールを設定できるプラグイン
12. phpcs PHPコードの規約に沿っているかを、確認できるvscodeのプラグイン
13.Trailing Spaces 行末の余計な空白をハイライトするプラグイン
14.Bracket Pair Colorizer CSS、JavaScript、PHPなどを記述する際、対応するカッコに色付けをしてくれるプラグイン
15.file-icons フォルダやファイルのアイコンを、わかりやすいアイコンに表示してくれるプラグイン

いかがだったでしょうか?
本記事を参考に、ご自身の開発環境にあったプラグインを導入していただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。