Strict coding standards and conventions
Chisel theme enforces consistent, review-ready code across PHP, Twig, JS and SCSS. Standards are codified in configuration files and executed via NPM scripts and CI-friendly commands, so every build stays clean and predictable.
Overview
| Language | Linter / Formatter | Config File | NPM Script |
|---|---|---|---|
| PHP | PHP CodeSniffer (WordPress Standards) | phpcs.xml | npm run phpcs |
| Twig | TwigCS (FriendsOfTwig) | twig_cs.php | npm run twigcs |
| JS/TS | ESLint + Prettier | .eslintrc.cjs | npm run lint:script |
| SCSS | Stylelint + Prettier | stylelint.config.mjs | npm run lint:style |
| General | Prettier | prettier.config.mjs | npm run format |
Enforced checks and commands
All quality checks are run automatically during the build process:
npm run buildBashThis command runs independent tasks in parallel:
npm run build-scripts(Webpack)npm run lint(ESLint + Stylelint)npm run phpcsnpm run twigcs
You can also run a formatter for supported files (JS, JSON, SCSS, MD) using:
npm run formatBashPHP conventions
We adhere to the WordPress Coding Standards with some practical adjustments.
- Engine:
phpcs(PHP_CodeSniffer) - Ruleset: WordPress-Core, WordPress-Docs, WordPress-Extra (partial)
- Indent: Tabs (enforced by
.editorconfig)
Key Configuration (phpcs.xml):
- Excluded paths:
vendor/,node_modules/,dist/,build/,acf-json/. - Allowed: Short ternary operator
?:. - Relaxed: File naming conventions for classes are relaxed (
WordPress.Files.FileName.InvalidClassFileNameexcluded) to allow for cleaner autoloading structures. - Excluded: Yoda conditions (
WordPress.PHP.YodaConditions.NotYodaexcluded)
To check your PHP files:
npm run phpcsBashTwig conventions
Twig templates are validated for syntax and coding style.
- Engine:
friendsoftwig/twigcs - Ruleset: Official
- Scan paths:
views/,custom/views/,src/blocks/,src/blocks-acf/ - Severity: Warning (Blocking)
To check your Twig files:
npm run twigcsBashSCSS conventions
Styles are linted for syntax, ordering, and conventions.
- Engine:
stylelint - Presets:
stylelint-config-standard-scssstylelint-config-css-modulesstylelint-config-recess-order(Sorts properties automatically)stylelint-prettier
- Formatting: Prettier
- Class Naming: Enforced regex pattern allowing:
- camelCase (
.myClass) - kebab-case (
.my-class) - BEM (
.block__element--modifier)
- camelCase (
To check your SCSS files:
npm run lint:styleBashJavaScript conventions
Modern JavaScript is linted and formatted to ensure best practices and prevent errors.
- Engine:
eslint - Presets:
eslint:recommendedplugin:react/recommended@xfive/eslint-config-prettier
- Formatting: Prettier
- Environment: Browser, Node, ES2021
To check your JS files:
npm run lint:scriptBashEditor Configuration
The project includes an .editorconfig file that automatically configures your editor (VS Code, PhpStorm, etc.) for:
- Indentation: Spaces (2) for JS/SCSS/JSON, Tabs for PHP.
- Line endings: LF.
- Charset: UTF-8.
- Whitespace: Trim trailing whitespace, ensure final newline.