Chandra Patel

Just Another Developer

Visual Studio Code Editor for WordPress Development

I’m using Visual Studio Code editor for WordPress Development. Following are the list of extensions and theme I have installed.


WordPress Snippets – The ultimate WordPress snippet collection for Visual Studio Code.

WordPress Hooks IntelliSense – IntelliSense and autocompletion for WordPress hooks, actions, and filters.

WooCommerce – Snippets & autocomplete – A collection of WooCommerce snippets and autocompletion.

PHP Intelephense – High performance, feature rich PHP intellisense

phpcs – PHP CodeSniffer for Visual Studio Code

phpcbf – PHP Code Beautifier and Fixer

PHP DocBlocker – A simple, dependency free PHP specific DocBlocking package

PHP Debug – Debug support for PHP with Xdebug

GitLens — Git supercharged – Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

Git History – View git log, file history, compare branches or commits

GitHub Pull Requests and Issues – Pull Request Provider for GitHub

WPCS Whitelist Flags – Add WordPress Coding Standards whitelist flags to your code.

Prettify Selected JSON – VS Code Extension to prettify selected JSON blocks

XML Tools – XML Formatting, XQuery, and XPath Tools for Visual Studio Code

Rainbow CSV – highlight csv and tsv files in different colors

Excel Viewer – View Excel spreadsheets and CSV files within Visual Studio Code workspaces.

Code Runner – Run code snippet or code file for multiple languages

Debugger for Chrome – Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

Debugger for Firefox – Debug your web application or browser extension in Firefox.

Debugger for Microsoft Edge – Debug your JavaScript code in the Microsoft Edge browser.

Remote – SSH – Open any folder on a remote machine using SSH and take advantage of VS Code’s full feature set.

Remote – Containers – Open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set.

Remote Repositories – Remotely browse and edit a GitHub repository.

Settings Sync – Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.


Shades of Purple – ⚡ A professional theme with hand-picked & bold shades of purple 💜 to go along with your VS Code. A custom VS Code theme with style.


Following are the settings I’ve set. Some settings for the Shades of Purple theme and extensions I’ve installed. I’m using Fira Code font.

Refer User and Workspace Settings document page to learn more.

"workbench.statusBar.visible": true,
"workbench.sideBar.location": "right",
"workbench.editor.tabSizing": "fit",
"workbench.editor.decorations.badges": true,

"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"breadcrumbs.enabled": true,
"window.zoomLevel": 0,
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"diffEditor.ignoreTrimWhitespace": false,
"window.restoreFullscreen": true,

"workbench.colorTheme": "Shades of Purple",
"workbench.sideBar.location": "left",
"workbench.settings.editor": "json",
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.enablePreview": false,
"workbench.fontAliasing": "auto",
"": false,
"workbench.editor.tabCloseButton": "off",
"workbench.panel.defaultLocation": "right",

"php.suggest.basic": false,
"[php]": {
	"editor.formatOnSave": false,
	"editor.formatOnPaste": false,
	"editor.defaultFormatter": "persoderlind.vscode-phpcbf"
"phpcs.enable": true,
"phpcs.standard": "WordPress",
"phpcs.ignorePatterns": [
"phpcbf.enable": true,
"phpcbf.standard": "WordPress",
"php-docblocker.useShortNames": true,

"editor.fontSize": 14,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"editor.minimap.enabled": false,
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.lineHeight": 24.65,
"editor.letterSpacing": 0.5,
"editor.fontWeight": "300",
"editor.fontLigatures": true,
"editor.cursorStyle": "line",
"editor.cursorBlinking": "solid",
"editor.renderWhitespace": "all",
"editor.snippetSuggestions": "top",
"editor.glyphMargin": true,
"editor.quickSuggestionsDelay": 0,

"terminal.integrated.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"terminal.integrated.fontSize": 14,
"terminal.integrated.fontWeight": "300",
"terminal.integrated.fontWeightBold": "normal",
"terminal.integrated.macOptionIsMeta": true,
"terminal.integrated.drawBoldTextInBrightColors": false,

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
	"javascript": "javascriptreact"

2 responses to “Visual Studio Code Editor for WordPress Development”

  1. Madalin Avatar


    How do you handle formatting? I really want to switch from PhpStorm, but VScode is not formatting my code right. Do you have any solutions?

    Thank you.

    1. Chandra Patel Avatar
      Chandra Patel


      I’m using phpcbf – PHP Code Beautifier and Fixer VSCode extension for formatting PHP code.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: