Я люблю, коли редактор не заважає думати, а допомагає писати чистий і швидкий код. Тому ділюся своїм практичним налаштуванням Visual Studio Code для PHP та JavaScript — від обов'язкових розширень до дебагу й автоматичного форматування. Ця збірка підходить як для нових проектів, так і для існуючих репозиторіїв у веб-розробці. 🚀

Що встановити перед стартом

Перш ніж братися за налаштування VS Code, переконайся, що в системі є базові інструменти:

  • Node.js і npm — для фронт-скриптів, ESLint/Prettier та dev-сценаріїв.
  • PHP 8.x і Composer — основа для бекенду на PHP та менеджер залежностей.
  • Git — контроль версій та інтеграція з VS Code.

На Linux встановлення виглядає приблизно так:

# Debian/Ubuntu
sudo apt update && sudo apt install -y nodejs npm php php-cli php-xml php-mbstring composer git

# Arch/Manjaro
sudo pacman -Syu --noconfirm nodejs npm php php-xml php-mbstring composer git

Для дебагу PHP знадобиться Xdebug. Зазвичай:

# Якщо доступний pecl
sudo pecl install xdebug

На Windows бери офіційні інсталятори (Node.js, PHP) або використовуй пакетні менеджери (Scoop/Chocolatey). Для Xdebug підбери DLL на сайті проєкту й пропиши його в php.ini.

Обов'язкові розширення VS Code для PHP і JavaScript

VS Code — легка, але дуже гнучка IDE для програмування. Ось набір, який у мене стоїть майже завжди:

  • PHP Intelephense — швидкий інтелектуальний автокомпліт, індексація проєкту, підказки типів, навігація по символах.
  • PHP IntelliSense — класичний автокомпліт для PHP; зараз частіше обирають Intelephense, але іноді IntelliSense теж доречний.
  • PHP Debug — інтеграція з Xdebug для зупинок на брейкпойнтах, перегляду змінних і крокування.
  • Prettier - Code formatter — форматування JavaScript/TypeScript/JSON/Markdown. Можна зробити дефолтним форматтером.
  • ESLint — статичний аналізатор JS/TS. Разом із Prettier — ідеальна пара.
  • Auto Close Tag — автоматично закриває HTML/XML теги.
  • Auto Rename Tag — перейменовує парний тег синхронно.
  • Path Intellisense — автодоповнення шляхів до файлів.
  • Live Server — миттєвий перегляд верстки з автооновленням.
  • Thunder Client або REST Client — тестування HTTP-запитів прямо в редакторі (зручно для API у бекенді на PHP).
  • GitLens — історія змін, blame, порівняння комітів.
  • EditorConfig for VS Code — уніфікація форматування між учасниками команди.

Порада: прибери зайві дублікати форматтерів (наприклад, одночасно Prettier і кілька PHP-форматтерів) — так уникнеш конфліктів при збереженні.

Корисні налаштування у settings.json

Створи або відредагуй .vscode/settings.json у корені проєкту. Базовий варіант, який у мене працює стабільно:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "all",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "php.validate.enable": false,
  "intelephense.environment.phpVersion": "8.2",
  "intelephense.telemetry.enabled": false,
  "intelephense.format.braces": "psr12",
  "emmet.includeLanguages": {
    "php": "html"
  },
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}

Це дає стабільне форматування на збереження, автоматичне виправлення ESLint та коректну роботу з PHP-кодом у шаблонах.

PHP: Xdebug і запуск із VS Code

Налаштуй Xdebug у php.ini

Додай (або увімкни) наступні рядки:

zend_extension = xdebug
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = 1
xdebug.client_port = 9003

Потім згенеруй .vscode/launch.json для прослуховування дебаг-з'єднань:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "xdebugSettings": {
        "max_children": 256,
        "max_data": 1024
      }
    }
  ]
}

Запускаєш локальний сервер (наприклад, вбудований PHP або nginx/apache з vhost), ставиш брейкпойнт, вибираєш конфіг Listen for Xdebug — і поїхали. 🧰

Швидкий локальний сервер без веб-сервера

Для невеликого проєкту на чистому PHP можна швидко підняти вбудований сервер:

php -S localhost:8000 -t public

Тоді відкрий http://localhost:8000 і дебаж код через Xdebug.

JavaScript: ESLint + Prettier без конфліктів

Встанови залежності як dev-пакети:

npm i -D eslint prettier eslint-config-prettier eslint-plugin-import

Ініціалізуй ESLint:

npx eslint --init

Приклад .eslintrc.json (мінімалістично й сумісно з Prettier):

{
  "env": { "browser": true, "es2021": true, "node": true },
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "prettier"
  ],
  "plugins": ["import"],
  "rules": {
    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    "import/order": [
      "warn",
      { "alphabetize": { "order": "asc" }, "newlines-between": "always" }
    ]
  }
}

Скрипти в package.json для швидкої перевірки стилю та форматування:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier -w ."
  }
}

У такій зв'язці Prettier відповідає за формат, ESLint — за якість та анти-патерни. Конфліктів не буде, бо eslint-config-prettier вимикає суперечливі правила.

Прийоми, що економлять час

  • Snippets: створи свої уривки в File → Preferences → User Snippets для повторюваного PHP або JavaScript коду (наприклад, заглушки для контролерів чи fetch-запитів).
  • Multi-root Workspace: якщо фронтенд і бекенд у різних репозиторіях — об'єднай їх в один workspace, щоб шарити налаштування .vscode і швидко перемикатися.
  • Tasks: налаштуй tasks.json для запуску Composer- або npm-команд із панелі Run.
  • EditorConfig: додай .editorconfig, щоб пробіли, ширина рядка та переводи рядків були однакові у всієї команди.
  • GitLens: коли сумніваєшся, чому частина логіки написана саме так — подивись blame та історію змін прямо в редакторі.

Часті помилки та як їх уникати

  • Подвійне форматування: якщо одночасно працюють Prettier і інший форматтер для PHP/JS — вимкни один у settings.json або налаштуй [php]/[javascript] секції для різних форматтерів.
  • Xdebug не підключається: перевір xdebug.client_port = 9003 і щоб VS Code слухав той самий порт. Переконайся, що xdebug.mode містить debug.
  • ESLint не працює на збереження: додай "source.fixAll.eslint": true у editor.codeActionsOnSave, а також переконайся, що ESLint увімкнутий для відповідних мов у eslint.validate.
  • Повільний автокомпліт у великих проєктах: для PHP Intelephense вимкни телеметрію, налаштуй індексацію та додай папки до files.watcherExclude.

Підсумок

З цим набором розширень і налаштувань VS Code стає справді зручним інструментом для роботи з PHP та JavaScript: чисте форматування, стабільний ESLint, дебаг Xdebug, швидкі snippets і задачі. Підлаштуй дрібниці під свої команди та проєкти — і отримаєш легку, але потужну базу для щоденної роботи у веб-розробці.