I use Visual Studio Code editor for WordPress Development. I have installed the following extensions and theme.
Extensions
Beautify – Beautify JavaScript, JSON, CSS, Sass, and HTML in Visual Studio Code.
Code Runner – Run code snippet or code file for multiple languages.
CSS Flexbox Cheatsheet – VS Code extension that lets you open a flexbox cheat sheet directly in the editor.
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.
ESLint – Integrates ESLint JavaScript into VS Code.
eslint-disable-snippets – Simple snippets for disable ESLint rules.
Excel Viewer – View Excel spreadsheets and CSV files within Visual Studio Code workspaces.
File Utils – A convenient way of creating, duplicating, moving, renaming, and deleting files and directories.
GistPad – Manage your code snippets and developer notes using GitHub Gists and repositories.
GitHub Pull Requests and Issues – Pull Request Provider for GitHub
GitHub Repositories – Remotely browse and edit any GitHub repository.
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
Import Cost – Display import/require package size in the editor.
IntelliSense for CSS class names in HTML – CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
JavaScript (ES6) code snippets – Code snippets for JavaScript in ES6 syntax.
Markdown All in One – All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more).
Markdown Checkboxes – Adds checkbox support to the built-in markdown preview.
markdownlint – Markdown linting and style checking for Visual Studio Code.
Markdown Preview GitHub Styling – Changes VS Code’s built-in markdown preview to match Github’s style.
Markdown Table Formatter – Format markdown tables. Note: the repository is not maintained.
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.
Prettier – Code formatter – Code formatter using prettier.
Psalm (PHP Static Analysis Linting Machine) – VS Code Plugin for Psalm.
Prettify Selected JSON – VS Code Extension to prettify selected JSON blocks
Rainbow CSV – highlight csv and tsv files in different colors
React Native Tools – Debugging and integrated commands for React Native.
Regexp Explain – explain regex in VSCode.
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.
Search WordPress Docs – Search selected text in the WordPress Code Reference without leaving VSCode.
vscode-icons – Icons for Visual Studio Code.
WordPress block markup – WordPress block markup autocompletes snippets for full site editing.
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.
XML Tools – XML Formatting, XQuery, and XPath Tools for Visual Studio Code.
PHP Unserialize Extension for VSCode
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.
GitHub Theme – GitHub theme for VS Code.
Settings
These are the settings I’ve set 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.editor.tabSizing": "fit",
"workbench.editor.wrapTabs": true,
"workbench.editor.decorations.badges": true,
"workbench.editor.decorations.colors": true,
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"telemetry.telemetryLevel": "off",
"intelephense.telemetry.enabled": false,
"breadcrumbs.enabled": true,
"explorer.confirmDragAndDrop": false,
"explorer.confirmDelete": false,
"explorer.openEditors.visible": 0,
"diffEditor.ignoreTrimWhitespace": false,
"window.restoreFullscreen": true,
"gulp.autoDetect": "off",
"grunt.autoDetect": "off",
"workbench.colorTheme": "Shades of Purple",
"workbench.settings.editor": "json",
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.enablePreview": false,
"workbench.fontAliasing": "auto",
"workbench.editor.tabCloseButton": "off",
"editor.fontSize": 12,
"editor.fontWeight": "300",
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.lineHeight": 24,
"editor.letterSpacing": 0.5,
"editor.fontLigatures": true,
"editor.cursorStyle": "line",
"editor.cursorBlinking": "solid",
"editor.renderWhitespace": "all",
"editor.snippetSuggestions": "top",
"editor.glyphMargin": true,
"editor.quickSuggestionsDelay": 0,
"editor.bracketPairColorization.enabled": true,
"terminal.integrated.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"terminal.integrated.fontSize": 12,
"terminal.integrated.fontWeight": "300",
"terminal.integrated.fontWeightBold": "normal",
"terminal.integrated.lineHeight": 1.5,
"terminal.integrated.macOptionIsMeta": true,
"terminal.integrated.drawBoldTextInBrightColors": false,
"php.suggest.basic": false,
"[php]": {
"editor.formatOnSave": false,
"editor.formatOnPaste": false,
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"phpcs.enable": false,
"phpcs.standard": "WordPress",
"phpcs.showSources": true,
"phpcs.ignorePatterns": [
"*/.circleci/*",
"*/vendor/*",
"*/vendors/*",
"*/wp-admin/*",
"*/wp-includes/*",
"*/mu-plugins/*"
],
"phpcbf.enable": true,
"phpcbf.standard": "WordPress",
"php-docblocker.useShortNames": true,
"gitlens.keymap": "alternate",
"gitlens.hovers.currentLine.over": "line",
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false
},
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"[markdown]": {
"editor.formatOnSave": false,
"editor.quickSuggestions": {
"comments": "on",
"strings": "on",
"other": "on"
},
"editor.defaultFormatter": "josa.markdown-table-formatter"
},
"files.defaultLanguage": "text",
"prettier.printWidth": 80,
"prettier.singleQuote": true,
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"[javascript]": {
"editor.formatOnSave": false,
"editor.formatOnPaste": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"terminal.explorerKind": "external",
"extensions.ignoreRecommendations": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.inlineSuggest.enabled": true,
"security.workspace.trust.untrustedFiles": "open",
"code-runner.enableAppInsights": false,
"editor.minimap.enabled": false,
"githubPullRequests.terminalLinksHandler": "github",
"githubPullRequests.pullBranch": "never",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue"
],
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"workbench.iconTheme": "vscode-icons"
}
Leave a Reply