Why you should learn to love coding standards

“How many people have heard about, and even understand coding standards, but nonetheless ignore them? Until a few months ago, Luca was definitely one of these people! As project size and complexity scales, and you’re working with other developers, designers and stakeholders, coding standards become increasingly important and will make your life much easier.
In this talk, Luca will give you an overview of why it’s important to follow coding standards, and deliver some practical examples of how they can improve your developing skills. Luca will also share some tools and workflows to make the job easier.
At the end of the talk, attendees will be able to integrate these tools into their day-to-day workflow.”

Transcript

1. Why you should learn to love coding standards Luca Ricci | Full stack developer | @theskinnyghost | @pragmaticweb | WordCamp Manchester 2018 | #WCMCR
2. Table of contents • What are Coding Standards? • Why are they important? • WordPress Coding Standards • How to get started • Q&A
3. What are Coding Standards?
4. Coding standards are a set of guidelines that developers adhere to when writing source code for a project.
5. Code style Icons from https://iconmonstr.com
6. Code style Best Practices Icons from https://iconmonstr.com
7. Code style Best Practices Documentation Icons from https://iconmonstr.com
8. Code style Best Practices Documentation Compatibility Icons from https://iconmonstr.com
9. Code style Best Practices Documentation Compatibility File organizations Icons from https://iconmonstr.com
10. Code style Best Practices Documentation Compatibility File organizations Naming convention Icons from https://iconmonstr.com
11. Why are they important?
12. Why are they important? • Improve readability.
15. • Improve readability. • Improve maintainability. Why are they important?
16. • Improve readability. • Improve maintainability. • Save time (and money). Why are they important?
17. • Improve readability. • Improve maintainability. • Save time (and money). • Help team member integration. Why are they important?
18. • Improve readability. • Improve maintainability. • Save time (and money). • Help team member integration. • Security. Why are they important?
19. • Improve readability. • Improve maintainability. • Save time (and money). • Help team member integration. • Security. • Code quality. Why are they important?
20. “All code in any code-base should look like a single person typed it, no matter how many people contributed.” Principles of Writing Consistent, Idiomatic JavaScript https://github.com/rwaldron/idiomatic.js/
21. When should I use them?
22. ALWAYS!
24. What is TIDE? Tide is a service, consisting of an API, Audit Server, and Sync Server, working in tandem to run a series of automated tests against the WordPress.org plugin and theme directories. Through the Tide plugin, the results of these tests are delivered as an aggregated score in the WordPress admin that represents the overall code quality of the plugin or theme. https://make.wordpress.org/tide/ #tide on Slack See it in action
26. WordPress Coding Standards
27. PHP Coding Standards WordPress Coding Standards
28. WordPress Coding Standards PHP Coding Standards JS Coding Standards
29. WordPress Coding Standards PHP Coding Standards JS Coding Standards CSS Coding Standards
30. PHP Coding Standards JS Coding Standards CSS Coding Standards HTML Coding Standards WordPress Coding Standards
31. Accessibility Coding Standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-codi ng-standards/ Inline Documentation Standards https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/ Other Standards
32. PHP Coding Standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/
33. • Use tabs not spaces PHP Coding Standards
34. PHP Coding Standards • Use tabs not spaces • Use single and double quotes when appropriate.
36. PHP Coding Standards • Use tabs not spaces • Use single and double quotes when appropriate. • Use elseif, not else if
37. PHP Coding Standards • Use tabs not spaces • Use single and double quotes when appropriate. • Use elseif, not else if • Don’t use extract()
38. • Use tabs not spaces • Use single and double quotes when appropriate. • Use elseif, not else if • Don’t use extract() • No shorthand PHP tags PHP Coding Standards
40. • Use tabs not spaces • Use single and double quotes when appropriate. • Use elseif, not else if • Don’t use extract() • No shorthand PHP tags • Yoda conditions PHP Coding Standards
42. “Yoda conditions are dumb and solve the wrong problem. You have my permission to not use Yoda conditions.” Ryan McCue
43. JS Coding Standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/
44. • No whitespace at the end of line or on blank lines. JavaScript Coding Standards
45. • No whitespace at the end of line or on blank lines. • Use semicolons. Never rely on Automatic Semicolon Insertion JavaScript Coding Standards
46. • No whitespace at the end of line or on blank lines. • Use semicolons. Never rely on Automatic Semicolon Insertion • Strict equality checks (===) must be used in favor of abstract equality checks (==). JavaScript Coding Standards
47. • No whitespace at the end of line or on blank lines. • Use semicolons. Never rely on Automatic Semicolon Insertion • Strict equality checks (===) must be used in favor of abstract equality checks (==). • Chain Method Calls when they don’t fit in one line. JavaScript Coding Standards
48. CSS Coding Standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/
49. • Each selector should be on its own line, ending in either a comma or an opening curly brace. CSS Coding Standards
50. CORRECT INCORRECT
51. • Each selector should be on its own line, ending in either a comma or an opening curly brace. • Properties should be followed by a colon and a space. CSS Coding Standards
52. • Each selector should be on its own line, ending in either a comma or an opening curly brace. • Properties should be followed by a colon and a space. • Properties should be logically ordered. CSS Coding Standards
53. Properties should be logically ordered. Above all else, choose something that is meaningful to you and semantic in some way. Random ordering is chaos, not poetry. In WordPress Core, our choice is logical or grouped ordering, wherein properties are grouped by meaning and ordered specifically within those groups. The properties within groups are also strategically ordered to create transitions between sections, such as background directly before color. The baseline for ordering is: • Display • Positioning • Box model • Colors and Typography • Other
54. • Each selector should be on its own line, ending in either a comma or an opening curly brace. • Properties should be followed by a colon and a space. • Properties should be logically ordered. • Use double quotes rather than single quotes, and only when needed. CSS Coding Standards
55. HTML Coding Standards https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/
56. HTML Coding Standards • All tags and attributes must be written in lowercase.
58. HTML Coding Standards • All tags and attributes must be written in lowercase. • Self-closing tags must have a space before the forward slash.
59. HTML Coding Standards • All tags and attributes must be written in lowercase. • Self-closing tags must have a space before the forward slash. • All attributes must have a value, and must use double- or single-quotes.
61. How to get started
62. PHP Code Sniffer https://github.com/squizlabs/PHP_CodeSniffer
63. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent. PHP Code Sniffer
64. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent. • phpcs detects violations of a defined coding standards. PHP Code Sniffer
65. PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent. • phpcs detects violations of a defined coding standards. • phpcbf automatically corrects violations. PHP Code Sniffer
66. REQUIREMENTS PHP_CodeSniffer requires PHP version >= 5.4.0. (However individual sniffs may have additional requirements such as external applications and scripts) PHP Code Sniffer
67. INSTALLATION • Directly using curl or wget • Composer, globally or project • Homebrew https://github.com/squizlabs/PHP_CodeSniffer#installation PHP Code Sniffer
68. USAGE • CLI phpcs --standard=WordPress /path/to/code/myfile.php phpcs --standard=/path/to/custom_ruleset.xml test.php PHP Code Sniffer
69. USAGE • CLI • Editor or IDE integrations PHP Code Sniffer
70. USAGE • CLI • Editor or IDE integrations • WP Enforcer or GrumpPHP PHP Code Sniffer
71. Ruleset.xml https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml
73. You can also.. • Ignore files PHP Code Sniffer
75. You can also.. • Ignore files • Disable parts of a file PHP Code Sniffer
77. You can also.. • Ignore files • Disable parts of a file • Disable specific rules PHP Code Sniffer
80. You can also.. • Ignore files • Disable parts of a file • Disable specific rules • Writing reports PHP Code Sniffer
82. You can also.. • Ignore files • Disable parts of a file • Disable specific rules • Writing reports • Lint CSS/JS PHP Code Sniffer
84. https://jshint.com/ https://eslint.org/
85. http://csslint.net/
86. WPCS • WordPress - complete set with all of the sniffs in the project • WordPress-Core - main ruleset for WordPress core coding standards • WordPress-Docs - additional ruleset for WordPress inline documentation standards • WordPress-Extra - extended ruleset for recommended best practices, not sufficiently covered in the WordPress core coding standards • WordPress-VIP - extended ruleset for WordPress.com VIP coding requirements https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
87. WPCS - Ignore rules • Escaping / XSS // WPCS: XSS ok. • Sanitization // WPCS: sanitization ok. • Nonce verification / CSRF // WPCS: CSRF ok. • Overriding WordPress globals // WPCS: override ok. https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
88. • phpcs-neutron-standard: A set of phpcs sniffs for PHP > 7 development • PHP Compatibility • PHP Compatibility WP • phpcs-security-audit: Finds vulnerabilities and weaknesses related to security in PHP • codor: Sniff to help find Code Smells • phpcs-calisthenics-rules: Focuses of maintainability, readability, testability and comprehensibility Useful packages
89. .editorconfig http://editorconfig.org/
90. .editorconfig EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.
91. https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
92. Editors/IDE supported (out of the box)
93. Editors/IDE supported (requires a plugin)
94. THANK YOU :) @theskinnyghost @pragmaticweb