Improving through automation

@grapplerulrich

slides.com/ulrichpogson/automated-improvement

Peer Review

Has your code been reviewed before?

Have you reviewed code before?

Reviewing large changes is difficult!

Problem:

Smaller pull requests

Solution:

Partial

Things to check in a review

Best Practice

Code Style

Code Compatibility

Documentation

Code Quality

Alternative?

Automation

Workflow

GitHub

Command Line

$ phpcs inc/template-functions.php

FILE: .../themes/_s/inc/template-functions.php
------------------------------------------------------------------------------------------
FOUND 4 ERRORS AFFECTING 3 LINES
------------------------------------------------------------------------------------------
  5 | ERROR | [ ] Missing @package tag in file comment
    |       |     (Squiz.Commenting.FileComment.MissingPackageTag)
  5 | ERROR | [x] Additional blank lines found at end of doc comment
    |       |     (Generic.Commenting.DocComment.SpacingAfter)
 17 | ERROR | [ ] PHP syntax error: syntax error, unexpected '}'
    |       |     (Generic.PHP.Syntax.PHPSyntax)
 28 | ERROR | [ ] Expected next thing to be an escaping function (see Codex for 'Data
    |       |     Validation'), not 'get_bloginfo'
    |       |     (WordPress.XSS.EscapeOutput.OutputNotEscaped)
------------------------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY
------------------------------------------------------------------------------------------
Time: 195ms; Memory: 10Mb

Editor

Benefits

Scalability

Consistency

Team Moral

Challenges

False positives

Only parses code, does not understand it

stylelint

$ stylelint style.css

style.css
 107:15   ⚠  Expected numeric font-weight notation font-weight-notation
 169:26   ⚠  Unexpected duplicate name monospace   font-family-no-duplicate-names
 509:9    ⚠  Unexpected named color "royalblue"    color-named
$ stylelint '**/*.scss' --syntax scss 
--config node_modules/stylelint-config-wordpress/scss.js

sass/elements/_elements.scss
 7:11 ✖ Expected empty line before comment        comment-empty-line-before
15:11 ✖ Expected newline after ","                selector-list-comma-newline-after
42:17 ✖ Unexpected missing end-of-source newline  no-missing-end-of-source-newline
$ stylelint '**/*.scss' --syntax less
{
  "name": "_s",
  "version": "1.0.0",
  "scripts": {
    "css-lint": "stylelint style.css"
  },
  "devDependencies": {
    "stylelint": "^8.1.1",
    "stylelint-config-wordpress": "^12.0.0"
  },
  "stylelint": {
    "defaultSeverity": "warning",
    "extends": [
      "stylelint-config-wordpress"
    ]
  }
}

package.json

ESLint

$ eslint js/**

js/skip-link-focus-fix.js
   9:11  error  Unexpected space before function parentheses  space-before-function-paren
  13:50  error  Unexpected space before function parentheses  space-before-function-paren
{
  "name": "_s",
  "version": "1.0.0",
  "scripts": {
    "js-lint": "eslint js/**",
  },
  "devDependencies": {
    "eslint": "^4.3.0",
    "eslint-config-wordpress": "^2.0.0"
  },
  "eslintConfig": {
    "extends": [
      "wordpress"
    ]
  },
  "eslintIgnore": [
    "js/**.min.js"
  ]
}

package.json

PHPCS

$ phpcs inc/template-functions.php

FILE: .../themes/_s/inc/template-functions.php
------------------------------------------------------------------------------------------
FOUND 4 ERRORS AFFECTING 3 LINES
------------------------------------------------------------------------------------------
  5 | ERROR | [ ] Missing @package tag in file comment
    |       |     (Squiz.Commenting.FileComment.MissingPackageTag)
  5 | ERROR | [x] Additional blank lines found at end of doc comment
    |       |     (Generic.Commenting.DocComment.SpacingAfter)
 17 | ERROR | [ ] PHP syntax error: syntax error, unexpected '}'
    |       |     (Generic.PHP.Syntax.PHPSyntax)
 28 | ERROR | [ ] Expected next thing to be an escaping function (see Codex for 'Data
    |       |     Validation'), not 'get_bloginfo'
    |       |     (WordPress.XSS.EscapeOutput.OutputNotEscaped)
------------------------------------------------------------------------------------------
PHPCBF CAN FIX THE 1 MARKED SNIFF VIOLATIONS AUTOMATICALLY
------------------------------------------------------------------------------------------
Time: 195ms; Memory: 10Mb
<?xml version="1.0"?>
<ruleset name="WordPress Theme Coding Standards">
	<description>A custom set of code standard rules.</description>

	<rule ref="WordPress.WP.I18n">
		<properties>
			<property name="text_domain" type="array" value="_s" />
		</properties>
	</rule>

	<rule ref="WordPress.WP.DeprecatedFunctions">
		<properties>
			<property name="minimum_supported_version" value="4.0" />
		</properties>
	</rule>

	<!-- Include sniffs for PHP cross-version compatibility. -->
	<config name="testVersion" value="5.2-99.0"/>
	<rule ref="PHPCompatibility"/>
</ruleset>

phpcs.xml.dist

Autofixing

$ stylelint style.css --fix

$ stylefmt style.css
$ eslint js/** --fix
$ phpcs --report=diff /path/to/code

$ phpcbf /path/to/code

.travis.yml

# Use this to prepare your build for testing.
before_script:
    - if [[ "$SNIFF" == "1" ]]; then composer require -g squizlabs/php_codesniffer; fi
    - if [[ "$SNIFF" == "1" ]]; then composer require -g wp-coding-standards/wpcs; fi
    - if [[ "$SNIFF" == "1" ]]; then composer require -g wimg/php-compatibility; fi
    - if [[ "$SNIFF" == "1" ]]; then npm install -g eslint; fi
    - if [[ "$SNIFF" == "1" ]]; then npm install -g stylelint; fi

# All commands must exit with code 0 on success. Anything else is considered failure.
script:
    # Search for PHP syntax errors.
    - find -L . -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l
    - if [[ "$SNIFF" == "1" ]]; then eslint js/**; fi
    - if [[ "$SNIFF" == "1" ]]; then stylelint style.css; fi
    - if [[ "$SNIFF" == "1" ]]; then phpcs; fi

Projects

speakerdeck.com/jrf

Juliette

Reinders Folmer

Stephen

Edgar

Ulrich Pogson

@grapplerulrich

Made with Slides.com