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

• PHP (Upgrade PHP version)
• Composer (You can also use PEAR)
• Node and NPM
• Grunt

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 [html]$PATH[/html] 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.

• EditorConfig for VS Code
• Sass Lint
• ES Lint
• PHPCS