Installing PHPCS, ESLint, Sass Lint

All TCU websites should follow WordPress Coding Standards. All developers are required to use the following apps: PHPCS, ESLint, and Sass Lint.

Our office uses Visual Studio Code because it’s amazing! We highly recommend it. We will be providing links to extensions for VSCode.

Prerequisites

Instructions

Install PHPCS

If you are using composer, you can install PHP_CodeSniffer system-wide with the following command in your Terminal:

composer global require "squizlabs/php_codesniffer=*"

Follow the instructions that work best for your development environment.

Paste the following command into your Terminal and press enter to verify if PHPCS is installed correctly:

which phpcs

Install WordPress Code Standards for PHPCS

  1. In your Terminal, change directory to your User folder:
    cd ~
  2. Create a folder name “Utilities”:
    mkdir Utilities
  3. Change directory into the Utilities folder:
    cd Utilities
  4. Clone the WordPress Code Standards
    git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs

Configure PHPCS to use the WordPress Code Standards

Now that you’ve cloned the WordPress Code Standards, you’ll need to tell PHPCS to use them by default.

  1. Paste the following command into your Terminal and press enter. IMPORTANT: Change the path to wpcs to match your own.

    phpcs --config-set installed_paths /Users/Greg/Utilities/wpcs
  2. Paste the following command into your Terminal to verify WordPress Code Standards were correctly configured:

    phpcs -i
  3. You should see something like this:
    The installed coding standards are MySource, PEAR, PHPCS, PSR1, PSR2, Squiz, Zend, WordPress, WordPress-Core, WordPress-Docs, WordPress-Extra and WordPress-VIP

Download TCU’s custom PHPCS, ESLint, Sass-Lint ruleset

  1. Clone tcu_custom_ruleset repository
    cd ~/Desktop
    git clone -b master git@bitbucket.org:TCUWebmanage/tcu_custom_ruleset.git
  2. Copy files into your theme/plugin
    cd ~/Desktop/tcu_custom_ruleset
    cp .editorconfig .eslintrc.js .sass-lint.yml phpcs.xml /path/to/theme
  3. Configure the phpcs.xml custom properties. They are located at the bottom of file.

Install ESLint, Sass Lint and the WordPress baseline config

  1. Execute this NPM command in your terminal
    npm install -g eslint sass-lint eslint-config-wordpress
  2. Now, add both ESLint and Sass Lint to your $PATH so they can run from the Terminal
    PATH=${PATH}:/usr/local/bin/eslint
    PATH=${PATH}:/usr/local/bin/sass-lint
  3. Close and reopen your Terminal so it can refresh the $PATH
    which eslint sass-lint

Set up code editors to automatically lint (while you write)

As mentioned earlier, we use Visual Studio Code in our office so we recommend adding the extensions in the list below. You can easily find extensions for different code editors. You will need search for them.

Great Tutorial to set up different code editors at the bottom of this article