Setup VS Code (JS, PHP & WordPress)

VSCode is the most popular code editor but it is not like other IDEs where everything is pre-setup so in this post we will show you to how to setup VS Code for development in different languages. For now we are covering only JS, PHP and WordPress but in future we will extend this guide with more setups.

Note: This guide is specifically written for MacOS users but it is easy to translate commands for other operating systems so feel free to follow this if you are on any other OS

Prerequisites:

Verify installation of brew via brew --version and if not available then install it from brew website.

Table of Contents:

JavaScript Development
PHP Development
Recommended Extensions
Conclusion

1. JavaScript Development

1.1. Install nodejs

Verify node availability via node --version and install it via brew install node if not available
node --version and npm --version to confirm successful installation

1.2. Install nvm

Install nvm by using install guide available on Github and verify the installation via nvm --version

Since nvm is used to manage different versions of node so here are commonly used commands

nvm list to list all the available node versions

nvm install 16 to install particular version of node which in this case is latest version available of v16. If required we can also mention minor and bug fix version

nvm use 16 to use the specific version of node

nvm alias default 16 to use the specific version of node as default

If you want to use some old version of Node which is not supported by Apple Silicon then you have to install it under Rosetta and the steps of that are as follows

Get current architecture via arch

Changed the architecture via arch -x86_64 zsh and verify it again via arch. This will open another zsh instance inside the terminal and we will use exit to close this in the end

Install and verify nvm again
Install node version not supported via Apple Silicon e.g. nvm install 14

Note: This installed version will also be available on arm64 which means we only need to switch to i386 for installation and for normal use we can just use arm64. Use exit to close the i386 instance and start using the installed node version via nvm use 14

1.3. Auto Switch Node Versions

If the project have .nvmrc file available on root then we can use that to auto load node version while switching the directories or install the recommended version if not available.

open ~/.zprofile and paste following code in the file

# Autoload node from .nvmrc
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

Refresh the terminal via source ~/.zprofile
Navigate to the project and if the root have .nvmrc available and recommeded version is also available via nvm then it will be switched automatically

If there is no .nvmrc file the default node version will be used

If there is .nvmrc file but that version is not available via nvm then that will be installed and used automattically

1.4. Setup ESLint

Generally projects does have eslint dependency but for cases in which it’s not available we can install it globally via npm install -g eslint so that we can use this global version as default and have consistency in our project
For configuring ESLint projects does have .eslintrc file available on root of the project and eslint will use these configs for highlighting linting errors in the code

For setting up ESLint we are using publically available vip-cli repo but you can also use any other repo

Open the codebase in VS Code
Run npm install so that all local dependencies will be installed including eslint
Install ESLint extension

Now if there is any error in JS file or recommendation then it will start showing in the editor

As of now ESLint is only showing the errors in the editor so to configure this as a formatter also do following

Open VS Code User settings as JSON via CMD + SHIFT + P and add following config

"eslint.format.enable": true,

Now if you try to format the file then you will be presented with this popup so choose ESLint as formatter in this step

After that just format the document and it should fix all the errors that can be corrected automattically

1.5. Setup Flow Type Checker

If the codebase is using Flow as type checker then while declaring types editor will show the error as follow

To support these flow types we should configure the flow as type checker in the codebase and that can be done as follows

Install Flow Language Support extension

Add the following config in Workspace Settings of VS Code which will completely disable the built-in TypeScript extension for your project

"javascript.validate.enable": false

Now open the same file as above and now the typing should not show any errors related to support

If there are any errors related to typing mismatch then those should be visible in the editor

flow error — Example error of typing mismatch in flow

2. PHP Development

2.1. Install PHP

Verify php availability via php --version

Install PHP via brew install php if not available
Verify installation via php --version

2.2. Switch PHP Versions

If we need to install some older version of PHP then we can install it via brew e.g. following we are installing php version 7.4

brew install php@7.4

For switching PHP versions we do have tools like nvm but I found most of them are not up-to-date so here we will only use the brew to switch between different php versions. If there is a standard here like node to keep versions in some specific file .nvmrc file in node case then we can also auto switch the versions but for now its manual

open ~/.zprofile and add following function in the file

pvm() {
  brew unlink php && brew link --force --overwrite php@$1
}

Refresh terminal via source ~/.zprofile
Change php version

Verify that the version is changed

2.3. Setup PHP Code Sniffer and Beautifier

For setting up and verifying phpcs and phpcbf we first need a codebase and for this case lets take mu-plugins codebase as example (note that you can take any other codebase for setting this up)

Open php codebase in VS Code. If phpcs and phpcbf is already setup as composer dependency then we can install it via composer and then start using it else we need to setup manually (for this guide we are considering that phpcs is already available as dependency via composer and skipping the manual integration)
Verify composer availability via composer --version.

Install composer if not available via brew install composer
Install project dependencies composer install
Verify phpcs via vendor/bin/phpcs --version

Verify phpcbf via vendor/bin/phpcbf --version

To see all available coding standards we can run ./vendor/bin/phpcs -i

Install PHP_CodeSniffer extension

Add following configs in VSCode settings. Here in "phpCodeSniffer.standardCustom" we can use any available standard but since this codebase is from WordPress VIP so we are using WordPress and WordPress-VIP-Go as coding standards

"phpCodeSniffer.autoExecutable": true,
"phpCodeSniffer.standard": "Custom",
"phpCodeSniffer.standardCustom": "WordPress,WordPress-VIP-Go",

phpcs related errors should now appear in the editor

Install phpcbf extension

User following configuration to setup phpcbf extension

"phpcbf.executablePath": "./vendor/bin/phpcbf",
"phpcbf.standard": "WordPress,WordPress-VIP-Go",

To use phpcbf as default formatter add following in the settings file. This will fix all the fixable errors while formatting the code

"[php]": {
    "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
},

2.4. Setup Xdebug

Run php -v and verify if Xdebug is installed else we will install it if not present

In above screenshot since Xdebug info is not present so let’s install it via pecl install xdebug and verify again via php -v

Add following xdebug configs in php.ini file (If path of php.ini isn’t known then use php --ini to find the location of config file)

zend_extension="xdebug.so"

[xdebug]
xdebug.idekey=ECLIPSE
xdebug.client_port=9003
xdebug.mode=debug
xdebug.start_with_request=trigger

Restart php services to load the latest configs

brew services restart php

Verify that xdebug is configured correctly

php --info | grep xdebug

If above command shows xdebug configs like following then it means all is good otherwise we have to troubleshoot the issue.

Install PHP Debug extension in VSCode

Install Xdebug Helper extension for your browser (in my case it’s Firefox)

Now let’s configure VSCode to use Xdebug as a debugger for PHP files.

Open any PHP project. In my case its a simple PHP file whichs shows the configs.

From VSCode sidebar select Run and Debug menu item and click on create a launch.json file

By default launch.json file will have some content but for now to keep things simple lets replace the content with following configs:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
        }
    ]
}

Open project in the browser and enable Debug mode from Xdebug extension

Return to VSCode and start the debugger via F5 or by clicking Listen for Xdebug from Debug menu.

Now add breakpoint on VSCode to see what is inside $info variable (it will show the red dot on the line)

Reload the webpage and now debugger will should on breakpoint so that we can debug the code

3. Recommended Extensions

Log Wrapper to write fast customised log messages in any language. For configuring read details in extensions page

Error Lens which improve highlighting of errors, warnings and other language diagnostics by making them more prominent.

Git Lens. Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more. Read extension page for more info about the features and how to use them
PHP Intelephense. PHP code intelligence for Visual Studio Code
npm Intellisense that autocompletes npm modules in import statements

Import Cost. Display import/require package size in the editor
YAML provides comprehensive YAML support with built-in Kubernetes syntax support
Rainbow CSV. Highlight CSV and TSV files

4. Conclusion

After following this guide your VSCode should give you more of an IDE like feeling and should be more easy and fun to work with. During setup if you face any difficulty in setting up extension configs then you can take the help from user and workspace settings gist available on Github.

In future this guide will be updated with support for more languages and recommended extensions so feel free to visit it from time to time to get the latest info.