Categories
Editor WordPress

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 Toolbox – The ultimate WordPress snippet collection for Visual Studio Code.

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

PHP IntelliSense – Advanced Auto completion and Refactoring support for PHP

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 – 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.

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.

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.

"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"
}

2 replies on “Visual Studio Code Editor for WordPress Development”

Leave a Reply

Your email address will not be published. Required fields are marked *

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