Get DevWP - WordPress Development Theme
VS Code Setup for WordPress Theme Development
Set up VS Code for WordPress theme development with 6 essential extensions, WordPress-friendly settings.json defaults, and Git Bash as your Windows terminal.

VS Code Setup for WordPress Theme Development

4 min read

VS Code is the most popular code editor and for good reason — it’s lightweight, extensible, and works with nearly every language. With the right extensions and settings it handles WordPress PHP development just as well as a full IDE. I’ve tried Sublime Text, Atom, and PHPStorm — VS Code hits the sweet spot between speed and features without the overhead of a full IDE. Here’s how I set it up for DevWP WordPress Hybrid Theme development.

Using Git Bash as Default Terminal on Windows

PowerShell works, but Git Bash gives you the same Unix-style commands you’ll see in most tutorials and documentation. To set it as your default terminal in VS Code:

  1. Press Ctrl + Shift + P to open the Command Palette
  2. Type and select Terminal: Select Default Profile
  3. Choose Git Bash from the list

What about macOS?

macOS uses ZSH by default (older versions used Bash). VS Code auto-detects your shell, so no terminal setup is needed. If you haven’t installed Homebrew yet, check out my Git setup guide — Homebrew makes installing Git, Node.js, and other dev tools much easier.

Essential Extensions

These are the extensions I install on every project:

  • EditorConfig for VS Code — Keeps tab/space and line-ending settings consistent across editors. Especially useful since WordPress uses tabs while most JS tooling defaults to spaces.
  • PHP Debug by Xdebug — Step-through debugging for PHP with Xdebug. Set breakpoints in your theme files and inspect variables at runtime instead of scattering var_dump() everywhere.
  • PHP Intelephense — Autocomplete, go-to-definition, and parameter hints for PHP. Understands WordPress functions out of the box with the right stubs.
  • Prettier – Code Formatter — Auto-formats HTML, CSS, JS, and JSON on save. I disable it for PHP files since WPCS handles that.
  • XML Tools — Formatting and XPath tools for XML files like phpunit.xml and phpcs.xml.dist.
  • ESLint — Inline JavaScript linting with auto-fix support. Catches issues as you type instead of at build time.

Open your settings.json (Ctrl/Cmd + Shift + PPreferences: Open User Settings (JSON)) and add these WordPress-friendly defaults:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "editor.insertSpaces": false,
  "editor.wordWrap": "on",
  "emmet.includeLanguages": {
    "php": "html"
  },
  "files.associations": {
    "*.php": "php"
  },
  "[php]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  },
  "intelephense.stubs": [
    "apache", "bcmath", "bz2", "calendar", "com_dotnet",
    "Core", "ctype", "curl", "date", "dba", "dom", "enchant",
    "exif", "FFI", "fileinfo", "filter", "fpm", "ftp", "gd",
    "gettext", "gmp", "hash", "iconv", "imap", "intl", "json",
    "ldap", "libxml", "mbstring", "meta", "mysqli", "oci8",
    "odbc", "openssl", "pcntl", "pcre", "PDO", "pdo_ibm",
    "pdo_mysql", "pdo_pgsql", "pdo_sqlite", "pgsql", "Phar",
    "posix", "pspell", "readline", "Reflection", "regex",
    "session", "shmop", "SimpleXML", "snmp", "soap", "sockets",
    "sodium", "SPL", "sqlite3", "standard", "superglobals",
    "sysvmsg", "sysvsem", "sysvshm", "tidy", "tokenizer",
    "xml", "xmlreader", "xmlrpc", "xmlwriter", "xsl", "Zend OPcache",
    "zip", "zlib", "wordpress"
  ]
}

The key settings here: editor.insertSpaces: false enforces tabs (WordPress coding standard), emmet.includeLanguages enables HTML autocomplete inside PHP files, and disabling formatOnSave for PHP prevents Prettier from conflicting with WPCS. The Intelephense stubs list includes "wordpress" so you get autocomplete for all WordPress core functions.

VS Code FAQ

Should I use VS Code or PHPStorm for WordPress?

VS Code is free, fast, and handles WordPress development well with the extensions listed above. PHPStorm has deeper PHP refactoring and database tools built in, but costs $100+/year and uses more memory. I use both — VS Code for quick edits and front-end work, PHPStorm for heavy PHP refactoring sessions. Start with VS Code and upgrade if you hit its limits.

Do I need Intelephense free or premium?

The free version covers autocomplete, go-to-definition, and diagnostics — enough for most WordPress projects. Premium adds rename-symbol across files, code actions, and more advanced type inference. I ran the free version for two years before upgrading and never felt blocked by it.

How do I get WordPress function autocomplete working?

Add "wordpress" to your intelephense.stubs array in settings.json (included in the config above). Intelephense ships with WordPress stubs built in — no extra packages needed. If autocomplete still feels incomplete, install the php-stubs/wordpress-stubs Composer package in your project for the latest function signatures.

That covers my VS Code setup for WordPress theme development. Download VS Code from the official site if you haven’t already, and when you’re ready to add build tools to the mix, check out my guides on Git, Node.js, and Composer to round out the dev environment.



View Our Themes