VS Code для WordPress-разработки: Полный гайд по настройке

VS Code для WordPress-разработки — редактор с Xdebug отладкой, PHP Intelephense автодополнением и WordPress сниппетами

Откройте любой форум WordPress-разработчиков. Вопрос: «Какой редактор кода вы используете?» Ответы: «VS Code», «VS Code», «VS Code». Иногда кто-то робко упомянет PhpStorm. Но VS Code доминирует.

Почему? Потому что он бесплатный, быстрый, и с правильными расширениями превращается в мощнейшую IDE для WordPress. Но есть проблема: из коробки VS Code не понимает WordPress. Нет автодополнения для функций вроде get_posts() или wp_enqueue_script(). Нет подсказок по хукам. Нет отладки.

Сегодня исправим это. Настроим VS Code так, чтобы он понимал WordPress лучше, чем вы сами. Расширения, сниппеты, Xdebug, Docker-интеграция. Всё с готовыми конфигами, которые можно скопировать и использовать.

Шаг 1: Базовая установка

Если вы ещё не установили VS Code — сделайте это. Идём на code.visualstudio.com, скачиваем, устанавливаем.

После установки откройте настройки (Ctrl+, или Cmd+, на Mac) и добавьте:

{
    "editor.fontSize": 14,
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme"
}

Разберём важные настройки:

  • fontFamily: JetBrains Mono или Fira Code — лучшие моноширинные шрифты для кода. Они поддерживают лигатуры (красивые символы для =>, != и т.д.)
  • fontLigatures: включает лигатуры. Включите — код станет красивее
  • tabSize: WordPress использует 4 пробела для отступов. Не 2, не табы — именно 4 пробела
  • formatOnSave: автоматически форматирует код при сохранении. Экономит время
  • autoSave: автосохранение через 1 секунду. Не теряйте изменения

Шаг 2: Обязательные расширения

VS Code без расширений — как WordPress без плагинов. Работает, но бесполезен. Установите эти расширения (нажмите Ctrl+Shift+X для открытия панели расширений):

PHP Intelephense (обязательно)

Это не просто автодополнение. Это полноценный PHP-анализатор. Он понимает WordPress-функции, показывает подсказки по параметрам, находит ошибки до запуска кода.

После установки добавьте в настройки:

{
    "intelephense.environment.phpVersion": "8.2",
    "intelephense.stubs": [
        "apache",
        "bcmath",
        "bz2",
        "calendar",
        "Core",
        "ctype",
        "curl",
        "date",
        "dom",
        "fileinfo",
        "filter",
        "ftp",
        "gd",
        "hash",
        "iconv",
        "json",
        "libxml",
        "mbstring",
        "mysqli",
        "mysqlnd",
        "openssl",
        "pcre",
        "PDO",
        "pdo_mysql",
        "Phar",
        "SimpleXML",
        "soap",
        "sockets",
        "sodium",
        "SPL",
        "standard",
        "tokenizer",
        "xml",
        "xmlreader",
        "xmlwriter",
        "zip",
        "zlib",
        "wordpress"
    ],
    "intelephense.files.associations": [
        "*.php",
        "*.inc"
    ]
}

Обратите внимание на "wordpress" в списке stubs. Это критично — без этого Intelephense не поймёт WordPress-функции.

WordPress Snippets

Расширение добавляет сниппеты для WordPress. Вместо того чтобы писать:

add_action( 'init', function() {
    // код
} );

Вы пишете addaction и нажимаете Tab. VS Code сам подставит шаблон.

Полезные сниппеты:

  • addaction → add_action()
  • addfilter → add_filter()
  • wpquery → new WP_Query()
  • wpenqueue → wp_enqueue_script()
  • getposts → get_posts()

PHP Debug

Для отладки с Xdebug. Без него вы отлаживаете через var_dump() и die(). С ним — ставите breakpoints и шагате по коду.

Настройка позже, в разделе про Xdebug.

Prettier — Code formatter

Автоматическое форматирование кода. Для PHP используйте PHP CS Fixer или phpfmt.

Material Icon Theme

Красивые иконки для файлов. Не влияет на продуктивность, но приятно.

GitLens

Показывает, кто и когда изменил каждую строку кода. Если работаете в команде — обязательно.

Шаг 3: Настройка workspace для WordPress

VS Code понимает проекты через workspace. Создайте файл .vscode/settings.json в корне вашего WordPress проекта:

{
    "php.validate.executablePath": "/usr/bin/php",
    "php.suggest": false,
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/vendor": false
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/vendor": false,
        "**/wp-includes": true,
        "**/wp-admin": true
    },
    "intelephense.files.exclude": [
        "**/.git/**",
        "**/.svn/**",
        "**/node_modules/**",
        "**/wp-includes/**",
        "**/wp-admin/**",
        "**/vendor/**/tests/**"
    ],
    "intelephense.files.maxSize": 5000000
}

Разберём важные моменты:

  • php.suggest: false — отключаем встроенные подсказки PHP. Intelephense лучше
  • search.exclude — исключаем из поиска wp-includes и wp-admin. Они большие и замедляют поиск
  • intelephense.files.exclude — Intelephense не индексирует эти папки. Это ускоряет автодополнение

Шаг 4: Xdebug — отладка как в IDE

Xdebug — это инструмент отладки для PHP. С ним вы можете:

  • Ставить breakpoints (остановки) в коде
  • Шагать по коду строка за строкой
  • Смотреть значения переменных в реальном времени
  • Анализировать стек вызовов

Без Xdebug вы отлаживаете через var_dump() и error_log(). С Xdebug — как в настоящей IDE.

Установка Xdebug

Проверьте, установлен ли Xdebug:

php -m | grep xdebug

Если пусто — устанавливаем:

# Ubuntu/Debian
sudo apt install php-xdebug

# CentOS/RHEL
sudo yum install php-xdebug

# Или через pecl
pecl install xdebug

Настройка Xdebug

Откройте php.ini (или создайте отдельный конфиг /etc/php/8.2/mods-available/xdebug.ini):

[xdebug]
zend_extension=xdebug

xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
xdebug.log=/var/log/xdebug.log
xdebug.idekey=VSCODE

Разберём параметры:

  • xdebug.mode=debug — включаем режим отладки
  • xdebug.start_with_request=yes — запускать отладку при каждом запросе
  • xdebug.client_host — куда отправлять данные отладки (localhost)
  • xdebug.client_port — порт 9003 (стандартный для Xdebug 3)
  • xdebug.idekey=VSCODE — идентификатор для VS Code

Перезапустите PHP-FPM:

sudo systemctl restart php8.2-fpm

Настройка VS Code для Xdebug

Создайте файл .vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },
            "xdebugSettings": {
                "max_data_size": 4096,
                "show_hidden": 1,
                "max_children": 100,
                "max_depth": 5
            }
        }
    ]
}

Разберём:

  • pathMappings — соответствие путей на сервере и локально. Если WordPress в /var/www/html, а вы работаете в VS Code в другой папке — укажите соответствие
  • port — должен совпадать с xdebug.client_port

Как использовать Xdebug

  1. Откройте PHP-файл в VS Code
  2. Кликните слева от номера строки — появится красная точка (breakpoint)
  3. Запустите отладку: нажмите F5 или выберите «Run → Start Debugging»
  4. Откройте страницу WordPress в браузере
  5. VS Code остановится на breakpoint. Теперь вы можете:
    • Шагать по коду (F10 — следующая строка, F11 — войти в функцию)
    • Смотреть переменные в панели «Variables»
    • Выполнять код в консоли («Debug Console»)

Это меняет всё. Вместо того чтобы гадать, почему не работает код, вы видите его выполнение в реальном времени.

Шаг 5: Docker-интеграция

Если вы используете Docker для WordPress (а вы должны), VS Code может работать с контейнерами напрямую.

Установите расширения:

  • Docker (от Microsoft)
  • Remote — Containers (от Microsoft)

Настройка Remote Containers

Создайте файл .devcontainer/devcontainer.json:

{
    "name": "WordPress Development",
    "dockerComposeFile": "docker-compose.yml",
    "service": "wordpress",
    "workspaceFolder": "/var/www/html",
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash",
        "php.validate.executablePath": "/usr/local/bin/php",
        "intelephense.environment.phpVersion": "8.2"
    },
    "extensions": [
        "bmewburn.vscode-intelephense-client",
        "junstyle.php-cs-fixer",
        "ms-vscode.php-debug"
    ],
    "forwardPorts": [
        80,
        443,
        3306
    ],
    "postCreateCommand": "composer install && npm install",
    "remoteUser": "www-data"
}

Теперь вы можете:

  1. Нажать Ctrl+Shift+P
  2. Выбрать «Remote-Containers: Reopen in Container»
  3. VS Code откроется внутри Docker-контейнера
  4. Все расширения работают внутри контейнера
  5. Терминал — это терминал контейнера
  6. Отладка работает без настройки pathMappings

Это идеально. Ваша среда разработки идентична продакшену.

Шаг 6: Сниппеты для WordPress

VS Code позволяет создавать свои сниппеты. Откройте File → Preferences → User Snippets → php.json и добавьте:

{
    "WordPress Plugin Header": {
        "prefix": "wppluginheader",
        "body": [
            " __( 'Primary Menu', '${1:textdomain}' ),",
            "    ) );",
            "}",
            "add_action( 'after_setup_theme', '${1:theme}_setup' );",
            "",
            "/**",
            " * Enqueue scripts and styles",
            " */",
            "function ${1:theme}_scripts() {",
            "    wp_enqueue_style( '${1:textdomain}-style', get_stylesheet_uri(), array(), '${2:1.0.0}' );",
            "    wp_enqueue_script( '${1:textdomain}-script', get_template_directory_uri() . '/assets/js/main.js', array(), '${2:1.0.0}', true );",
            "}",
            "add_action( 'wp_enqueue_scripts', '${1:theme}_scripts' );"
        ],
        "description": "WordPress theme functions"
    },
    "WordPress Custom Post Type": {
        "prefix": "wpcpt",
        "body": [
            "/**",
            " * Register custom post type",
            " */",
            "function ${1:prefix}_register_${2:post_type}() {",
            "    $labels = array(",
            "        'name'               => __( '${3:Post Types}', '${1:textdomain}' ),",
            "        'singular_name'      => __( '${4:Post Type}', '${1:textdomain}' ),",
            "        'menu_name'          => __( '${3:Post Types}', '${1:textdomain}' ),",
            "        'add_new'            => __( 'Add New', '${1:textdomain}' ),",
            "        'add_new_item'       => __( 'Add New ${4:Post Type}', '${1:textdomain}' ),",
            "        'edit_item'          => __( 'Edit ${4:Post Type}', '${1:textdomain}' ),",
            "        'new_item'           => __( 'New ${4:Post Type}', '${1:textdomain}' ),",
            "        'view_item'          => __( 'View ${4:Post Type}', '${1:textdomain}' ),",
            "        'search_items'       => __( 'Search ${3:Post Types}', '${1:textdomain}' ),",
            "        'not_found'          => __( 'No ${3:Post Types} found', '${1:textdomain}' ),",
            "        'not_found_in_trash' => __( 'No ${3:Post Types} found in trash', '${1:textdomain}' ),",
            "    );",
            "",
            "    $args = array(",
            "        'labels'             => $labels,",
            "        'public'             => true,",
            "        'publicly_queryable' => true,",
            "        'show_ui'            => true,",
            "        'show_in_menu'       => true,",
            "        'query_var'          => true,",
            "        'rewrite'            => array( 'slug' => '${2:post-type}' ),",
            "        'capability_type'    => 'post',",
            "        'has_archive'        => true,",
            "        'hierarchical'       => false,",
            "        'menu_position'      => null,",
            "        'menu_icon'          => 'dashicons-admin-post',",
            "        'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),",
            "        'show_in_rest'       => true,",
            "    );",
            "",
            "    register_post_type( '${2:post_type}', $args );",
            "}",
            "add_action( 'init', '${1:prefix}_register_${2:post_type}' );"
        ],
        "description": "WordPress custom post type registration"
    }
}

Теперь вы можете писать:

  • wppluginheader + Tab → шаблон плагина
  • wptheme + Tab → базовые функции темы
  • wpcpt + Tab → регистрация custom post type

Это экономит часы времени.

Шаг 7: PHP CodeSniffer для WordPress

WordPress Coding Standards (WPCS) — это стандарты кодирования WordPress. Если вы пишете код для wordpress.org или для клиентов, вы должны им следовать.

PHP CodeSniffer проверяет ваш код на соответствие стандартам.

Установка

# Устанавливаем PHP_CodeSniffer
composer global require "squizlabs/php_codesniffer=*"

# Устанавливаем WordPress Coding Standards
composer global require "wp-coding-standards/wpcs=*"

# Регистрируем стандарты
phpcs --config-set installed_paths $(composer global config home)/vendor/wp-coding-standards/wpcs

Настройка VS Code

Установите расширение PHP CodeSniffer (от ikappas).

Добавьте в настройки VS Code:

{
    "phpcs.enable": true,
    "phpcs.standard": "WordPress",
    "phpcs.executablePath": "/home/youruser/.composer/vendor/bin/phpcs",
    "phpcs.documentRoot": "/var/www/html"
}

Теперь VS Code будет подчёркивать нарушения стандартов:

  • Неправильные отступы
  • Отсутствующие пробелы
  • Неправильные кавычки
  • Отсутствующие комментарии

Автоматическое исправление

Установите PHP CS Fixer (от junstyle):

composer global require "friendsofphp/php-cs-fixer"

Настройте в VS Code:

{
    "php-cs-fixer.config": ".php-cs-fixer.php",
    "php-cs-fixer.onsave": true
}

Создайте файл .php-cs-fixer.php в корне проекта:

in(__DIR__)
    ->name('*.php')
    ->notPath('vendor/')
    ->notPath('node_modules/');

$config = new PhpCsFixer\\Config();
return $config->setRules([
    '@PSR2' => true,
    'array_syntax' => ['syntax' => 'short'],
    'indentation_type' => true,
    'line_ending' => true,
    'no_trailing_whitespace' => true,
    'no_whitespace_in_blank_line' => true,
])->setFinder($finder);

Теперь код будет форматироваться автоматически при сохранении.

Шаг 8: Git-интеграция

VS Code имеет встроенный Git. Но GitLens делает его лучше.

После установки GitLens вы увидите:

  • Кто и когда изменил каждую строку (inline blame)
  • Историю изменений файла
  • Сравнение версий
  • Визуализацию веток

Это критично для командной работы. Вы сразу видите, кто написал проблемный код.

Шаг 9: Терминал и задачи

VS Code имеет встроенный терминал (Ctrl+`). Настройте его:

{
    "terminal.integrated.defaultProfile.linux": "bash",
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "'JetBrains Mono', monospace"
}

Tasks для WordPress

Создайте файл .vscode/tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Composer Install",
            "type": "shell",
            "command": "composer install",
            "group": "build",
            "problemMatcher": []
        },
        {
            "label": "NPM Install",
            "type": "shell",
            "command": "npm install",
            "group": "build",
            "problemMatcher": []
        },
        {
            "label": "Build Assets",
            "type": "shell",
            "command": "npm run build",
            "group": "build",
            "problemMatcher": []
        },
        {
            "label": "Clear Cache",
            "type": "shell",
            "command": "wp cache flush",
            "group": {
                "kind": "build",
                "isDefault": false
            },
            "problemMatcher": []
        },
        {
            "label": "Deploy to Staging",
            "type": "shell",
            "command": "rsync -avz --exclude='.git' --exclude='node_modules' ./ user@staging:/var/www/html/",
            "group": "deploy",
            "problemMatcher": []
        }
    ]
}

Теперь вы можете запускать задачи через Ctrl+Shift+P → Tasks: Run Task.

Шаг 10: Полезные советы

Мульти-курсоры

Зажмите Alt и кликайте в разных местах — получите несколько курсоров. Или Ctrl+D для выделения следующего совпадения.

Command Palette

Ctrl+Shift+P — палитра команд. Отсюда можно сделать всё. Запомните:

  • Format Document — форматировать код
  • Change Language Mode — сменить язык подсветки
  • Preferences: Open Settings (JSON) — открыть настройки

Emmet

Emmet работает не только в HTML. В PHP тоже:

// Напишите:
div.container>ul>li*5

// Нажмите Tab:
<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Bookmarks

Установите расширение Bookmarks. Позволяет ставить закладки в коде и быстро перемещаться между ними.

Чек-лист: Настройка VS Code для WordPress

  • ✅ VS Code установлен
  • ✅ Настроен шрифт (JetBrains Mono или Fira Code)
  • ✅ Установлен PHP Intelephense
  • ✅ Установлен WordPress Snippets
  • ✅ Установлен PHP Debug
  • ✅ Установлен Prettier или PHP CS Fixer
  • ✅ Настроен workspace (.vscode/settings.json)
  • ✅ Установлен и настроен Xdebug
  • ✅ Создан launch.json для отладки
  • ✅ Установлены Docker расширения (если используете Docker)
  • ✅ Созданы кастомные сниппеты
  • ✅ Установлен PHP CodeSniffer с WordPress Coding Standards
  • ✅ Установлен GitLens
  • ✅ Настроен терминал
  • ✅ Созданы tasks для частых операций

Итог

VS Code — это не просто редактор кода. С правильными расширениями и настройками это полноценная IDE для WordPress-разработки. Автодополнение, отладка с Xdebug, интеграция с Docker, автоматическое форматирование — всё это экономит часы времени.

Настройка занимает 1-2 часа. Но вы сэкономите сотни часов в будущем. Потому что хороший инструмент — это не роскошь. Это необходимость.

Откройте VS Code прямо сейчас. Установите Intelephense. Настройте Xdebug. И посмотрите, как изменится ваша разработка.

Вы удивитесь, как раньше жили без этого.

Теги:
VS Code WordPress