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.

Extensions

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.

Theme

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.

Settings

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,
"workbench.editor.decorations.colors":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",
"workbench.statusBar.feedback.visible": 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": [
	"*/.circleci/*",
	"*/vendor/*",
	"*/vendors/*"
],
"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"
}