WordPress Visual Studio Code Development Environment

Configures Visual Studio Code for WordPress development.

Includes

• WordPress Coding Standards
• Stylelint for CSS
• ESLint for JS
• Webpack for building frontend

Prerequisites

• Docker
• PHP (To use composer on the host machine)
• Composer
• NodeJS (To compile assets on host machine)

Usage

1. Create repo from this template
2. Run

composer install

to add WordPress stubs

1. Install all suggested extensions

2. Run

docker-compose up

1. plugins and themes directories will be created within you project folder.
2. Add your plugin files and remove all unnesessary plugins and themes from these folders.
3. Set the PLUGIN_NAME environment variable if you are developing plugin
4. Set the THEME_NAME environment variable if you are developing theme
5. Set plugin or theme prefix in phpcs.xml.dist

<property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN, %%you plugin or theme prefix%%" />

1. Now you can place all your assets to the src folder and webpack will build them into one main.js file and place it in your plugin and/or theme assets folder
2. To run webpack use

npm run watch

or

npm run build

Настройки для разработки WordPress для Visual Studio Code

Настраивает проект для разработки .

Содержит

• WordPress Coding Standards
• Stylelint для CSS
• ESLint для JS
• Webpack для сборки фронтенда

Необходимое ПО

• Docker
• PHP (To use composer on the host machine)
• Composer
• NodeJS (To compile assets on host machine)

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

1. Создайте репозиторий из этого шаблона
2. Запустите

composer install

чтобы установить пакеты со стандартами кодирования для Вордпресса и заглушки для автокомплита

1. Установите в Visual Studio Code все предлагаемые расширения

2. Запустите проект

docker-compose up

1. Папки plugins и themes будут созданы в корне проекта.
2. Добавьте в папку plugins код своего плагина, если разрабатываете плагин.
3. Добавьте в папку themes код своей темы, если разрабатываете тему.
4. Установите переменную окружения PLUGIN_NAME в значение названия папки с плагином, если вы разрабатываете плагин.
5. Установите переменную окружения THEME_NAME в значение названия папки с темой, если вы разрабатываете тему.
6. Установит перфикс плагина или темы в phpcs.xml.dist

<property name="prefixes" type="array" value="CHILD_THEME, CHILD_TEXT_DOMAIN, %%you plugin or theme prefix%%" />

1. Положите весь фронтенд в папку src, чтобы Webpack собрирал и складывал его в папку assets вашего плагина или темы
2. Запустите Вебпак для разработки

npm run watch

или для финальной сборки

npm run build