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

[checklist] 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

[/checklist]

[checklist] Install WordPress Code Standards for PHPCS

In your Terminal, change directory to your User folder:
```
cd ~
```
Create a folder name “Utilities”:
```
mkdir Utilities
```
Change directory into the Utilities folder:
```
cd Utilities
```

Clone the WordPress Code Standards

git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs

[/checklist]

[checklist] 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.

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
```
Paste the following command into your Terminal to verify WordPress Code Standards were correctly configured:
```
phpcs -i
```

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

[/checklist]

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

Clone tcu_custom_ruleset repository

cd ~/Desktop
git clone -b master git@bitbucket.org:TCUWebmanage/tcu_custom_ruleset.git

Copy files into your theme/plugin

cd ~/Desktop/tcu_custom_ruleset
cp .editorconfig .eslintrc.js .sass-lint.yml phpcs.xml /path/to/theme

Configure the phpcs.xml custom properties. They are located at the bottom of file.

[/checklist]

[checklist] Install ESLint, Sass Lint and the WordPress baseline config

Execute this NPM command in your terminal

npm install -g eslint sass-lint eslint-config-wordpress

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
```
Close and reopen your Terminal so it can refresh the [html]$PATH[/html]
```
which eslint sass-lint
```

[/checklist]

[checklist] 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

Lint Code Like A Boss

[/checklist]