ペンギンスタート

【WordPress開発者向け】VS Codeの拡張機能と便利な設定

HOME > アーカイブ > ツール > 【WordPress開発者向け】VS Codeの拡張機能と便利な設定

Visual Studio Codeの拡張機能と便利な設定を、WordPress開発者向けにメモしました。VSCodeのバージョンアップによりビルトインされた機能は、コア機能を使用します。

PHP開発向け拡張機能

PHP Intelephense

Visual Studio Code 用の PHP 開発向けコード インテリジェンス。

初期設定
  1. ビルトイン機能を無効化
    1. VSCodeの拡張機能一覧を開く
    2. @builtin phpと検索する
    3. 「PHP 言語機能（PHP Language Features.）」を無効にする
    4. VSCodeを再起動する
    5. 「PHP の基本言語サポート（PHP Language Basics）」は有効のままにする
  2. デフォルトのフォーマッタを変更
    • VSCodeの左下の設定＞formatで検索
    • 「Editor: Default Formatter」を「PHP Intelephense」に変更
WordPressで使用する場合
  1. VSCodeの左下の設定を開き、検索にIntelephense: Stubsと入力
  2. 最終行の「項目の追加」を押下して、wordpressを選択しOKする

WordPress開発向け拡張機能

Hooks IntelliSense for WordPress

WordPress フック、アクション、フィルターの IntelliSense とオートコンプリート機能を提供

Automattic社のサポートで安心

最終更新：2024年12月

Search WordPress Docs

WordPress公式ドキュメントで関数、クラス、メソッド、フックを検索して別タブでリファレンスを表示できる拡張機能

最終更新：2024年5月

WordPress Playground for VS Code

ローカルの WordPress 開発サーバーを起動する

WP Block HTML

WordPress ブロック テーマで使用される独自の HTML のコーディングをサポートする

シンタックスハイライトがうまくいかず採用断念

未検証だが、Hooks IntelliSense for WordPressと併用すると、カッコやクォートの自動補完が効かないようだ

最新環境との互換性の懸念から採用を見送った類似プラグインもあります。

WordPress Snippets
  • WordPress関数、クラス、定数の自動補完
  • 関数をEmmet風の略語で入力できる
  • gti→get_the_ID(  )
  • 再変換はCtrl+spaceで可能
  • 最終更新：2022年11月、WordPress 6.1対応以降メンテナンスが停滞しているのが気になる
WordPress Snippet
  • 最終更新：2018年8月
WordPress Devlopment

最終更新：2018年11月

HTML/CSS向け拡張機能

HTMLHint

HTML の静的コード解析ツール

CSS Peek

HTML ファイルからそれぞれの CSS 定義への参照と移動を許可する

  • F12：定義へ移動
  • Alt+F12：参照を表示し編集

HTML CSS Support

HTML ファイルからサポートされたスタイルシートを読み込み、クラス名とid属性の入力を補完する

類似した拡張機能に「IntelliSense for CSS class names in HTML」がある。

初期設定
  • settings.jsonを開き、css.styleSheetsの配列[]内に、適用するスタイルシートのファイルパスを入力する
"css.styleSheets": [
  "**/*.css"
]

ピンポイントに役立つ拡張機能

CodeSnap

きれいにシンタックスハイライトされたままコードを画像化し共有しやすくする

コア機能拡張

Japanese Language Pack for Visual Studio Code

VS Code 用日本語言語パック

Live Server

ブラウザでプレビュー表示可能でライブリロード機能を備えた開発ローカルサーバー

類似した拡張機能に「Live Preview」があるが、VSCode内でプレビュー表示する

Prettier – Code formatter

コードを整形するフォーマッタ

初期設定

コードフォーマッタ

  • ファイルの保存時に自動的にフォーマット：設定＞Editor: Format On SaveをONにする

PHPを自動フォーマットから除外する場合は、setting.jsonに書きを追記

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[php]": {
  "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
  1. @lang:php formatを検索して、ユーザー[PHP]タブのEditor: Default FormatterをPHP Intelephenseに変更でも同様

自動整形時に波括弧で改行しない設定に変更

  1. VSCodeの設定を開き、Intelephense > Format: Bracesを検索
  2. k&r（改行しないスタイル）へ変更

タグ内で改行しないように変更

  1. VSCodeの設定を開き、Prettier: Print Widthを検索
  2. 行制限の設定に数値を指定。300など

タブサイズ

  1. VSCodeの設定を開き、Prettier: Tab Widthを検索
  2. スペース数を指定。Editor: Tab Sizeの設定と合わせて「4」とする。相違があるとインデントが赤くなる

文末にセミコロンをつけるか

  1. VSCodeの設定を開き、Prettier: Semiを検索
  2. セミコロンをつける場合、チェックを入れる
  3. デフォルトはセミコロンを付ける

二重引用符のかわりに単一引用符をしようするか

  1. VSCodeの設定を開き、Prettier: Single Quoteを検索
  2. 単一引用符を使用する場合、チェックを入れる
  3. デフォルトは二重引用符

改行文字のコード

  1. VSCodeの設定を開き、Prettier: End Of Lineを検索
  2. 単一引用符を使用する場合、チェックを入れる
    • lf – ラインフィード ( \n)、Linux と macOS および git リポジトリ内で共通
    • crlf – キャリッジリターン + ラインフィード ( \r\n)、Windows で一般的
    • cr – キャリッジリターン ( \r)
    • auto – 既存の行末を維持

htmlの閉じタグの前で改行しない

  1. VSCodeの設定を開き、bracketSameLineを検索
  2. Prettier: Bracket Same Lineにチェックを入れる
  3. VSCodeの設定を開き、htmlWhitespaceSensitivityを検索
  4. Prettier: HTML Whitespace Sensitivityの設定値をignoreに変更する

svgファイルをフォーマットする

  1. VSCodeの設定を開き、Files: Associationsを検索
  2. 項目に*.svg、値にhtmlを追加する

機能

  • F12：定義へ移動
  • Ctrl+マウスホバー：定義へ移動
  • Alt+F12：参照をピーク表示

Code Spell Checker

コード入力ミスを検出してアラート表示し、修正提案をする

スペルチェックから除外するワードを登録する

  1. C Spell: Wordsで検索
  2. 項目の追加にスペルチェックから除外したいワードを登録する

indent-rainbow

テキストの前のインデントを色付けし見やすくする

setting.jsonに下記を追記し、空白の背景色の代わりに線を使用する代替モードで実行する

  // Using the light mode
  "indentRainbow.indicatorStyle": "light",
  // we use a simple 1 pixel wide line
  "indentRainbow.lightIndicatorStyleLineWidth": 1,
  // the same colors as above but more visible
  "indentRainbow.colors": [
    "rgba(255,255,64,0.3)",
    "rgba(127,255,127,0.3)",
    "rgba(255,127,255,0.3)",
    "rgba(79,236,236,0.3)"
  ]

Image preview

エディター上で画像表示を確認

SVG-Viewer

Visual Studio Code の SVG ビューアー

ESLINT

JavaScriptおよびTypeScriptコードの静的解析ツール

Error Lens

エラーをコード内に表示する

Rainbow CSV

CSVを見やすく整形し色分けして表示する

コマンドパレットに「RBQL」と入力すると、表形式で表示され、「Input SQL」にSQLを投げてCSVデータ化される

SQLite

VSCodeでSQLiteを扱えるようになる

  1. コマンドパレットに「sql」と入力
  2. 「SQLite: Open Database」を選択
  3. 次にファイルを選択、
  4. エクスプローラータブに「SQLITE EXPLORER」という項目が増える

GitLens — Git supercharged

Gitのコミット履歴を確認したりブランチを切り替えたりなどソース管理ビューを強化する

拡張機能以外のコア機能の設定

Emmetで「!」を展開した時に「lang=”ja”」を設定する

  1. メニューバーからファイル→ ユーザー設定→ 設定
  2. variablesと検索
  3. Emmet: Variablesの設定で項目の追加
  4. 項目langに対して値をjaにしてOK

インデントのスペース数を設定する

  1. メニューバーからファイル→ ユーザー設定→ 設定
  2. Editor: Tab Sizeと検索
  3. 数値を入力する。Prettierの設定と合わせて「4」とする。相違があるとインデントが赤くなる

改行コードを設定する

  1. メニューバーからファイル→ ユーザー設定→ 設定
  2. Files: Eolと検索
  3. LF（Line Feed）に設定する場合、\nと入力する

予測変換をコロンで確定しない

  1. メニューバーからファイル→ ユーザー設定→ 設定
  2. acceptSuggestionOnと検索
  3. Editor: Accept Suggestion On Commit Characterのチェックを外す

行の折り返し

  1. メニューバーからファイル→ ユーザー設定→ 設定
  2. editor.wordWrapと検索
  3. Editor: Word Wrapをonにする

カーソルがどの括弧の中にいるか表示する

"editor.guides.bracketPairs": "active",

ツリービューのスティッキースクロール

デフォルトでON

設定＞workbench.tree.enableStickyScrollで検索

サイドパネルからスクリプト実行

Ctrl+Shift+Pでコマンドパレットを開き、npm scriptsで検索。ヒットしたExplorer: Focus on NPM Scripts Viewをクリックすると有効化される

スニペット登録

設定＞スニペット へ移動し、html.jsonを選択

phpのデリミタをph→tag、php→tagで呼び出せるように登録する

{
	"delimiter_ph": {
		"prefix": "ph",
		"body": ["<?php $1"]
	},
	"delimiter_php": {
		"prefix": "php",
		"body": ["<?php $1 ?>"]
	},
}

設定＞スニペット へ移動し、css.jsonを選択

@charset "utf-8";を@cha→tag、@cha→tagで呼び出せるように登録する
この時、ダブルクォーテーションはバックスラッシュでエスケープする

{
	"@charset utf-8": {
		"prefix": "@cha",
		"body": ["@charset \"utf-8\";"]
	},
	"charset utf-8": {
		"prefix": "cha",
		"body": ["@charset \"utf-8\";"]
	},
}

スニペット補完を無効化

設定＞Editor › Suggest: Show Snippetsで検索

チェックを外すと無効化される

デフォルトではスニペット候補の表示は有効

スニペット補完を設定

設定＞Editor: Snippet Suggestionsで検索

  • top：常に最上部に表示
  • bottom：常に最下部に表示
  • inline：他の候補と一緒に表示（デフォルト）
  • none：スニペットの候補を表示しない

svgファイルをコードで表示する

設定＞setting.jsonに追記

  "workbench.editorAssociations": {
    "*.svg": "default"
  }

GitHub Copilot呼び出しショートカットを変更

  1. キーボードショートカット＞github.copilot.generateに追記
  2. キーバインドを変更
    • 変更前：Ctrl＋Enter
    • 変更後：Ctrl＋Alt＋s

インストール不要な拡張機能

コア機能に実装されたため、インストール不要な拡張機能とビルトイン機能の設定箇所

  • Auto Close Tag
    • 自動閉じタグ補完
    • autoClosingTagsがデフォルトでON
  • Auto Rename Tag
    • 自動タグ名変更
    • Editor:linkedEditingを有効化する
  • Auto Complete Tag
    • 上記2点の拡張機能を同梱している拡張のため不要
  • Better Folding
    • Better Folding:Fold Closing TagsがデフォルトでON
  • Path Autocomplete
    • srcやhref属性のパス候補を表示
  • Whitespace++ ＼ Zenkaku
    • Editor: Render WhitespaceがデフォルトでON
  • vscode-icons
    • デフォルトの「Seti」のままにする
  • rainbow brackets
    • Editor › Bracket Pair Colorization:EnabledがデフォルトでON
  • Highlight Matching Tag
    • Editor › Bracket Pair Colorization: EnabledがデフォルトでON
      Editor › Guides: Bracket Pairsがデフォルトでactive
  • Japanese Language Pack for Visual Studio Code
    • 翻訳は、設定＞Command Pallete＞Configure Display Languageの中から日本語を選択すると、
      Japanese Language Packがインストールされる

キーバインドの設定

設定場所は、左下の管理＞キーボードショートカット＞右上のキーボードショートカットを開く（JSON）と進み、JSONを編集する。

タブキーで予測変換から選択

[select next suggestion]で検索し該当の鉛筆マークを押下、キーバインドしたいtabを押下してEnter

過去に利用していた設定メモ。

  1. 入力補完機能（suggest）をTabとShift＋Tabで移動する
  2. Tabで括弧の外へカーソルを移動する
  3. タブの挿入はShift＋Tabで行う
[
    {
        "key": "tab",
        "command": "selectNextSuggestion",
        "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
    },
    {
        "key": "shift+tab",
        "command": "selectPrevSuggestion",
        "when": "suggestWidgetMultipleSuggestions && suggestWidgetVisible && textInputFocus"
    },
    {
        "key": "tab",
        "command": "cursorRight",
        "when": "!suggestWidgetMultipleSuggestions && !suggestWidgetVisible && textInputFocus"
    },
    {
        "key": "shift+tab",
        "command": "tab",
        "when": "!suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
    },
    {
        "key": "tab",
        "command": "-tab",
        "when": "!suggestWidgetMultipleSuggestions && !suggestWidgetVisible && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
    },

]

Github Copilot

Githubと連携した後にエディターに表示されるインラインチャットを無効化する

  1. 設定＞Editor: Snippet Suggestionsで検索
  2. Github › Copilot › Editor: Enable Auto Completionsのチェックを外す

リファレンス

WordPress

ブロック開発
テーマ開発
管理画面
エディタ
サイト構成
マルチサイト
セキュリティ

Web開発

htmlcss
サーバー
ツール